Blender - Practica 3

Principalmente en esta practica se añadieron imágenes al plano, se empezó con importar la imagen llamada Highway_road_wet_02_4K_Base_Color (Imagen 1), se roto y se escalo para dejarla de mayor tamaño, después se abrió el Shader Editor, despues se añadio otra textura para el roughness con la imagen Highway_road_wet_02_4K_Roughness (Imagen 2) y se conecto el color a un Normal Map con la imagen Highway_road_wet_02_4K_Normal (Imagen 3),  se duplica una vez mas ahora con la imagen Highway_road_wet_02_4K_AO (Imagen 4) y se conecta con un Multiply Node al color base, de tal modo que los nodos queden como se muestra en la imagen 5.

Imagen 1

Imagen 2

Imagen 3

Imagen 4

Imagen 5

Después se creo la gota y se duplico el plano para que fuera el origen de las partículas; en esta segunda se agregaron las partículas con la forma de la gota antes creada y configurada, se agrego cantidad y se puso que todas fueran de tamaños diferentes aleatoria mente; finalmente se cambio el ambiente (HDR) por uno de shangai.

Blender - Practica 2

En esta practica se siguió el siguiente tutorial:

Se comenzó insertando una esfera moviendo los ejes que esta tenia, entrando en el modo edición, se hicieron dos cortes en el centro para hacer un poco mas largo u redondeado en las orillas, se seleccionaron los 4 puntos de abajo y se utilizo el extrude para hacer sus patas, se hicieron sus ejes un poco mas redondeados, después esta misma figura se corto una vez en el medio y en la de en medio de arriba se comenzó a formar la trompa, en 3 puntos diferentes utilizando la extrusión, en el punto completamente contrario (parte trasera) se utilizo igualmente la extrusión para formar su cola, se colo el cursor y se seleccionaron los puntos para generar los ojos igualmente con la extrusión, se agregaron dos pequeñas esferas en sus ojos, también se formo la boca utilizando la misma técnica. 

Finalmente en el menú Shading se le agregaron los materiales y se les dio color a los diferentes componentes.

Blender - Practica 1

El círculo de color rojo y blanco situado en el centro del plano es el puntero 3D. Sirve para determinar dónde situaremos nuestros objetos en escena.

Se agregaron figuras básicas, como son torus, cylinder, cube, sphere, cone, suzanne y un plano con diferentes superficies, el plano con Mix Shader, torus, cylinder, cube, sphere, cone con Principled BSDF y Suzanne con Glossy BSDF, cambiando también sus propiedades, como son color y roughness; tomando en cuenta que la escena ya incluía iluminación, una cámara y el cube inicialmente.

Fuente: http://openaccess.uoc.edu/webapps/o2/bitstream/10609/9702/1/Manual_de_Introduccion_a_Blender.pdf

THREE.js - Practica 8

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Se importaron los archivos js:

• jquery-3.4.1.min.js
• three.js
• TrackballControls.js
• util.js
• utils.js
• dat.gui.min.js
• OrbitControls
• stats.min.js

Se usaron texturas para el plano y la figura, utilizando TextureLoader que es una clase para cargar una textura. Esto utiliza el ImageLoader internamente para cargar archivos.

// Textura para el plano

    var textura_plano = new THREE.TextureLoader().load('./images/cesped3.jpg');

También se creo una nueva geometría utilizando los vértices para trazarla, utilizando ExtrudeGeometry, que crea geometrías extruidas a partir de una forma de trazado.

Se implemento el uso de mallas con el Mesh, que es una clase base que se hereda de Object3d y se utiliza para instanciar objetos poligonales combinando una geometría con un material . Mesh también es la clase base para las clases más avanzadas de MorphAnimMesh y SkinnedMesh .

Fuente:
https://threejs.org/docs/
https://riptutorial.com/es/three-js/topic/8838/mallas

THREE.js - Practica 7

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

En esta practica se utilizaron los archivos js:

• dat.gui.js
• jquery-3.4.1.min.js
• RectAreaLightUniformsLib.js
• Stats,js
• three.js
• TrackballControls
• util.js

Se utilizo como nuevo el LineBasicMaterial que es un material para dibujar geometrías de estilo alámbrico, con la finalidad de dibujar un copo de nieve. 

También se utilizaron los points que son una clase para mostrar puntos. WebGLRenderer representa los puntos con gl.POINTS.

Fuente: https://threejs.org/docs/

THREE.js - Practica 6

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

En esta practica se utilizaron los archivos js:

• dat.gui.js
• jquery-3.4.1.min.js
• RectAreaLightUniformsLib.js
• Stats,js
• three.js
• TrackballControls
• util.js
• Gosperfunction.txt

En esta practica se añadieron diferentes luces y tipos a la escena, así como sus controles para la intensidad y sus colores.

RectAreaLight emite luz uniformemente a través de la cara en un plano rectangular. Este tipo de luz se puede utilizar para simular fuentes de luz como ventanas brillantes o luces de tira.

Inicialmente se renderiza con los colores básicos RGB rojo,verde y azul.

Utiliza una spotLight, esta luz se emite desde un único punto en una dirección, a lo largo de un cono que aumenta de tamaño a medida que se aleja de la luz, esta luz puede proyectar sombras.

Fuente: https://threejs.org/docs/

THREE.js - Practica 5

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Se importaron los archivos js:

• jquery-3.4.1.min.js
• three.js
• TrackballControls.js
• util.js
• utils.js
• dat.gui.min.js
• OrbitControls
• stats.min.js

Funciona de manera similar que la practica dos, en esta practica se distribuyeron los 2000 puntos de manera aleatoria así como sus colores.

Se busco que los puntos formaran un cubo cubriendo esta área aleatoria mente, distribuidos entre -10 y 10 en el plano, para esto se utilizaron varias sentencias FOR, para que los colores fueran aleatorios se utilizo la clase Math.

{color:(Math.random() * 0xffffff)}

THREE.js - Practica 4

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Esta practica es igual a la anterior, solo que se importaron los archivos js:

• jquery-3.4.1.min.js
• three.js
• TrackballControls.js
• util.js
• utils.js
• dat.gui.min.js
• OrbitControls
• stats.min.js

Se añadieron los controles a la pantalla para la velocidad de la rotación del cubo y la velocidad de rebote de la esfera, se agregaron también los "gestos" del mouse.

OrbitControls permiten que la cámara orbite alrededor de un objetivo.

TrackballControls es similar a OrbitControls. Sin embargo, no mantiene un vector de cámara constante. Eso significa que si la cámara orbita sobre los polos "norte" y "sur", no se voltea para permanecer "derecha".

Fuente: https://threejs.org/docs/

THREE.js - Practica 3.1

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Para esta practica se utilizaron los mismos js que en la practica 3, en esta practica se eliminaron los ejes, y se les dio un material a las figuras, agregando una esfera y un cubo; el material que se utilizo fue el MeshLambertMaterial que utiliza un modelo sin base física para calcular la reflectancia. Esto puede simular bien algunas superficies (como madera o piedra sin tratar), pero no puede simular superficies brillantes con reflejos especulares (como madera barnizada).

Se conservo el plano blanco, agregando un cubo a la escena y un cilindro, esta vez sin activar el wireframe, pero si agregando su propiedad castShadow en true para que se pudieran apreciar sus sombras.

Fuente: https://threejs.org/docs/

THREE.js - Practica 3

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Es igual a la primera practica pero se añadio el zoom, los controles de órbita permiten que la cámara orbite alrededor de un objetivo, para esta practica se añadieron al js y a las exportaciones los archivos:

• jquery-3.4.1.min.js
• three.js
• TrackballControls.js
• util.js
• utils.js

Se siguen conservando los ejes de los colores, verde,azul y rojo, un plano con MeshBasicMaterial en color blanco, también, el cubo, cilindro y esfera con el wireframe en true. 

Fuente: https://threejs.org/docs/

THREE.js -Practica 2

Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Utiliza los mismos archivos js que la practica 1, en esta se implemento el uso de las partículas, Three.js trata un sistema de partículas como cualquier otra forma primitiva ya que tiene propiedades de geometría y posición, escala y rotación.

Se obtiene un fondo completamente blanco y un punto rojo en el centro de la pantalla.

Fuente: https://threejs.org/docs/

THREE.js - Practica 1

Utilizando los pasos de el post anterior: https://gvtgraficacion.blogspot.com/2019/11/threejs.html

Puntos básicos para esta y todas las practicas de THREE.js
Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta  css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Para esta practica
Se utilizaron de la carpeta raíz de THREE.js:

• jquery-3.4.1.min.js
• three.js

Se comenzó a crear el script dentro de la carpeta js con el nombre de script.js, 

• En este documento se inicio la función primeramente:

$(function init() {

• Dentro de ella de comenzó con la creación de la escena 

var scene = new THREE.Scene();

• Crear el render y fijar el tamaño

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);

• Mostrar los ejes

var axes = new THREE.AxesHelper(20);
scene.add(axes);

• Crear un plano

var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial=new THREE.MeshBasicMaterial({color:0xAAAAAA});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

• Rotar y posicionar el plano

plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);

• Agregar el plano al escenario

scene.add(plane);

• Se agrego un cubo para lo cual se creo, posiciono y se agrego al escenario

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000, wireframe:true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-4,3,0);
scene.add(cube);

• De igual manera que el cubo se agrego una esfera

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777FF, wireframe:true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(20,4,2);
scene.add(sphere);

• También un cilindro

var cylinderGeometry = new THREE.CylinderGeometry(3, 3, 10, 10);
var cylinderMaterial = new THREE.MeshBasicMaterial( {color: 0xFFFF00, wireframe:true});
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder.position.set(6,6,2);
scene.add(cylinder);

• Se posiciona la cámara

camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

• Agregar la salida del render al elemento html

document.getElementById("webgl-output").appendChild(renderer.domElement);

• Se renderiza la escena y se cierra la llave

renderer.render(scene, camera);
});

THREE.js - Conceptos Básicos

Conceptos Básicos

Estos conceptos básicos serán la base para el desarrollo de las practicas futuras.

Lo primero es descargar la librería: https://threejs.org/

Creación de la Primera Escena

• Lo primero de todo es generar el renderizador
• Posteriormente le daremos las dimensiones de la pantalla y lo añadiremos al documento.
• Y ahora tenemos que crear la propia escena, que se encarga de almacenar todos los elementos que posteriormente visualizaremos.
• En esta punto se añaden los elementos a la escena.
• Lo último, cuando creamos cualquier elemento, es añadirlo a la propia escena que habíamos creado.
• Para poder visualizar una escena debemos de tener una cámara que nos de la visión de los elementos, la cámara nos permite establecer el ángulo de visión (estando entre los 40º y 50º un ángulo natural), la relación entre el ancho y el alto y el rango de alcance de la vista.
• Para poder ver con claridad los colores de la escena necesitamos añadirle luz, que actúa de forma similar a una cámara, pero en lugar de darle parámetros de visualización le pasaremos un número (en hexadecimal, pero numérico), también tenemos que darle una posición, al igual que con la cámara y añadirla a la escena.

Fuentes: 

Pedro Gutiérrez (25 Noviembre 2013), Introducción a Three.js, la librería 3D número uno para HTML5, recuperado de: https://www.genbeta.com/desarrollo/introduccion-a-three-js-la-libreria-3d-numero-uno-para-html5

Sotfware a usar

¿Qué es THREE js?

Es una librería bastante liviana y muy eficiente para generar y animar gráficos en 3D dentro del navegador; no es popular solo porque es simple a la hora de usarlo a través de JavaScript, sino porque tiene un equilibrio perfecto entre el diseño y la programación.

Permite, entre otras cosas, importar archivos 3D a partir de Blender o Maya, pudiendo generar terrenos u objetos totalmente complejos y de gran calidad.

¿Qué es Blender?

Blender es un programa de modelado en 3D, apoyado por varias herramientas. Está orientado a artistas y profesionales del diseño y multimedia, puede ser usado para crear, visualizaciones 3D estáticas o vídeos de alta calidad. También incorpora un motor de 3D en tiempo real el cual permite la creación de contenido tridimensional interactivo que puede ser reproducido de forma independiente.

Características principales:

• Software libre, gratuito y multiplataforma
• Potente y versátil
• Importa y exporta de múltiples formatos 3D
• Soporte gratuito vía blender3d.org
• Manual multilenguaje en linea
• Una comunidad mundial creciente.
• Un archivo ejecutable pequeño que permite una fácil distribución
• Te puedes olvidar de números de serie y activaciones
• Múltiples plugins también gratuitos que expanden las posibilidades del programa
• Si sabes programar puedes usar el código fuente para hacer modificaciones

Fuentes: 

• Pedro Gutiérrez (25 Noviembre 2013), Introducción a Three.js, la librería 3D número uno para HTML5, recuperado de: https://www.genbeta.com/desarrollo/introduccion-a-three-js-la-libreria-3d-numero-uno-para-html5
• Francisco (26 Noviembre 2008), ¿Qué es Blender?, recuperado de: http://www.renderati.com/render/%C2%BFque-es-blender/

Introducción

¿Que es la graficación?

Un gráfico es cuando existe algún trazo o marca que han sido hechos con intencionalidad. Lo gráfico, tiene por objeto representar (tomar el lugar de, o de presentar de nuevo) alguna cosa que no está.

La Graficación por Computadora es uno de los muchos campos de las Ciencias de la Computación, donde se utilizan computadoras tanto para generar imágenes visuales sistemáticamente como integrar o cambiar la información visual y espacial recopilada del mundo real.

La graficación tiene aplicación en varias áreas del conocimiento: 

• Interfaces de usuario 
• Graficado de información en negocios, ciencia y tecnología 
• Despliegue de información
• Publicación electrónica
• Diseño Asistido por Computadora (CAD) 
• Son simulación y animación para visualización científica.
• Entretenimiento 
• Arte 
• Control de procesos 
• Cartografía

La graficación por computadora nos ha dado infinidad de ventajas en varias ramas importantes para el ser humano, como puede ser la medicina, arquitectura, entretenimiento, aplicaciones científicas etc. Lo importante es que los avances en estos temas nunca paran y su mejora es día con día todo gracias a la graficación por computadora.

Conceptos Básicos

Un pixel es el elemento mas pequeño de la pantalla de la computadora que puede ser iluminado con un cierto color e intensidad. 

Una gráfica vectorial es una gráfica de computadora que es almacenada en la memoria de la computadora usando formulas matemáticas.

La resolución de pantalla es el numero de pıxeles que puede ser mostrado en la pantalla; viene dada por el producto del ancho por el alto.

Fuentes:

• Dr. Roberto Núñez González (22 de mayo de 2014), Graficación por computadora, recuperado de: https://sivea.uson.mx/docentes/tareas/Intr-Graf_4.pdf

PRESENTACIÓN

INSTITUTO TECNOLÓGICO SUPERIOR DE JEREZ

ALUMNA:

GUADALUPE VÁZQUEZ DE LA TORRE

NUMERO DE CONTROL:

S17070158

CARRERA:

INGENIERÍA EN SISTEMAS COMPUTACIONALES

NOMBRE DE LA MATERIA:

GRAFICACIÓN

QUINTO SEMESTRE

DOCENTE:

RICARDO SALDIVAR QUEZADA