WebGL将颜色更改为三角形

Question

我陷入了WebGl的这一部分。抱歉，这个问题很抱歉，但是我在这个主题上非常努力，我昨天在页面上启动了一个教程。我构建了一个三角形，在尝试与他互动后，用html菜单更改颜色。

所有人似乎都在起作用，但是我用此代码定义了我的颜色：

var colors = {
    'red': new vec4(1, 0, 0, 1),
    'blue': new vec4(0, 0, 1, 1),
    'green': new vec4(0, 1, 0, 1),
    'yellow': new vec4(1, 1, 0, 1),
    'cyan': new vec4(0, 1, 1, 1),
    'magenta': new vec4(1, 0, 1, 1)
  };

，在缓冲区中，我做了这一点：

gl.clear(gl.COLOR_BUFFER_BIT);

  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);
    // The colour array is copied into another
    var color_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(objectColor), gl.STATIC_DRAW);
    //Here we prepare the "vColor" shader attribute entry point to
    //receive RGB float colours from the colour buffer
    var vColor = gl.getAttribLocation(program, "vColor");
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.vertexAttribPointer(vColor, 1, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

问题在这里，我看到 vertexattribpointer for Vec4需要2，而不是1，但对我来说， gldrawarrays：尝试在属性1

顺便说一句，如果我使用1个程序，则在三角形中只更改一个顶点，在这种情况下，带有红色VEC4（1、0、0、0、1）的三角形将在第一点红色，而其他顶点将是黑色，所以我认为最后一个将被忽略。

以这种方式定义objectcolor。

var objectColor = colors['red'];

我的vec4将来自

  <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        attribute vec4 vColor;
        varying vec4 varColor;

        void main()
        {
            gl_Position = vPosition;
            varColor = vColor;
        }
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">

        precision mediump float;
        varying vec4 varColor;
        void main()
        {
            gl_FragColor = varColor;
        }

我如何解决这个问题？我在哪里错了？

我试图从JavaScript遵循这种传递颜色到碎片着色器但是我不明白如何检查详细信息。

Answer 1

颜色缓冲区必须每个顶点坐标包含1个颜色。如果要绘制单个颜色的三角形，则颜色缓冲区必须包含相同的颜色3次。

每种颜色具有4个组件（RGBA），因此缓冲区必须具有12个元素：

，例如

color = [1, 0, 0, 1];
colorAttributes = [];
for(let i = 0; i < 3; ++i)
    colorAttributes.push(...color);
var color_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorAttributes), gl.STATIC_DRAW);

gl.vertexAttribPointer的第二个参数（元组大小）必须为4，因为颜色属性具有4个组件，4个颜色通道（RGBA）：

gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);