Question

我有两个顶点缓冲区，每个缓冲区在每个元素中存储一系列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);

Answer 1

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

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);
}

编辑：

对于绑定多个缓冲区，请参阅＆＃34;学习webGL＆＃34;上的lesson。该教程使用颜色和位置缓冲区，但您可以使用任何您为其命名的目的缓冲区。按照类似的代码，也可以绑定两个以上的缓冲区。

您应该使用多个gl.bindBuffer()和gl.vertexAttribPointer()函数来发送绘图调用。下面的代码不是您的应用程序所需的确切代码，它只是一个示例。

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);

在WebGL中插入两个VBO

1 个答案: