Question

现在我有三个独立的顶点缓冲区： 1. XYZ缓冲区 2. NX，NY，NZ-buffer 3.紫外线缓冲液

所以总共有8个花车。将来还会添加切线和bitangent信息，所以+6浮点数。

以下是我为着色器声明它们的方法：

shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);

shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

在这里，我将它们传递给着色器程序：

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexCoordBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexNormalBuffer);
gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexTextureCoordBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

由于缓冲区是独立的，我可以在着色器中将它们定义为vec3和vec2：

attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;

但是如果我将它们组合到一个缓冲区，每个顶点有8个浮点数呢？因此，项目大小将为8：

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexCoordBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 8, gl.FLOAT, false, 0, 0);

但是我如何在着色器中访问它们？ vec8 ？有最大的vec4！那我该怎么办？

Answer 1

您可以使用stride和offset参数（当前设置为0）创建一个包含每个顶点所有属性的缓冲区，以定义属性的交错。事实上，我听说你应该这样做，以改善每个顶点的内存访问位置。

步幅是每个顶点的总字节数（而不是相同属性的出现之间的间距），而偏移量是特定属性第一次出现的字节索引。因此，要获取示例属性并从单个缓冲区中读取它们：

gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexAttrBuffer);
var step = Float32Array.BYTES_PER_ELEMENT;
var total = 3 + 3 + 2;
var stride = step * total;
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, stride, 0);
gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, stride, step * 3);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, stride, step * 6);

缓冲区将从Float32Array加载，其元素为

[px1, py1, pz1, nx1, ny1, nz1, u1, v1,
 px2, py2, pz2, nx2, ny2, nz2, u2, v2,
 ...]

Answer 2

最大值是vec4，你是对的，也是唯一的webGL方式。您可以尝试将数组作为属性传递：GLSL per vertex fixed size array，但OpenGL ES 2.0不支持它，因此该选项仅在桌面OpenGL中可用。但是我没有看到真正需要这样做，所以无论你做什么，你都可以使用vec4，并且传递数组属性是你可能不应该做的事情。

希望这有帮助。

WebGL：具有超过4维坐标的顶点缓冲区？

2 个答案: