Download WebGL y ThreeJS

Introducción
al Arte
Generativo
Ing. Federico Marino – FIUBA
[email protected]
www.fedemarino.com.ar
WebGL y Three.js
WebGL
www.khronos.org/webgl
El modelo de cámara virtual
Escena:
- Luces
- Superficies
- Materiales
- Cámara
Escenas 3D
El pipeline gráfico programable
Procesador de vértices
• Aplica transformaciones las primitivas (vértices):
- convertir a sist. de coordenadas de cámara
- efectos de deformación paramétricos
• Descarta primitivas fuera del área visible y las
prepara para la etapa de rasterización
Procesador de fragmentos
• Computa el color de los fragmentos
(aplica modelos de iluminación)
• Procesamiento paralelo
(c/ fragmento se evalúa independientemente)
GLSL (OpenGL Shading Language)
• Lenguaje de alto nivel similar a C/C++
• Para codificar progamas de vértices y
fragmentos (“shaders”) ejecutados en la
GPU
• Solo procesamiento númerico
• Otros lenguajes: Cg, HLSL
Ejemplos WebGL
mallaAnimada.html
wwwhelloenjoy.com
triangulosColoreados.html
Luz y Superficies
La apariencia de los objetos depende de
la interacción de las superficies con la luz
Fenómenos físicos - Reflexión
Interreflexiones
Fenómenos físicos -Refracción
Tipos de algorítmos
Iluminación directa
Iluminación global
Modelo de Phong
Mapas de Reflexión
Mapas de relieve (bump maps)
Three.js
www.threejs.org