Etiqueta: textura

Three.js Tutorial 3 – Texturas, iluminación y transparencias.

Escrito por el 5 Abril, 2013 | 3 comentarios

Seguimos con el tercer tutorial de la serie para Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En este tutorial uniremos lo que vimos en el tutorial 6, 7 y 8 de la serie de WebGL puro, debido a que los cambios no tienen mucha chicha.
» Leer la entrada entera

Etiquetas: , , , ,

Tutorial WebGL 16 – Texturas renderizadas

Escrito por el 14 Diciembre, 2011 | Sin comentarios

Bienvenido al decimosexto tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL.En él vamos a enseñar una técnica que os resultará muy útil: La representación de una escena 3D como si fuera una textura, que puede ser “pegada” a la superficie de cualquier objeto en otra escena 3D diferente. Éste es un recurso muy importante, no sólo porque hace posible crear escenas dentro de una escena, como vamos a hacer con el ejemplo de hoy, sino también porque es la base necesaria para la selección de objetos 3D con el ratón de nuestra escena (picking), el cálculo de sombras, algunos tipos de reflexiones de la luz (cuyos rebotes iluminan a otros objetos), y muchos otros efectos 3D más complicados.

Si tu navegador soporta webGL, este video muestra lo que deberías ver:

Abre este enlace para ver el ejemplo en vivo de webGL, aquí tienes una textura, aquí la otra, y aquí el modelo del portátil, para descargarlos y probarlo en local. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome. Podemos ver un ordenador portátil blanco girando en el vacío, con todos los efectos de iluminación que hemos visto hasta ahora (incluyendo un reflejo especular en la pantalla). Pero lo más interesante, es que en la pantalla del portátil se está mostrando otra escena 3D (la luna con la caja en órbita) que vimos en el tutorial 13. Queda claro que lo que está pasando es que estamos dibujando una escena completa en 3D en una textura, y luego utilizamos esa textura para “pintar” la superficie que representa el monitor.

Más información acerca de cómo funciona todo, abajo.

» Leer la entrada entera

Etiquetas: , , , , , ,

Gestionado con Wordpress y Stripes Theme Entradas (RSS) | Comentarios (RSS)