>

Demostración básica de texturizado. Se ha utilizado la técnica recurrente de pintar un quad que ocupe toda la pantalla. Se ha programado el fragment shader para que en cada pixel mapee una coordenada de textura (ver uSampler). Como se puede apreciar, en parte de la pantalla se ha pintado directamente la textura, pero en la otra se ha hecho una pequeña operación de diferencias entre píxeles adyacentes: el color gris (0.5,0.5,0.5) denota no diferencias.

La estructura general de la demo gráfica es la siguiente:

- En la parte de inicialización (JavaScript):

  1. 1. Inicializaciones generales de WebGL.

  2. 2. Definición de la geometría (screen quad).

  3. 3. Carga de shaders y carga de texturas.

  4. 4. En el evento de finalización de carga de texturas se inicia el bucle de pintado.

- En el bucle de pintado (JavaScript):

  1. 1. Transferencia de los parámetros a los shaders para el frame a pintar.

  2. 2. Renderización de la geometría.

- En la parte shaders-SLGL:

  1. 1. Definición del fragment shader.

  2. 2. Definición del vertex shader (aquí no hace nada).

En esta demostración parte de la tarea que se ejecutaría normalmente en el bucle de pintado se ha trasladado a la zona de inicialización JavaScript; por ejemplo, la asignación de las diferentes geometrías a pintar y los diferentes shaders a ejecutar. Esto se puede hacer debido a la sencillez del ejemplo: se puede fijar en la inicialización porque no cambiará en toda la ejecución.

Por partes:

1. Inicialización general del sistema WebGL.

            canvas        = document.getElementById('glscreen');
            gl            = canvas.getContext('experimental-webgl');
            canvas.width  = 640;
            canvas.height = 480;
 
            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
 

2. Definición de la geometría.

            // Dibujado del cuadrado a pantalla completa
            buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(
                gl.ARRAY_BUFFER, 
                new Float32Array([
                  -1.0, -1.0, 
                   1.0, -1.0, 
                  -1.0,  1.0, 
                  -1.0,  1.0, 
                   1.0, -1.0, 
                   1.0,  1.0]), 
                gl.STATIC_DRAW
            );

3. Carga de los shaders y texturas.

            shaderScript = document.getElementById("2d-vertex-shader");
            shaderSource = shaderScript.text;
            vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, shaderSource);
            gl.compileShader(vertexShader);
 
            shaderScript   = document.getElementById("2d-fragment-shader");
            shaderSource   = shaderScript.text;
            fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, shaderSource);
            gl.compileShader(fragmentShader);
 
            program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);  
            gl.useProgram(program);
 
 

La carga de las texturas se hace en una función aparte.

            initLoadTextures( gl );

Más detalles próximamente

Inicio