WebGL：将多色着色器应用于 4 个三角形

Question

这里是 WebGL 的新手。我使用 WebGL 绘制了几个看起来像矩形的三角形。我将颜色声明为一个变量，想知道如何将多色效果应用于不仅仅是最后绘制的两个三角形？理想情况下，我希望右边的图像都具有彩虹效果。

这是关于顶点位置和颜色的代码

var gl;
var vertices_and_colors = new Float32Array(6*3*4);


   window.onload = function init()
{

var canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }


var vertices_and_colors = [
                           vec3(-0.5, -.55, 0.0), //left triangles, 1
                           vec3(-0.5,  0.25, 0.0),
                           vec3(-0.40, -0.55, 0.0),

                           vec3(-0.40, 0.25, 0.0), //left 2
                           vec3(-0.40,  -0.55, 0.0),
                           vec3(-0.5, 0.25, 0.0),
                           vec3(-0.15, 0.25, 0.0),   //l3
                           vec3(-0.5,  0.25, 0.0),
                           vec3(-0.15, 0.15, 0.0),
                           vec3(-0.5, 0.15, 0.0),   //l4
                           vec3(-0.15,  0.15, 0.0),
                           vec3(-0.5, 0.25, 0.0),



                           vec3(0.35, -0.55, 0.0),  //right triangle 1
                           vec3(0.35,  0.15, 0.0),
                           vec3(0.25, -0.55, 0.0),
                           vec3(0.25, 0.15, 0.0),
                           vec3(0.25,  -0.55, 0.0),
                           vec3(0.35, 0.15, 0.0),

                           vec3(0.10, 0.25, 0.0),    //top of 't' (rainbow)
                           vec3(0.5,  0.25, 0.0),
                           vec3(0.10, 0.15, 0.0),
                           vec3(0.5, 0.15, 0.0),
                           vec3(0.10,  0.15, 0.0),
                           vec3(0.5, 0.25, 0.0),

                           vec3(1.0, 0.0, 0.0), // r
                           vec3(0.0, 1.0, 0.0), // g
                           vec3(0.0, 0.0, 1.0), // b
                           vec3(0.0, 1.0, 1.0), // c
                           vec3(1.0, 0.0, 1.0), // m
                           vec3(1.0, 1.0, 0.0), // y


                           ];

gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.8, 0.8, 0.8, 1.0 );

    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
   gl.useProgram( program );

  var bufferId = gl.createBuffer();
   gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );

       gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices_and_colors),    gl.STATIC_DRAW );


gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );

gl.enableVertexAttribArray( vPosition );


var vColor = gl.getAttribLocation( program, "vColor" );
   gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 0, 6*3*4 ); //6
gl.enableVertexAttribArray( vColor );

render();
};

function render() {
    gl.clear( gl.COLOR_BUFFER_BIT );
    // draw the data as an array of points
    gl.drawArrays( gl.TRIANGLES, 0, 24 ); //30
    //gl.drawArrays( gl.TRIANGLE.STRIP, 21, 30);
}

Answer 1

完全不清楚您的代码在做什么。你有 18 个位置，但只有 12 个顶点颜色，而你用 24 个调用 gl.drawArrays？

你需要与位置相同数量的顶点颜色，所以要么都是 18，要么都是 12。然后你需要用正确的数字调用 gl.drawArrays。 18 或 12。

另外，我建议您对顶点颜色和位置使用单独的缓冲区。它只是让事情变得更容易，但由于你将它们组合在一起，你对颜色的偏移是错误的

gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 0, 6*3*4 );

您有 18 个位置，每个位置有 3 个值，每个位置有 4 个字节，所以是 18 * 3 * 4。

如果您为位置和顶点颜色使用单独的缓冲区，那么您就不必进行计算。少一件事出错。

You also might find these articles helpful

WebGL：将多色着色器应用于 4 个三角形

WebGL: applying multi-color shader to 4 triangles

colors

draw

webgl