Introducción a WebGL

Introducción a WebGL

Ángel Brasero Moreno

Introducción a WebGL

● Intro● Soporte● Algunos conceptos nuevos● Recursos● Ejemplos● Outro

¿WebQUÉ?

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

Navegadores

● ¿Todos?● No, todos no

http://caniuse.com/webgl

Nuevos conceptos

● GLSL● Shaders● Programs

Shaders & Programs

● GLSL: lenguaje

● Shader: trozo de código escrito en GLSL

● Program: conjunto de shaders

● Se ejecutan en la tarjeta gráfica

Shaders● Buffers (espacio de memoria)

● Attributes (extracto de buffer)

● Samplers

● Uniform variables

● Varying variables

● Vertex shaders– Por vértice

● Fragment shaders– El espacio entre los

vértices– Fragment != pixel

Fragment ShaderFragment Shader Vertex Shader

Librerías

● Unity 3D● Three.JS – Importantísimo

– tQuery–Physijs

Recursos

● Learning WebGLhttp://learningwebgl.com

● Learning Three.JShttp://learningthreejs.com/

● Aerotwisthttp://www.aerotwist.com/tutorials/

● Three.JShttp://threejs.org/

● GLSLhttp://nehe.gamedev.net/article/glsl_an_introduction/25007/

Ejemplos● Raytracing

http://madebyevan.com/webgl-water/

● Learninghttp://learningwebgl.com/blog/

● Three.JShttp://threejs.org/

● ¡Los mios!

The end

¿Preguntas?

¡Gracias!