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

这里是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);
}

---

你的代码到底在做什么还不清楚。你有18个位置，但只有12个顶点颜色，你用24个来调用

gl.drawArray

您需要与位置相同数量的顶点颜色，以便两者都为18或12。然后您需要使用正确的号码调用

gl.drawArrays

。不是18岁就是12岁

另外，我建议您对顶点颜色和位置使用单独的缓冲区。这只会让事情变得更简单，但因为你把它们组合在一起，你的颜色偏移量就错了

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

您有18个位置，每个位置有3个值，每个位置有4个字节，这就是

18*3*4

如果对位置和顶点颜色使用单独的缓冲区，则无需进行计算。少了一件出错的事

---

您可以使用片段着色器来实现这一点，使

gl\u FragColor

成为x和y坐标的函数。不过，您必须为左侧形状编写其他着色器。