viernes, 18 de noviembre de 2016

GRAFICACION 3D


El mundo con WebGL

Para realizar esta práctica se utilizaron varias herramientas de la librería THREE.js:

Se utilizaron dos tipos de luz, una ambiental y otra direccional. Con el fin de darle el efecto de sombra abajo. La única geometría que se uso fue una esfera, a esta se le asigno una textura como material y se le dio la propiedad de que la envolviera. Esta textura era una imagen del mapamundi.

Para darle el efecto de las nubes se le asigno otra textura envolvente, pero esta de formato .png para poder agregarle la propiedad de transparencia.

Enseguida en la función de rende rizado se agrego rotación a la tierra y a las nubes, siendo la de las nubes un poco más rápida, para que diera un mejor efecto.

Al final se le agrego un pequeño recuadro para poder controlar la animación y otro donde se muestran el estado. Además de la posibilidad de mover la imagen al gusto utilizando el mouse.


Blender


Insertando figuras en blender

Practica donde se realizó la inserción de algunas figuras de blender, sobre un plano.

En primer lugar, se insertó el plano y se escaló, según el gusto de cada uno. Enseguida se fueron insertando las figuras, acomodándolas para que quedasen justo encima del plano y alineadas.

Se utilizó la herramienta de edición de la figura Shading y se aplicó la propiedad smooth, en todas las figuras, esto para suavizarlas un poco más y que se vieran menos cuadradas.

Posteriormente se insertó material a todas las figuras, incluyendo el plano, se dejó el predeterminado y solo se le asigno color a cada uno.

Por último, se acomodó la lámpara justo enfrente de las figuras y se dejaron todas sus propiedades predeterminadas. La lámpara se acomodó detrás de esta de forma que quedase justo enfrente de las figuras.




Cubo sobre plano con varias propiedades


Practica donde se realizó la inserción de un cubo, sobre un plano al cual se le dieron diversas propiedades.

Para iniciar se insertó un plano, y se acomodó sobre él el cubo que blender muestra por default al abrirse. Se le asigno material al cubo, y se dejó el que blender pone por default(Diffuse).

Enseguida se le asignó el material de mix shader al plano, y se eligió el check box de utilizar nodos para hacer mas fácil la agregación de más materiales.

En el mix shader agregue el material de diffuse y el de glossy para que diera un efecto brilloso. A este mix shader se le concateno otro mix shader donde se le pusieron los materiales de diffuse y el de checker texture para dar el efecto cuadriculado.


Para finalizar se acomodó la cámara frente al cubo. Se agregó una luz de tipo sun y se puso encima del cubo con la dirección de rayo de sol a un lado del cubo, razón por la cual la sombra del cubo aparece en ese sitio.



Tela sobre pecera


En esta práctica se colocó un plano sobre una pecera, y se le dio animación para que esta callera, así al pausar la animación podíamos blenderizar la imagen del plano cayendo sobre la pecera.Se cambio el color del mundo a negro.

En primer lugar, se insertó una esfera, se le hicieron modificaciones en modo edición para que esta adquiriera la forma de una pecera. Posteriormente se le asigno material de tipo glass, y su propiedad roughness se puso en 0 para que diera efecto de vidrio. Se insertó un plano debajo de esta.

Enseguida se insertó un segundo plano este se clocó encima de la pacerá con una esquina dentro, se le asigno material glass, pero este se dejó en 1 en la propiedad de roughness, y en las modificaciones se le agrego de tipo cloth, para que tomara efecto de tela. Se hizo una pequeña animación para que callera.

Posteriormente se puso la lámpara de tipo punto y se acomodó la cámara, para finalizar se dio play a la animación y en el punto deseado se pone pause y se renderiza.




Logo de twitter


En esta práctica se realizó un tipo botón con el logo de twitter.

Se utilizó una imagen real del logo de twitter, la cual se importó hasta el escenario de blender y se fue modelando con curvas de bézier.

Posteriormente se le asignaron algunos cortes y se asignó material diffuse junto con el color, también se le asigno grosor para convertirla en imagen 3d. Como en otras prácticas se insertó un plano al fondo.

 Luego se agregó un circulo al que también se le dieron propiedades como material y grosor. Este se colocó entre el logo y el plano.

Enseguida se puso un texto y también se le dio grosor y material. Finalmente se acomodó la cámara y la luz se tipo sol.



Cubos


Para esta práctica se utilizaron varios elementos para dar la forma de unos cubos saliendo de un cilindro.Con la utilización del mundo en color negro.

Esta práctica se realizó en dos capas, en la primera capa se insertó un cilindro horizontalmente. Y en la segunda capa se crearon varios rectángulos en 3D de un mismo tamaño y un mismo material, pero de diferentes colores.

Luego se le asignaron al cilindro partículas, las cuales eran los rectángulos, al girar los rectángulos 90° estos dan el efecto de desparpájante que se puede observar en la imagen.

Para finalizar se asignaron varias propiedades para mejorar su visualización, como algo de brillo y enfoque. Enseguida se acomodó la cámara y se insertaron dos planos encima y en un lado del cilindro, estos fueron los encargados de proporcionar luz, es por eso que se les asigno el material de emission.



Introducción

Graficación


La graficación es el arte o la ciencia de producir imágenes gráficas con la ayuda de la computadora.
Su principal objetivo es establecer los principios, técnicas y algoritmos para la generación y manipulación de imágenes mediante una computadora. 
Las imágenes pueden ser de distinta complejidad, en dos dimensiones, hasta modelos tridimensionales donde se requiere producir imágenes de aspecto real. 
(Definición de Graficación, s.f.)

WebGL


WebGL es una API multiplataforma destinada a crear gráficos 3D basada en estándar de gráficos 3D OpenGL. Se ejecuta en el elemento Canvas de HTML5.
WEB GL tiene una completa integración con todas las interfaces DOM (Document Object Model). Al ser una API DOM, se puede utilizar cualquier lenguaje de programación compatible con DOM como JavaScript o Java, es por esto que también es compatible con todos los elementos del estándar HTML y con distintos navegadores y plataformas.
Esta tecnología aprovecha la aceleración por hardware de las placas de video, sin ella, los gráficos son generados por la CPU, cargándola demasiado y volviendo muy lento al sistema, e aquí una de las grandes ventajas.
Al aprovechar la aceleración de hardware permite la renderización de los gráficos en el mismo navegador y al utilizar lenguajes de programación interpretados no es necesario la compilación del código antes de renderizarlo, sino que puede ser mostrado directamente en pantalla.


Blender


Blender es un programa libre  y abierto de creación de figuras 3D. Es compatible con la totalidad de modelado 3D, aparejos, animación, simulación, renderizado, composición y seguimiento de movimiento, incluso la edición de vídeo y creación de juegos.
Es un proyecto público, hecho por cientos de personas de todo el mundo; por estudios y artistas individuales, profesionales y aficionados, científicos, estudiantes, expertos en efectos visuales, animadores, artistas de juego, e. t. c.


Algunas de sus Características generales
  • Multiplataforma: Windows, Mac OS X, GNU/Linux, Solaris, FreeBSD e IRIX.
  • De código abierto y libre.
  • Capacidad para  variedad de primitivas geométricas , incluyendo curvas, mallas poligonales, vacíos, NURBS, metaballs.
  • Junto a las herramientas de animación se incluyen cinemática inversa, deformaciones por armadura o cuadrícula, vértices de carga y partículas estáticas y dinámicas.
  • Edición de audio y sincronización de video.
  • Posibilidades de renderizado interno versátil
  • Motor de juegos 3D integrado, con un sistema de ladrillos lógicos.
  • Funcionalidades: modelado 3d, mapeado UV, texturizado, edición de gráficos rasterizados, animación esquelética, simulación de fluidos y humo, simulación de partículas, simulación de cuerpos suaves, escultura, animación, match moving, seguimiento de cámara, renderizado, iluminación, topología dinámica, edición y composición de video, etc.



Bibliografía

Definición de Graficación. (s.f.). Obtenido de http://www.buenastareas.com/ensayos/Definici%C3%B3n-De-Graficacion/2709901.html
Web GL. (Viernes de Marzo de 2012). Obtenido de Web GL: http://ayudasprogramacionweb.blogspot.mx/2012/08/que-es-webgl.html