WEBGL 改变颜色为三角形

Question

我卡在了 WEBGL 的这一部分。很抱歉这个问题，但我对这个话题很讨厌，我昨天才开始在页面上学习教程。我构建了一个三角形，在我尝试与他互动后，使用 HTML 菜单改变颜色。

一切似乎都可行，但我使用以下代码用 vec4 定义了我的颜色：

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);

问题在这里，我看到 vec4 的 vertexAttribPointer 需要一个 2，而不是 1，但是我有 2 给 glDrawArrays: attempt to access out属性 1

中的范围顶点数

顺便说一下，如果我使用 1 程序只改变三角形中的一个顶点，在这种情况下使用红色 vec4(1, 0, 0, 1) 三角形的第一个点将是红色的，其他顶点将是黑色的，所以我认为最后 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;

        }

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

我正在尝试关注这个 Passing color to fragment shader from 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);

WEBGL 改变颜色为三角形

WEBGL change color to triangle

javascript

colors

webgl