Etiqueta: 3d

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: , , , ,

Three.js Tutorial 2 – Colores, movimientos y 3D

Escrito por el 6 marzo, 2013 | 10 comentarios

Damos paso al segundo tutorial de la nueva serie centrada en 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 2, 3 y 4 de la serie de WebGL puro, debido a la sencillez de los cambios.
» Leer la entrada entera

Etiquetas: , , , ,

Three.js Tutorial 1 – El retorno del triángulo y el cuadrado

Escrito por el 4 marzo, 2013 | 8 comentarios

Bienvenidos al primer tutorial de la nueva serie centrada en 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 concreto, para este tutorial inicial, haremos lo mismo que hicímos en el viejo tutorial del triángulo y el cuadrado en WebGL.

Éste es el resultado de lo que se verá en un navegador que soporte webGL:

Abre este enlace para ver el Ejemplo en vivo de Three.js. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome.
» 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: , , , , , ,

WebGL Tutorial 15 – Mapas especulares

Escrito por el 13 diciembre, 2011 | Sin comentarios

Bienvenido al decimoquinto tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. En él aprenderemos a usar mapas especulares, que hacen que las escenas parezcan más realistas, pues sirven para indicar cómo debe verse el reflejo especular en cada punto de la superficie del objeto, de la misma forma en que una textura sirve para saber de qué color debe pintar cada punto. A nivel conceptual, usar mapas especulares incrementa la complejidad de cómo se está dibujando la escena; sin embargo, en términos de programación, es un cambio relatívamente pequeño.

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 la textura, y aquí el mapa especular, 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 modelo de la Tierra girando sobre su centro en el espacio, con un reflejo especular muy brillante, que representa la luz del sol. Como se podría esperar, el reflejo especular sólo tiene sentido en las zonas donde hay agua, como en los océanos y mares. En las zonas donde hay tierra no se produce ningún reflejo.

Desmarque la casilla de “Usar mapa especular”, en el formulario. Verás que el reflejo especular también aparece en las zonas con tierra, empeorando la sensación de realismo de la escena. Ahora es más fácil entender que el uso de mapas especulares sirve para especificar qué zonas del objeto deben reflejar especularmente la luz, consiguiendo así un control más preciso de cómo la iluminación interactua con los objetos de la escena.

Ahora marque la casilla de “Usar mapa especular” de nuevo, y reduzca la intensidad de la luz difusa, poniendo su color RGB a (0.5, 0.5, 0.5). A continuación, desmarque la casilla “Usar mapa de color”. Verás se deja de usar la textura de la tierra, dibujando la esfera de color blanco, pero el reflejo especular sigue estando afectado por el mapa especular.

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

» Leer la entrada entera

Etiquetas: , , , ,

WebGL Tutorial 14 – Reflejos especulares y cargar un modelo con JSON

Escrito por el 13 diciembre, 2011 | Un comentario

Bienvenido al decimocuarto tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. Hoy completaremos la técnica reflexión de Phong añadiendo reflejos a las superficies más brillantes, para hacer la escena un poco más realista.

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 el modelo, aquí tienes la primera, y aquí la segunda de las texturas utilizadas, para descargarlas 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. En el ejemplo se ve la famosa tetera girando en el vacío. Se pueden ver los destellos especulares ocasionalmente en el pico y en el asa cuando la luz golpea en un ángulo determinado. Se puede apagar o encender el uso de los reflejos especulares, y también la iluminación en general, mediante las casilla de checkbox. Además se puede cambiar la textura de la tetera; la primera textura simula ser un material galvanizado, que conseguí en Texturas Arroway. La segunda textura es una proyección de mercator de La Tierra, obtenida en la página de la agencia espacial europea Envisat. También permite no utilizar ninguna textura, con lo que se utilizará el color blanco para dibujar la textura.

También puedes controlar el nivel de brillo de la tetera, la posición y color del punto de luz (que por cierto es la fuente que ocasiona el efecto de reflejo) y el color de la iluminación de ambiente en los campos de texto de abajo, como en otros tutoriales.

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

» Leer la entrada entera

Etiquetas: , , , , ,

Tutorial WebGL 13 – Iluminación por fragmento y múltiples “programas”

Escrito por el 23 noviembre, 2011 | Un comentario

Bienvenido al decimotercer tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. En ella, veremos cómo simular una iluminación por fragmento, lo que le supone a la tarjeta gráfica una carga de trabajo adicional importante, pero consigue resultados mucho más realistas. También veremos cómo cambiar los shaders en mitad de una ejecución, mediante el uso de un poco de código para sustituir el programa shader por otro cuando nos interese.

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

Abre este enlace para ver el ejemplo en vivo de webGL, y aquí tienes una y aquí otra de las texturas utilizadas, para descargarlas 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. Se ve la luna y una caja gigante orbitando en el espacio (se verán blancos hasta que la textura se cargue completamente). Ambos están iluminados por un punto de luz situado entre ellos, pero ésta vez se incluye un checbox para activar o no la iluminacion por fragmento (o por píxeles) y el uso de texturas, para que sea fácil ver la diferencia entre un tipo de iluminación u otro. Si quieres puedes cambiar la posición de dicha luz, su color, etc, mediante el formulario que hay debajo del canvas.

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

» Leer la entrada entera

Etiquetas: , , , , , ,

WebGL Tutorial 12 – Punto de iluminación

Escrito por el 21 noviembre, 2011 | Sin comentarios

Bienvenido al duodécimo tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. Ésta lección, como la anterior, no va a estar basada en ningún tutorial de OpenGL de NeHe. En ella, aprenderemos una forma sencilla de usar puntos de luz, es decir, iluminación que proviene de un sólo punto de dentro la escena, que ilumina hacia todas direcciones, con lo que afectará a cada vértice con un ángulo diferente. No confundir con iluminación direccional, que era la iluminación que incidía con la misma dirección en todos los vértices, ya que suponíamos que la luz venía de muy lejos, fuera de la escena.

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

Abre este enlace para ver el ejemplo en vivo de webGL, y aquí tienes una y aquí otra de las texturas utilizadas, para descargarlas 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. Se ve la luna y una caja gigante orbitando en el espacio (se verán blancos hasta que la textura se cargue completamente). Ambos están iluminados por un punto de luz situado entre ellos. Si quieres puedes cambiar la posición de dicha luz, su color, etc, mediante el formulario que hay debajo del canvas.

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

» Leer la entrada entera

Etiquetas: , ,

WebGL Tutorial 11 – Esferas, matrices de rotación y eventos de ratón

Escrito por el 18 noviembre, 2011 | 2 comentarios

Bienvenido al undécimo tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. Ésta lección va a ser la primera que no está basada en algún tutorial de OpenGL de NeHe. Aquí veremos cómo mapear una esfera con una textura (es decir, utilizar una sola textura para pintar todas las caras del objeto) con luz direccional. Además haremos que podamos girar alrededor de la esfera utilizando el ratón.

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

Abre este enlace para ver el ejemplo en vivo de webGL, y aquí tienes la imagen GIF, para descargarla 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. La escena representa una esfera con la textura de la luna, iluminada con una luz direccional que viene desde arriba a la derecha. Si pincha y arrastra desde cualquier lugar del CANVAS, podremos hacer girar la cámara sobre la luna en esa dirección. Y como en un tutorial anterior, puedes cambiar los parámetros que definen la luz ambiental y la luz direccional.

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

» Leer la entrada entera

Etiquetas: , ,

WebGL Tutorial 10 – Cómo cargar un mundo 3D, y el tipo de cámara más básico

Escrito por el 17 noviembre, 2011 | 4 comentarios

Bienvenido al décimo tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL, que a su vez está basada en el capítulo 10 del tutorial sobre openGL de NeHe. Hoy aprenderemos a cargar una escena 3D desde un fichero de texto plano (txt), lo que significa que bastaría con modificar dicho fichero de texto para modificar y ampliar el “mapa”, tal y como lo hacían los primeros videojuegos 3D con los ficheros WAD. Además, así evitaremos tener un montón de código en javascript encargado de posicionar los vértices uno a uno e información acerca de cómo dibujarles la textura. También aprenderemos a escribir un pequeño código con el que podremos movernos por la escena, consiguiendo un muy modesto videojuego tipo Doom.

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

Abre este enlace para ver el ejemplo en vivo de webGLAquí tienes el fichero donde se define el mapa, y aquí tienes la imagen GIF, 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.

Puedes moverte por la habitación con los controles típicos WSAD o los cursores, y utilizar AvPag y RePag para mirar hacia arriba o hacia abajo. Algo que debes tener en cuenta es que también hemos simulado el pequeño balanceo arriba-abajo que se produciría al andar, como pasaba en el Doom original, y sigue pasando en muchos juegos del mismo estilo en primera persona.

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)