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

Question

现在我有三个独立的顶点缓冲区:1. XYZ缓冲区2. NX,NY,NZ-缓冲区3.UV缓冲液

所以总共有 8 个 float 。将来还将添加切线和双切线信息，因此 +6 会 float 。

以下是我为着色器声明它们的方式:

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 个 float 的单个缓冲区中会怎样？因此，项目大小将为 8:

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

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

Answer 1

您可以创建一个缓冲区来保存每个顶点的所有属性，使用步幅和偏移参数(当前已设置为 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,
 ...]