Leccion 1: Primeros pasos con WebGL (con ejemplos)
En esta entrada aprenderemos los primeros pasos que debemos dar antes de poder dibujar algo en el canvas utilizando WebGL. De esta manera y sin más dilación, si ya leíste la entrada anterior ¿Que es WebGL? y tienes una idea más o menos clara de lo que es WebGL y las tecnologías que utilizaremos, empezamos.
Lo primero que necesitamos para empezar con WebGL es iniciar nuestro archivo HTML el cual nos servirá para prácticamente todas las lecciones que hagamos.
A partir de ahora, todo nuestro código Javascript, que será el lenguaje que utilizaremos para usar la API WebGL, irá situado dentro de la etiqueta <script>, también podríamos colocar el código JS en otro archivo, ya lo dejo a vuestra elección.
Ahora si, empezamos con la función principal, esta se encargará de gestionar el transcurso de nuestra aplicación. La única función del contexto WebGL que vemos es gl.clearColor(), que se encarga de configurar el color con el cual se limpiará el canvas justo antes de dibujar algo en él, esta función recibe cuatro parámetros, los tres primeros son los canales rojo, verde y azul y la cantidad de cada color es un número desde el 0 al 1, y el cuarto es el canal alpha o de transparencia, el valor 1 es totalmente opaco y el 0 es totalmente transparente.
Por lo demás es simple código JS y debería sernos familiar, así que si tenéis alguna pregunta, no dudéis en comentar al final de esta entrada y os responderé encantado.
Como vemos, en la función iniciar(), obtenemos el canvas mediante su id, configuramos las dimensiones de este accediendo a los atributos width (ancho) y height (alto), y a continuación llamamos a una función llamada iniciarWebgl() pasándole como parámetro el canvas. Dicha función se encargará de obtener el contexto webgl del canvas, y almacenarlo en la variable gloval gl.
Además de lo comentado, añadir que como aun la tecnología WebGL no es un estándar, el contexto lo obtendremos con el parámetro "experimental-webgl", cuando los estándares se cierren se convertirá en "webgl".
Por último comentar sobre esta función que después de obtener el contexto creamos en la variable gl dos atributos nuevos con el nombre ancho y alto, que contendrán las dimensiones del lienzo donde dibujaremos, algo que nos será útil en siguientes pasos.
La siguiente y última función es dibujarEscena():
En esta función vemos dos nuevas funciones del contexto WebGL, la primera gl.viewport() que define el lugar y dimensiones del canvas donde dibujaremos, y gl.clear(), se encarga de limpiar el canvas y definir en él el color utilizado en la función gl.clearColor(), en nuestro caso el color negro, y así ya tenemos nuestro canvas listo para dibujar alguna forma o figura en él, pero eso será en próximas lecciones de nuestra guía WebGL.
Y con esto, hemos finalizado la lección 1 de WebGL, a continuación podéis ver el ejemplo en vivo de lo explicado en esta lección y las funciones del contexto WebGL utilizadas.
Ejemplo en vivo
Funciones WebGL utilizadas en esta lección
Lo primero que necesitamos para empezar con WebGL es iniciar nuestro archivo HTML el cual nos servirá para prácticamente todas las lecciones que hagamos.
<!DOCTYPE html>
<html>
<head>
<title>Guia WebGL</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//Codigo javascript
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
A partir de ahora, todo nuestro código Javascript, que será el lenguaje que utilizaremos para usar la API WebGL, irá situado dentro de la etiqueta <script>, también podríamos colocar el código JS en otro archivo, ya lo dejo a vuestra elección.
Ahora si, empezamos con la función principal, esta se encargará de gestionar el transcurso de nuestra aplicación. La única función del contexto WebGL que vemos es gl.clearColor(), que se encarga de configurar el color con el cual se limpiará el canvas justo antes de dibujar algo en él, esta función recibe cuatro parámetros, los tres primeros son los canales rojo, verde y azul y la cantidad de cada color es un número desde el 0 al 1, y el cuarto es el canal alpha o de transparencia, el valor 1 es totalmente opaco y el 0 es totalmente transparente.
Por lo demás es simple código JS y debería sernos familiar, así que si tenéis alguna pregunta, no dudéis en comentar al final de esta entrada y os responderé encantado.
window.onload = iniciar;
var gl;
function iniciar()
{
var canvas = document.getElementById("canvas");
canvas.width = 765;
canvas.height = 466;
iniciarWebgl(canvas);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
dibujarEscena();
}
Como vemos, en la función iniciar(), obtenemos el canvas mediante su id, configuramos las dimensiones de este accediendo a los atributos width (ancho) y height (alto), y a continuación llamamos a una función llamada iniciarWebgl() pasándole como parámetro el canvas. Dicha función se encargará de obtener el contexto webgl del canvas, y almacenarlo en la variable gloval gl.
function iniciarWebgl(canvas)
{
try{
gl = canvas.getContext("experimental-webgl");
gl.ancho = canvas.width;
gl.alto = canvas.height;
}catch(e){}
if(!gl)
alert("Su navegador no es compatible con WebGL.");
}
Además de lo comentado, añadir que como aun la tecnología WebGL no es un estándar, el contexto lo obtendremos con el parámetro "experimental-webgl", cuando los estándares se cierren se convertirá en "webgl".
Por último comentar sobre esta función que después de obtener el contexto creamos en la variable gl dos atributos nuevos con el nombre ancho y alto, que contendrán las dimensiones del lienzo donde dibujaremos, algo que nos será útil en siguientes pasos.
La siguiente y última función es dibujarEscena():
function dibujarEscena()
{
gl.viewport(0, 0, gl.ancho, gl.alto);
gl.clear(gl.COLOR_BUFFER_BIT);
}
En esta función vemos dos nuevas funciones del contexto WebGL, la primera gl.viewport() que define el lugar y dimensiones del canvas donde dibujaremos, y gl.clear(), se encarga de limpiar el canvas y definir en él el color utilizado en la función gl.clearColor(), en nuestro caso el color negro, y así ya tenemos nuestro canvas listo para dibujar alguna forma o figura en él, pero eso será en próximas lecciones de nuestra guía WebGL.
Y con esto, hemos finalizado la lección 1 de WebGL, a continuación podéis ver el ejemplo en vivo de lo explicado en esta lección y las funciones del contexto WebGL utilizadas.
Ejemplo en vivo
Funciones WebGL utilizadas en esta lección
void clearColor(float red, float green, float blue, float alpha)
void viewport(int x, int y, long width, long height)
void clear(ulong mask)
//mask: Bitwise OR of {COLOR, DEPTH, STENCIL}_BUFFER_BIT
Buen tutorial, pasos a paso estaré pendiente de las siguientes entregas gracias.
ResponderEliminarUn saludo
Uauaua
ResponderEliminarEres la polla con cebolla