Transparencias de apoyo para la charla sobre WebGL en la cuarta edición de SevillaJS

1. Introducción a WebGL
Ángel Brasero Moreno

2. Introducción a WebGL
● Intro
● Soporte
● Algunos conceptos nuevos
● Recursos
● Ejemplos
● Outro

3. ¿WebQUÉ?
● Estándar W3C
● Aceleración 3D
● OpenGL ES 2.0
● ¡Limitaciones!
● ¿Flash?

4. Navegadores
● ¿Todos?
● No, todos no
http://caniuse.com/webgl

5. Nuevos conceptos
● GLSL
● Shaders
● Programs

6. Shaders & Programs
● GLSL: lenguaje
● Shader: trozo de código
escrito en GLSL
● Program: conjunto de
shaders
● Se ejecutan en la tarjeta
gráfica

7. Shaders
● Buffers (espacio de memoria)
● Attributes (extracto de buffer)
● Samplers
● Uniform variables
● Varying variables

8. ● Vertex shaders
– Por vértice
● Fragment shaders
– El espacio entre los
vértices
– Fragment != pixel

9. Fragment ShaderFragment Shader Vertex Shader

10. Librerías
● Unity 3D
● Three.JS – Importantísimo
– tQuery
– Physijs

11. Recursos
● Learning WebGL
http://learningwebgl.com
● Learning Three.JS
http://learningthreejs.com/
● Aerotwist
http://www.aerotwist.com/tutorials/
● Three.JS
http://threejs.org/
● GLSL
http://nehe.gamedev.net/article/glsl_an_introduction/25007/

12. Ejemplos
● Raytracing
http://madebyevan.com/webgl-water/
● Learning
http://learningwebgl.com/blog/
● Three.JS
http://threejs.org/
● ¡Los mios!

13. The end
¿Preguntas?
¡Gracias!