El problema de práctica que tengo que crear es la imagen de arriba y no sé cómo ejecutarlo. Cada vez que lo hago me sale una pantalla blanca. Sé que tiene algo que ver conmigo agregando la variable de colores a un atributo de búfer, pero no puedo resolverlo. Cualquier ayuda será agradecida.
var gl; window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); } // Four Vertices var vertices = [ vec2( -0.5, -0.5 ), vec2( -0.5, 0.5 ), vec2( 0.5, 0.5 ), vec2( 0.5, -0.5) ]; var colors = [ 1.0, 1.0, 1.0, 1.0, // white 1.0, 0.0, 0.0, 1.0, // red 0.0, 1.0, 0.0, 1.0, // green 0.0, 0.0, 1.0, 1.0, // blue ]; // // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 0.0, 0.0, 0.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program ); // Load the data into the GPU var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW ); var colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new flatten(colors), gl.STATIC_DRAW); // Associate out shader variables with our data buffer var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition ); render(); }; function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 ); } gl.bufferData(gl.ARRAY_BUFFER, new flatten(colors), gl.STATIC_DRAW); Usar new aquí parece un error, además no hay nada que aplanar ya que la matriz de colores ya es plana (por cierto, hay una función plana oficial).
Además, aún necesita configurar el atributo de vértice como lo hace con la posición (tenga en cuenta que sus colores tienen más elementos que su posición) y mostrar el color en el sombreador.