我被困在 WEBGL 的这一部分。 很抱歉这个问题,但我对这个话题很讨厌,我昨天才开始在页面上学习教程。 我构建了一个三 Angular 形,在尝试与他交互后,使用 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 的 give glDrawArrays: attempt to access out of range vertices in attribute 1
顺便说一下,如果我使用 1 程序只改变三 Angular 形中的一个顶点,在这种情况下使用红色 vec4(1, 0, 0, 1) 三 Angular 形的第一个点将是红色的,其他顶点将是黑色,所以我认为最后一个 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 但我不明白如何详细检查。
最佳答案
颜色缓冲区必须包含每个顶点坐标的一种颜色。如果要用单一颜色绘制三 Angular 形,则颜色缓冲区必须包含 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 个颜色 channel (RGBA):
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
关于javascript - WEBGL 改变颜色为三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55278603/