在WebGL中插入两个VBO

我有两个顶点缓冲区，每个缓冲区在每个元素中存储一系列XYZ坐标。如何将两个缓冲区传递给着色器以在每个缓冲区的坐标之间执行线性插值

例如：

buffer1 = [3, 5, 7, 4, 2, 3 ...etc]
buffer2 = [7, 11, 3, 10, 0, 5 ...etc]

要显示到画布的结果顶点缓冲区应为：

bufferInterp = [5, 8, 5, 7, 1, 4 ...etc]

我可以使用单个顶点缓冲区，如下所示：

vertexPositionBuffer = vertexPositionBuffer1;
vertexIndexBuffer = vertexIndexBuffer;
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer[frameCount]);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer[0].itemSize, gl.FLOAT, false, 0, 0);

var vertexShaderSrc = "attribute vec3 aVertexPosition;\n"
          + "attribute vec2 aTextureCoord;\n"
          + "uniform mat4 uMVMatrix;\n"
          + "uniform mat4 uPMatrix;\n"
          + "varying highp vec2 vTextureCoord;\n"
          + "void main(void) {\n"
          + "gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n"
          + "vTextureCoord = aTextureCoord;\n"
          + "}";

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);

shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

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

请注意，这两个对象都共享相同的索引缓冲区

我的顶点着色器定义如下：

vertexPositionBuffer = vertexPositionBuffer1;
vertexIndexBuffer = vertexIndexBuffer;
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer[frameCount]);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer[0].itemSize, gl.FLOAT, false, 0, 0);

var vertexShaderSrc = "attribute vec3 aVertexPosition;\n"
          + "attribute vec2 aTextureCoord;\n"
          + "uniform mat4 uMVMatrix;\n"
          + "uniform mat4 uPMatrix;\n"
          + "varying highp vec2 vTextureCoord;\n"
          + "void main(void) {\n"
          + "gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n"
          + "vTextureCoord = aTextureCoord;\n"
          + "}";

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);

shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

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

---

绑定两个缓冲区，并执行以下操作：

attribute vec3 a_b1;
attribute vec3 a_b2;

void main() {
    float k = ...;                          // interpolation factor
    vec3 pos = a_b1*(1-k) + a_b2*k;
    gl_Position = uMVPMatrix * vec4(pos, 1.0);
}

编辑：

有关绑定多个缓冲区的信息，请参见“学习webGL”一节。 该教程使用颜色和位置缓冲区，但您可以将任何缓冲区用于命名它们的任何用途。按照类似的代码，也可以绑定两个以上的缓冲区

您应该使用多个

gl.bindBuffer（）

和相应的

gl.vertexattributepointer（）

函数来重新调度绘图调用。下面的代码不是应用程序所需的确切代码，它只是一个示例

gl.bindBuffer(gl.ARRAY_BUFFER, buffer1);
gl.vertexAttribPointer(shaderProgram.buffer1Att, buffer1.itemSize, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, buffer2);
gl.vertexAttribPointer(shaderProgram.buffer2Att, buffer2.itemSize, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, numItems);

---

谢谢你的回答。这就是我想要实现的，但是如何绑定这两个缓冲区呢。从教程代码中很明显，绑定缓冲区数量并在着色器中使用缓冲区的确切途径是什么。希望有帮助。谢谢你提供的额外信息。你帮了大忙！