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：尝试访问属性1中超出范围的顶点< / em>

顺便说一句，如果我使用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，因为color属性具有4个分量，即4个颜色通道（RGBA）：

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

WEBGL将颜色更改为三角形

1 个答案: