Conceptos básicos de WebGL: Parte I

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

WebGL es un renderizador 3D en el navegador basado en OpenGL, que te permite mostrar tu contenido 3D directamente en una página HTML5. En este tutorial cubriré todos los elementos esenciales que necesitas para comenzar a usar este framework.

Introducción

Hay un par de cosas que debes saber antes de comenzar. WebGL es una API de JavaScript que representa contenido 3D en un lienzo HTML5. Para ello, utiliza dos scripts que se conocen en el "mundo 3D" como Shaders. Los dos shaders son:

El shader de vértices
El shader de fragmentos

Ahora no te pongas demasiado nervioso cuando escuches estos nombres; es solo una forma elegante de decir "calculadora de posición" y "selector de color" respectivamente. El shader de fragmentos es el más fácil de entender; simplemente le dice a WebGL de qué color debe ser un punto dado en tu modelo. El shader de vértices es un poco más técnico, pero básicamente convierte los puntos de tus modelos 3D en coordenadas 2D. Debido a que todos los monitores de computadora son superficies planas en 2D, y cuando ves objetos 3D en tu pantalla, son simplemente una ilusión de perspectiva.

Si quieres saber exactamente cómo funciona este cálculo, deberás preguntarle a un matemático, ya que utiliza multiplicaciones avanzadas de matriz 4 x 4, que están un poco más allá del tutorial 'Conceptos básicos'. Afortunadamente, no tienes que saber cómo funciona porque WebGL se encargará de la mayor parte. Así que comencemos.

Paso 1: Configuración de WebGL

WebGL tiene una gran cantidad de configuraciones pequeñas que debes configurar casi cada vez que dibujas algo en la pantalla. Para ahorrar tiempo y hacer que tu código sea ordenado, voy a hacer un objeto JavaScript que contendrá todas las cosas 'detrás de escena' en un archivo separado. Para comenzar, crea un nuevo archivo llamado 'WebGL.js' y coloca el siguiente código dentro de él:

function WebGL(CID, FSID, VSID){
	var canvas = document.getElementById(CID);
	if(!canvas.getContext("webgl") && !canvas.getContext("experimental-webgl"))
		alert("Your Browser Doesn't Support WebGL");
	else
	{
		this.GL = (canvas.getContext("webgl")) ? canvas.getContext("webgl") : canvas.getContext("experimental-webgl");	
		
		this.GL.clearColor(1.0, 1.0, 1.0, 1.0); // this is the color 
		this.GL.enable(this.GL.DEPTH_TEST); //Enable Depth Testing
		this.GL.depthFunc(this.GL.LEQUAL); //Set Perspective View
		this.AspectRatio = canvas.width / canvas.height;
		
		//Load Shaders Here
	}
}

Esta función constructora toma los IDs del lienzo y los dos objetos shader. Primero, obtenemos el elemento de lienzo y nos aseguramos de que sea compatible con WebGL. Si lo hace, entonces le asignamos el contexto WebGL a una variable local llamada "GL". El color claro es simplemente el color de fondo, y vale la pena señalar que en WebGL la mayoría de los parámetros van de 0.0 a 1.0, por lo que tendrías que dividir tus valores rgb por 255. Entonces, en nuestro ejemplo, 1.0, 1.0, 1.0, 1.0 significa un fondo blanco con 100% de visibilidad (sin transparencia). Las siguientes dos líneas le dicen a WebGL que calcule la profundidad y la perspectiva para que un objeto más cercano a ti bloquee los objetos detrás de él. Finalmente, configuramos la relación de aspecto que se calcula dividiendo el ancho del lienzo por su altura.

Antes de continuar y cargar los dos shaders, vamos a escribirlos. Escribiré estos en el archivo HTML donde pondremos el elemento de lienzo real. Crea un archivo HTML y coloca los dos elementos de script siguientes justo antes de la etiqueta del cuerpo de cierre:

<script id="VertexShader" type="x-shader/x-vertex">
  
	attribute highp vec3 VertexPosition;
	attribute highp vec2 TextureCoord;
	
	
	uniform highp mat4 TransformationMatrix;
	uniform highp mat4 PerspectiveMatrix;
	
	varying highp vec2 vTextureCoord;
	
	void main(void) {
		gl_Position = PerspectiveMatrix * TransformationMatrix * vec4(VertexPosition, 1.0);
		vTextureCoord = TextureCoord;
	}
</script>

<script id="FragmentShader" type="x-shader/x-fragment"> 
	varying highp vec2 vTextureCoord;
	
	uniform sampler2D uSampler;
	
	void main(void) {
		highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
		gl_FragColor = texelColor;
	}     
</script>

El shader de vértices se crea primero, y definimos dos atributos:

la posición del vértice, que es la ubicación en las coordenadas x, y y z del vértice actual (Punto en el modelo)
la coordenada de textura; la ubicación en la imagen de textura que se le debe asignar a este punto

Después, creamos variables para las matrices de transformación y perspectiva. Estos se utilizan para convertir el modelo 3D en una imagen 2D. La siguiente línea crea una variable compartida con el shader de fragmentos, y en la función principal calculamos el gl_Position (la posición final 2D). Luego, le asignamos la 'coordenada de textura actual' a la variable compartida.

En el shader de fragmentos simplemente tomamos las coordenadas que definimos en el shader de vértices y 'muestreamos' la textura en esa coordenada. Básicamente, solo obtenemos el color en la textura que corresponde al punto actual de nuestra geometría.

Ya que escribimos los shaders, podemos volver a cargarlos en nuestro archivo JS. Así que reemplaza el "//Load Shaders Here" con el siguiente código:

var FShader = document.getElementById(FSID);
var VShader = document.getElementById(VSID);

if(!FShader || !VShader)
	alert("Error, Could Not Find Shaders");
else
{
	//Load and Compile Fragment Shader
	var Code = LoadShader(FShader);
	FShader = this.GL.createShader(this.GL.FRAGMENT_SHADER);
	this.GL.shaderSource(FShader, Code);
	this.GL.compileShader(FShader);
	
	//Load and Compile Vertex Shader
	Code = LoadShader(VShader);
	VShader = this.GL.createShader(this.GL.VERTEX_SHADER);
	this.GL.shaderSource(VShader, Code);
	this.GL.compileShader(VShader);
	
	//Create The Shader Program
	this.ShaderProgram = this.GL.createProgram();
	this.GL.attachShader(this.ShaderProgram, FShader);
	this.GL.attachShader(this.ShaderProgram, VShader);
	this.GL.linkProgram(this.ShaderProgram);
	this.GL.useProgram(this.ShaderProgram);
	
	//Link Vertex Position Attribute from Shader
	this.VertexPosition = this.GL.getAttribLocation(this.ShaderProgram, "VertexPosition");
	this.GL.enableVertexAttribArray(this.VertexPosition);
	
	//Link Texture Coordinate Attribute from Shader
	this.VertexTexture = this.GL.getAttribLocation(this.ShaderProgram, "TextureCoord");
	this.GL.enableVertexAttribArray(this.VertexTexture);
}

Tus texturas tienen que estar en tamaños de bytes uniformes u obtendrás un error... como 2x2, 4x4, 16x16, 32x32...

Primero nos aseguramos de que los shaders existan, y luego pasamos a cargarlos uno a la vez. El proceso básicamente obtiene el código fuente del shader, lo compila y lo adjunta al programa del shader central. Hay una función, llamada LoadShader, que obtiene el código del shader del archivo HTML; llegaremos a eso en un segundo. Usamos el 'programa shader' para vincular los dos shaders, y nos da acceso a sus variables. Almacenamos los dos atributos que definimos en los shaders; para que podamos ingresar nuestra geometría en ellos más tarde.

Ahora veamos la función LoadShader, debes poner esto fuera de la función WebGL:

function LoadShader(Script){
	var Code = "";
	var CurrentChild = Script.firstChild;
	while(CurrentChild)
	{
		if(CurrentChild.nodeType == CurrentChild.TEXT_NODE)
			Code += CurrentChild.textContent;
		CurrentChild = CurrentChild.nextSibling;
	}
	return Code;
}

Básicamente, simplemente recorre el shader y recopila el código fuente.

Paso 2: El cubo "simple"

Para dibujar objetos en WebGL vas a necesitar las siguientes tres matrices:

vértices; los puntos que componen los objetos
triángulos; le indica a WebGL cómo conectar los vértices a las superficies
coordenadas de textura; define cómo se asignan los vértices en la imagen de textura

Esto se conoce como mapeo UV. Para nuestro ejemplo, crearemos un cubo básico. Dividiré el cubo en 4 vértices por lado que se conectan en dos triángulos. Hagamos una variable que contenga las matrices de un cubo.

1	var Cube = {
2	Vertices : [ // X, Y, Z Coordinates
3
4	//Front
5
6	1.0, 1.0, -1.0,
7	1.0, -1.0, -1.0,
8	-1.0, 1.0, -1.0,
9	-1.0, -1.0, -1.0,
10
11	//Back
12
13	1.0, 1.0, 1.0,
14	1.0, -1.0, 1.0,
15	-1.0, 1.0, 1.0,
16	-1.0, -1.0, 1.0,
17
18	//Right
19
20	1.0, 1.0, 1.0,
21	1.0, -1.0, 1.0,
22	1.0, 1.0, -1.0,
23	1.0, -1.0, -1.0,
24
25	//Left
26
27	-1.0, 1.0, 1.0,
28	-1.0, -1.0, 1.0,
29	-1.0, 1.0, -1.0,
30	-1.0, -1.0, -1.0,
31
32	//Top
33
34	1.0, 1.0, 1.0,
35	-1.0, -1.0, 1.0,
36	1.0, -1.0, -1.0,
37	-1.0, -1.0, -1.0,
38
39	//Bottom
40
41	1.0, -1.0, 1.0,
42	-1.0, -1.0, 1.0,
43	1.0, -1.0, -1.0,
44	-1.0, -1.0, -1.0
45
46	],
47	Triangles : [ // Also in groups of threes to define the three points of each triangle
48	//The numbers here are the index numbers in the vertex array
49
50	//Front
51
52	0, 1, 2,
53	1, 2, 3,
54
55	//Back
56
57	4, 5, 6,
58	5, 6, 7,
59
60	//Right
61
62	8, 9, 10,
63	9, 10, 11,
64
65	//Left
66
67	12, 13, 14,
68	13, 14, 15,
69
70	//Top
71
72	16, 17, 18,
73	17, 18, 19,
74
75	//Bottom
76
77	20, 21, 22,
78	21, 22, 23
79
80	],
81	Texture : [ //This array is in groups of two, the x and y coordinates (a.k.a U,V) in the texture
82	//The numbers go from 0.0 to 1.0, One pair for each vertex
83
84	//Front
85
86	1.0, 1.0,
87	1.0, 0.0,
88	0.0, 1.0,
89	0.0, 0.0,
90
91
92	//Back
93
94	0.0, 1.0,
95	0.0, 0.0,
96	1.0, 1.0,
97	1.0, 0.0,
98
99	//Right
100
101	1.0, 1.0,
102	1.0, 0.0,
103	0.0, 1.0,
104	0.0, 0.0,
105
106	//Left
107
108	0.0, 1.0,
109	0.0, 0.0,
110	1.0, 1.0,
111	1.0, 0.0,
112
113	//Top
114
115	1.0, 0.0,
116	1.0, 1.0,
117	0.0, 0.0,
118	0.0, 1.0,
119
120	//Bottom
121
122	0.0, 0.0,
123	0.0, 1.0,
124	1.0, 0.0,
125	1.0, 1.0
126	]
127	};

Puede parecer una gran cantidad de datos para un cubo simple, sin embargo, en la segunda parte de este tutorial, haré un script que importará tus modelos 3D para que no tengas que preocuparte por calcularlos.

También te estarás preguntando por qué hice 24 puntos (4 para cada lado), cuando en realidad solo hay ocho puntos únicos en total en un cubo. Hice esto porque solo se puede asignar una coordenada de textura por vértice; así que si solo pusimos los 8 puntos, entonces todo el cubo tendría que verse igual porque envolvería la textura alrededor de todos los lados que toca el vértice. Pero de esta manera, cada lado tiene sus propios puntos para que podamos poner una parte diferente de la textura en cada lado.

Ahora tenemos esta variable de cubo y estamos listos para comenzar a dibujarlo. Volvamos al método WebGL y agreguemos una función Draw.

Paso 3: La función Dibujar

El procedimiento para dibujar objetos en WebGL tiene muchos pasos; por lo tanto, es una buena idea hacer una función para simplificar el proceso. La idea básica es cargar las tres matrices en búferes WebGL. Luego, conectamos estos búferes a los atributos que definimos en los shaders junto con las matrices de transformación y perspectiva. Luego, tenemos que cargar la textura en la memoria, y, por último, podemos llamar al comando draw. Así que comencemos.

El siguiente código va dentro de la función WebGL:

this.Draw = function(Object, Texture)
{
    var VertexBuffer = this.GL.createBuffer(); //Create a New Buffer

    //Bind it as The Current Buffer
    this.GL.bindBuffer(this.GL.ARRAY_BUFFER, VertexBuffer);

    // Fill it With the Data
    this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Vertices), this.GL.STATIC_DRAW);

    //Connect Buffer To Shader's attribute
    this.GL.vertexAttribPointer(this.VertexPosition, 3, this.GL.FLOAT, false, 0, 0);

    //Repeat For The next Two
    var TextureBuffer = this.GL.createBuffer();
    this.GL.bindBuffer(this.GL.ARRAY_BUFFER, TextureBuffer);
    this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Texture), this.GL.STATIC_DRAW);
    this.GL.vertexAttribPointer(this.VertexTexture, 2, this.GL.FLOAT, false, 0, 0);

    var TriangleBuffer = this.GL.createBuffer();
    this.GL.bindBuffer(this.GL.ELEMENT_ARRAY_BUFFER, TriangleBuffer);
    //Generate The Perspective Matrix
    var PerspectiveMatrix = MakePerspective(45, this.AspectRatio, 1, 10000.0);

    var TransformMatrix = MakeTransform(Object);

    //Set slot 0 as the active Texture
    this.GL.activeTexture(this.GL.TEXTURE0);

    //Load in the Texture To Memory
    this.GL.bindTexture(this.GL.TEXTURE_2D, Texture);

    //Update The Texture Sampler in the fragment shader to use slot 0
    this.GL.uniform1i(this.GL.getUniformLocation(this.ShaderProgram, "uSampler"), 0);

    //Set The Perspective and Transformation Matrices
    var pmatrix = this.GL.getUniformLocation(this.ShaderProgram, "PerspectiveMatrix");
    this.GL.uniformMatrix4fv(pmatrix, false, new Float32Array(PerspectiveMatrix));

    var tmatrix = this.GL.getUniformLocation(this.ShaderProgram, "TransformationMatrix");
    this.GL.uniformMatrix4fv(tmatrix, false, new Float32Array(TransformMatrix));

    //Draw The Triangles
    this.GL.drawElements(this.GL.TRIANGLES, Object.Trinagles.length, this.GL.UNSIGNED_SHORT, 0);
};

El shader de vértices posiciona, gira y escala el objeto en función de las matrices de transformación y perspectiva. Profundizaremos más en las transformaciones en la segunda parte de esta serie.

Añadí dos funciones: MakePerspective() y MakeTransform(). Estos solo generan las matrices 4x4 necesarias para WebGL. La función MakePerspective() acepta el campo de visión vertical, la relación de aspecto y los puntos más cercanos y lejanos como argumentos. Todo lo que esté más cerca de 1 unidad y más lejos de 10000 unidades no se mostrará, pero puedes editar estos valores para obtener el efecto que estás buscando. Ahora revisemos estas dos funciones:

function MakePerspective(FOV, AspectRatio, Closest, Farest){
	var YLimit = Closest * Math.tan(FOV * Math.PI / 360);
	var A = -( Farest + Closest ) / ( Farest - Closest );
	var B = -2 * Farest * Closest / ( Farest - Closest );
	var C = (2 * Closest) / ( (YLimit * AspectRatio) * 2 );
	var D =	(2 * Closest) / ( YLimit * 2 );
	return [
		C, 0, 0, 0,
		0, D, 0, 0,
		0, 0, A, -1,
		0, 0, B, 0
	];
}
function MakeTransform(Object){
	return [
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, -6, 1
	];
}

Ambas matrices afectan el aspecto final de tus objetos, pero la matriz de perspectiva edita tu "mundo 3D" como el campo de visión y los objetos visibles, mientras que la matriz de transformación edita los objetos individuales como su escala de rotación y posición. Con esto hecho estamos casi listos para dibujar, todo lo que queda es una función para convertir una imagen en una textura WebGL.

Paso 4: Carga de texturas

La carga de una textura es un proceso de dos pasos. Primero tenemos que cargar una imagen como lo harías en una aplicación JavaScript estándar, y luego tenemos que convertirla a una textura WebGL. Así que comencemos con la segunda parte ya que ya estamos en el archivo JS. Agrega lo siguiente en la parte inferior de la función WebGL justo después del comando Draw:

this.LoadTexture = function(Img){
	//Create a new Texture and Assign it as the active one
	var TempTex = this.GL.createTexture();
	this.GL.bindTexture(this.GL.TEXTURE_2D, TempTex);  
	
	//Flip Positive Y (Optional)
	this.GL.pixelStorei(this.GL.UNPACK_FLIP_Y_WEBGL, true);
	
	//Load in The Image
	this.GL.texImage2D(this.GL.TEXTURE_2D, 0, this.GL.RGBA, this.GL.RGBA, this.GL.UNSIGNED_BYTE, Img);  
	
	//Setup Scaling properties
	this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MAG_FILTER, this.GL.LINEAR);  
	this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MIN_FILTER, this.GL.LINEAR_MIPMAP_NEAREST);  
	this.GL.generateMipmap(this.GL.TEXTURE_2D); 
	
	//Unbind the texture and return it.
	this.GL.bindTexture(this.GL.TEXTURE_2D, null);
	return TempTex;
};

Vale la pena señalar que tus texturas tienen que estar en tamaños de bytes uniformes, o recibirás un error; por lo que tienen que ser dimensiones, como 2x2, 4x4, 16x16, 32x32, así sucesivamente. Agregué la línea para voltear las coordenadas Y simplemente porque las coordenadas Y de mi aplicación 3D estaban al revés, pero dependerá de lo que estés usando. Esto se debe a que algunos programas hacen que 0 en el eje Y sea la esquina superior izquierda y algunas aplicaciones la convierten en la esquina inferior izquierda. Las propiedades de escala que configuré solo le dicen a WebGL cómo debe escalar la imagen y reducir la escala. Puedes jugar con diferentes opciones para obtener diferentes efectos, pero pensé que funcionaban mejor.

Ya que terminamos con el archivo JS, volvamos al archivo HTML e implementemos todo esto.

Paso 5: Conclusión

Como mencioné anteriormente, WebGL se representa en un elemento de lienzo. Eso es todo lo que necesitamos en la sección del cuerpo. Después de agregar el elemento de lienzo, tu página html debería verse así:

<html>
	<head>
		<!-- Include Our WebGL JS file -->
		<script src="WebGL.js" type="text/javascript"></script>
		<script>
			
		</script>
	</head>
	<body onload="Ready()">  
	  <canvas id="GLCanvas" width="720" height="480">
	    	Your Browser Doesn't Support HTML5's Canvas.  
	  </canvas>
	  
	<!-- Your Vertex Shader -->
	
	<!-- Your Fragment Shader -->
	
	</body>
</html>

Es una página bastante simple. En el área del encabezado vinculé a nuestro archivo JS. Ahora implementaremos nuestra función Ready, que se llama cuando se carga la página:

//This will hold our WebGL variable
var GL; 
	
//Our finished texture
var Texture;
	
//This will hold the textures image 
var TextureImage;
	
function Ready(){
	GL = new WebGL("GLCanvas", "FragmentShader", "VertexShader");
	TextureImage = new Image();
	TextureImage.onload = function(){
		Texture = GL.LoadTexture(TextureImage);
		GL.Draw(Cube, Texture);
	};
	TextureImage.src = "Texture.png";
}

Así que creamos un nuevo objeto WebGL y pasamos los ID para el lienzo y los shaders. Luego, cargamos la imagen de textura. Una vez cargado, llamamos al método Draw() con el Cubo y la Textura. Si lo seguiste, tu pantalla debe tener un cubo estático con una textura.

Ahora, a pesar de que dije que cubriremos las transformaciones la próxima vez, no puedo dejarlos con un cuadrado estático; no es lo suficientemente 3D. Regresemos y agreguemos una pequeña rotación. En el archivo HTML, cambia la función onload para que se vea así:

1	TextureImage.onload = function(){
2	Texture = GL.LoadTexture(TextureImage);
3	setInterval(Update, 33);
4	};

Esto llamará a una función llamada Update() cada 33 milisegundos lo que nos dará una velocidad de fotogramas de unos 30 fps. Esta es la función de actualización:

1	function Update(){
2	GL.GL.clear(16384 \| 256);
3	GL.Draw(GL.Cube, Texture);
4	}

Esta es una función bastante simple; limpia la pantalla y luego dibuja el Cubo actualizado. Ahora, vayamos al archivo JS para agregar el código de rotación.

Paso 6: Agregar un poco de giro

No implementaré completamente las transformaciones, porque estoy guardando eso para la próxima, pero agreguemos una rotación alrededor del eje Y. Lo primero que debes hacer es agregar una variable de Rotación a nuestro objeto Cubo. Esto hará un seguimiento del ángulo actual y nos permitirá seguir incrementando la rotación. Por lo tanto, la parte superior de la variable Cubo debería verse así:

1	var Cube = {
2	Rotation : 0,
3	//The Other Three Arrays
4	};

Ahora actualicemos la función MakeTransform() para incorporar la rotación:

function MakeTransform(Object){
	var y = Object.Rotation * (Math.PI / 180.0);
	var A = Math.cos(y);
	var B = -1 * Math.sin(y);
	var C = Math.sin(y);
	var D = Math.cos(y);
	Object.Rotation += .3;	
	return [
		A, 0, B, 0,
		0, 1, 0, 0,
		C, 0, D, 0,
		0, 0, -6, 1
	];
}

Conclusión

¡Y eso es todo! En el próximo tutorial, hablaremos sobre la carga de modelos y la realización de transformaciones. Espero que te haya gustado este tutorial; siéntete libre de dejar cualquier pregunta o comentario que puedas tener, a continuación.