CAPITULO 8
Básicamente trabajamos elementos de Iluminacion y sombras.
En el proyecto 1 implementamos la iluminación ambiental dentro de las escenas
Aquí Modificamos los sombreadores GLSL.
- Como el sombreador de fragmentos, en el que agregamos las variables uniformes
uGlobalAmbientColor y uGlobalAmbientIntensity que al multiplicarlas por uPixelColor
obtenemos el color final de cada fragmento. (simplefs)
- También modificamos el sombreador de fragmentos de textura, agregando las variables
anterioriores y las multiplicámos por c y asi obtendremos el color final de cada fragmento.
(texturefs)
- modificamos el simple shader para acomodar las nuevas variables pasando los valores al
sombreador GLSL (simpleshader)
- aquí obtenemos las ubicaciones del color y la intensidad del ambiente dentro del
sombreador mediante la función getUniformLocation () de WebGL(simpleshader-2)
- En la función activeShader (), pasamos el color ambiental y los valores de intensidad al
sombreador (simpleshader-3)
- Y modificamoa el motor del juego para admitir las variables del ambiente global.
(engineresources)
Al correr el proyecto vemos que la escena en sí es oscura. Y cuando presionamos la tecla derecha,
se ve que aumenta la intensidad de toda la escena y hace los objetos más visibles.
En el proyecto 2 implementamos un punto de luz e iluminamos los objetos dentro de la escena.
- Aquí creamos un nuevo archivo [Link]. en el que agregamos soporte para una sola luz
con las variables de cada una de las propiedades de la misma (ligthfs)
- completamos el sombreador con la función main(lightfs-2)
- creamos un objeto para encapsular una fuente de luz puntual(ligth-js)
- en el achivo [Link] manejamos los detalles específicos de WebGL que pasara
información al sombreador GLSL. (lightsahder)
- agregamos la nueva funcionalidad para encender y apagar la luz, (ligthshader-2)
- Creamos el objeto [Link] en el que llamamos al constructor de la superclase
y establecemos el sombreador de luz correspondiente y así crear una variable para la luz
que iluminará el objeto.(ligthrenderable)
- En el archivo [Link] dado que convertiremos de WC a espacio de píxeles y este no tiene
eje z, calculamos un valor z falso para la coordenada del espacio de píxeles(xform)
- También Reemplazamos la Creación de instancias de SpriteRenderable con una instancia
de LightRenderable. En [Link] y [Link]
Al ejecutar vemos el foco de luz, al teclear a la izquierda y a la derecha aumenta y disminuimos la
intensidad.
Ya en el proyecto 3 implementamos múltiples puntos de luz dentro de una sola escena.
- Así que modificamos El sombreador de fragmentos LightFS para admitir la atenuación de
distancia, los cortes y múltiples fuentes de luz.(lightfs)
- en esta función tomamos un parámetro de luz y se devuelve un color como resultado.
(lightfs2)
- reflejamos las propiedades recién agregadas: como lo de cerca y lejos, atenuación e
intensidad.(light-js)
- creamos el objeto [Link] en el que trabajamos con la matriz de luces que sea mas
conveniente(lightset-js)
- el objeto LightRenderable se cambia para admitir múltiples fuentes de luz.
(lightrenderable) .(lightrenderable2)
- y realizamos cambios en los archivos my game en torno al manejo de varias luces a través
de un conjunto de ellas.
al correr seleccionamos las luces con 0,1,2,3. Héroe ilumina solo con 2-3. Miniom izquierdo solo
con 1-3. Miniom derecho 2-3. Mover héroe con wasd para ver como se ilumina con cada foco.
Este proyecto y el anterior que tratan sobre fuentes de luz no muestra que la iluminación y el
enfoque algoritmico, se puede localizar y desarrollar en la infraestructura del motor para respaldar
el eventual modelo de iluminación Phong
En el proyecto 4 integramos el mapeo normal en el motor de juego
- comenzamos con la implementación del sombreador GLSL. Creando ilumfs y agregamos el
objeto sampler2d para muetsrear el mapa normal(ilumfs)
- creamos el objeto IlluminationShader de JavaScript para interactuar con él.(ilumshader)
- Con la adición de la textura normal, necesitamos unir la textura de color a la unidad de
textura 0 de [Link] el constructor para referenciar al
muestreador(textureshader)
- Creamos el objeto renderizable IllumRenderable que funciona con dos mapas de textura:
myTexture para color mapa de textura y myNormalMap para el mapeo
normal(ilumrenderable)
- Modificamos el motor para admitir el nuevo mapa de texturas, el sombreador y los
objetos renderizables.(enginedefultresources)
- Creamos el enlace de textura de color a la unidad 0 y enlace de textura normal a la unidad
1en engine-texturres,js(enginetextures 1- 2)
- modificamos Los objetos Hero y Minion para admitir el objeto IllumRenderable recién
definido(hero y miniom)
el héroe, el esbirro izquierdo y los objetos de fondo están iluminados con una luz difusa. El hecho
de que los mapas normales de los objetos Hero y Minion izquierdos se generen automáticamente
se puede observar con su apariencia ligeramente pixelada y rugosa.
. El ejemplo sobre reflexión difusa y mapeo normal fue crítico porque permitió el cálculo de la
iluminación basado en modelos físicos simples y la simulación de un entorno en 3D.
En el proyecto 5 Implementamos el modelo de iluminación Phong utilizando el mapa normal y la
posición de la cámara.
- Como siempre, modificamos el sombreador de fragmentos glsl(ilumfs)
- Creamos un objeto para almacenar la propiedad del material para el modelo de
iluminación Phong.(material)
- Definimos un nuevo objeto ShaderMaterial para comunicar el contenido del Material al
sombreador GLSL IllumFS.(shadermaterial)
- como la posición de la cámara requerida para el cálculo el vector Vˆ debe estar en el
espacio de píxeles. Modificamos el objeto camara para proporcionar dicha información.
(camera)
- definimos una variable z para simular la distancia entre el objeto Camera y el resto de los
objetos Renderable.(camera 2)
- transformamos la posición de la cámara en un espacio de píxeles 3D(camera3)
al correr podemos cambiar los componentes RGB difusos mediante las teclas E / R, T / Y o U / I.
en el proyecto 6 integramos luces direccionales y un foco en su motor para soportar una gama
más amplia de efectos de iluminación.
- modificamos los sombreadores de fragmentos GLSL IllumShader y LightShader para
admitir los dos nuevos tipos de luz.(ilumfs)
- redefinimos el objeto ShaderLightAtIndex para admitir los nuevos parámetros de fuente
de luz que corresponden a luces direccionales y focos.(shadelightatindex)
- también Editamos el archivo Camera_Xform.js del objeto Camerapara transformar una
dirección de WC a espacio de píxeles(direccoines de luz)(cameraxform)
cuando corremos Vemos que Existen cuatro fuentes de luz definidas, cada una iluminando todos
los objetos en la escena. La fuente de luz 0 es una luz puntual, 1 es una luz direccional, y 2 y 3 son
focos
El ejemplo de tipos de fuentes de luz demostró cómo se pueden lograr variaciones de iluminación
sutiles pero importantes mediante la simulación de diferentes fuentes de luz en el mundo real.
ya en el proyecto 7 implementamos e integramos el algoritmo de simulación de sombras en el
juego
- en el archivo [Link]. definimos 2 nuevas constantes: kMaxShadowOpacity
que diran que tan opacas deberían ser las sombras y kLightStrengthCutOff como un límite
donde una luz con una intensidad menor que este valor no proyectará sombras.
(shadowcasterfs)
- en El objeto ShadowCaster definimos el algoritmo para calcular y renderizar geometrías
del lanzador de sombras para cada una de las fuentes de luz a las que hace referencia el
objeto LightRenderable del lanzador.(shadowcaster)
- El objeto ShadowReceiver implementa el algoritmo de simulación de sombras
(shadowreciver)
- Creamos ShadowReceiver_Stencil.js La configuración del búfer de la plantilla en realidad
consiste en operaciones específicas de WebGL. (shadowreceiverstencil)
- configuramos camerjs para que El centro del WC de la cámara ahora este ubicado a una
distancia z.(camerajs)
- actualizarse para admitir algunos elementos 3D(transform 1 -2)
- Utilice el componente z al calcular una transformación de objeto(transform3)
- dibujamos los receptores de sombras y las geometrías del lanzador de sombras antes de
dibujar los lanzadores de sombras.(mygame)
en este capitulo pudimos ver una variación del modelo de iluminación Phong. Los proyectos nos
van mostrando los tres términos de este modelo: ambiental, difusa y especular, y viendo que sin
las luces no se puede producir la iluminación
así con el algoritmo de aproximaciónque hemos ineterpuesto La simulación de sombras
resultante, vemos que se da bastante bien y nos transmite muchas de las claves visuales vitales
para el juegp.
