Usuario:ManuelRomero/WebGL/introduccion
De WikiEducator
Qué es webGL
- WebGL es una librería o API (?) que permite utilizar OpenGL ES 2.0 dentro de un canvas en una página web.Es un código de control escrito en javasscript, y código shader que se ejecuta en la GPU del un equipo.
- Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la misma.
- WebGL hace posible mostrar increíbles representaciones de gráficos 3D en tiempo real en el navegador, pero lo que muchas personas ignoran es que WebGL es en realidad una API raster, no una API 3D.
- WebGl se ejecuta en la GPU del equipo. Hay dos tipos de funciones vertex shaders y fragment shaders (??? MRM)
- vertex shaders calcula las posiciones de los vértices. A partir de estos valores se puden rasterizar puntos, líneas, polígonos .....
- fragments shaders calcula los colores de cad pixel que se va a rasterizar.
|
La rasterización es el proceso por el cual una imagen descrita en un formato gráfico vectorial se convierte en un conjunto de píxeles o puntos para ser desplegados en un medio de salida digital, |
- Los datos que queramos usar en estas funciones, los debe de recibir la GPU. Hay de 4 formas:
- .-Attributes and Buffers
Buffers son arrays de datos binarios. Posciones, Coordenadas de texturas, colores de vértices, Atributes Son usados para especificar cómo sacar los datos de los buffers y facilitarlos a los vertex sadher
- .-Uniforms
Variables globales que se configuran antes de ejectuar un shader vertex
- .-Textures
Arrays de datos a los que el programa puede acceder de forma aleatoria
- .-Varyings
Forma en la que un shader vertex puede pasar datos a un shader fragment.
Hello word
- Web GL debe de facilitar dos cosas:
- El espacio de las coordenadas (vertex shadres)
- Los colores (fragment shadres) +.
Empezando
- Creamos un elemento cavas
<!-- .... --> <body onload="start()"> <h1>Probando webgl</h1> <canvas id="glcanvas" width="640" height="480"> Tu navegador parece no soportar el elemento HTML5 <code><canvas></code>. </canvas> </body> <!-- .... -->
- Escribimos el código de start()
function start() { var canvas = document.getElementById("glcanvas"); gl = initWebGL(canvas); // Inicializar el contexto GL // Solo continuar si WebGL esta disponible y trabajando if (gl) { gl.clearColor(0.0, 0.0, 0.0, 1.0); // Establecer el color base en negro, totalmente opaco gl.enable(gl.DEPTH_TEST); // Habilitar prueba de profundidad gl.depthFunc(gl.LEQUAL); // Objetos cercanos opacan objetos lejanos gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Limpiar el buffer de color asi como el de profundidad } }
- Inicializamos el contexto WebGL
var gl; // Un variable global para el contexto WebGL function initWebGL(canvas) { gl = null; try { // Tratar de tomar el contexto estandar. Si falla, retornar al experimental. gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {} // Si no tenemos ningun contexto GL, date por vencido ahora if (!gl) { alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo."); gl = null; } gl.viewport(0, 0, canvas.width, canvas.height); return gl; }
