WebGL 绘制多个对象

Question

我正在WebGL上工作，并且我已经制作了一些类以使渲染更容易。问题是，只能呈现第一个类，而所有其他类都不会呈现。我查找了每个数组缓冲区，并在需要时绑定和解绑它们，但它仍然不起作用。这是我针对三角形元素簇的类：function TriangleElementCluster(vertices, uvs, normals, indices, indicesLenght, shader, gl) {  shader.use();  var verticesBuffer = new ArrayBufferFloat(vertices, gl);  var verticesAttribLocation = new VertexAttribPointerFloat(shader.getProgram(), "vertex", 3, 3, 0, gl);  var uvsBuffer = new ArrayBufferFloat(uvs, gl);  var uvsAttribLocation = new VertexAttribPointerFloat(shader.getProgram(), "uv", 2, 2, 0, gl);  var normalsBuffer = new ArrayBufferFloat(normals, gl);  var normalsAttribLocation = new VertexAttribPointerFloat(shader.getProgram(), "normal", 3, 3, 0, gl);  var indicesBuffer = new ElementArrayBuffer16(indices, gl);  verticesBuffer.unbind();  verticesAttribLocation.unbind();  uvsBuffer.unbind();  uvsAttribLocation.unbind();  normalsBuffer.unbind();  normalsAttribLocation.unbind();  indicesBuffer.unbind();  this.setTexture = function(texture) {    this.texture = texture;  }  this.render = function() {    verticesBuffer.bind();    verticesAttribLocation.bind();    uvsBuffer.bind();    uvsAttribLocation.bind();    normalsBuffer.bind();    normalsAttribLocation.bind();    indicesBuffer.bind();    this.texture.activate(gl.TEXTURE0);    gl.drawElements(gl.TRIANGLES, indicesLenght, gl.UNSIGNED_SHORT, 0);    verticesBuffer.unbind();    verticesAttribLocation.unbind();    uvsBuffer.unbind();    uvsAttribLocation.unbind();    normalsBuffer.unbind();    normalsAttribLocation.unbind();    indicesBuffer.unbind();  }}你可能已经注意到，我打印了VertexAttribPointer的ID，我得到：我有两个类，它们都使用相同的指针，这不应该发生，什么会导致这种情况？2 0 1  2 0 1根据我对OpenGL的理解，每个缓冲区等在绘制三角形后都会被停用。导致只绘制第一个类的错误在哪里？

Answer 1

这

function VertexAttribPointerFloat(shaderProgram, shaderVariableName, elementLenght, stepSize, offset, gl) {

    var attribLocation = gl.getAttribLocation(shaderProgram, shaderVariableName);

    gl.vertexAttribPointer(attribLocation, elementLenght, gl.FLOAT, gl.FALSE, stepSize * Float32Array.BYTES_PER_ELEMENT, offset);

    gl.enableVertexAttribArray(attribLocation);

    console.log(attribLocation);

    this.bind = function() {

        gl.enableVertexAttribArray(attribLocation);

    }

    this.unbind = function() {

        gl.disableVertexAttribArray(attribLocation);

    }

}

需要这个

function VertexAttribPointerFloat(shaderProgram, shaderVariableName, elementLenght, stepSize, offset, gl) {

    var attribLocation = gl.getAttribLocation(shaderProgram, shaderVariableName);

    this.bind = function() {

        gl.enableVertexAttribArray(attribLocation);

        gl.vertexAttribPointer(attribLocation, elementLenght, gl.FLOAT, gl.FALSE, stepSize * Float32Array.BYTES_PER_ELEMENT, offset);

    }

    this.unbind = function() {

        gl.disableVertexAttribArray(attribLocation);

    }

}

您的程序使用情况需要移动以进行渲染

function TriangleElementCluster(vertices, uvs, normals, indices, indicesLenght, shader, gl) {

  this.render = function() {

    shader.use();

    ...

  }

}

您实际上不需要任何解绑的BTW

您可以将绑定视为类似于仅设置全局变量。

const state = {

 temp1: 0,

 temp2: 0,

 temp3: 0,

 result: 0,

};

function add() { state.result = state.temp1 + state.temp2; }

function sub() { state.result = state.temp1 - state.temp2; }

function sum() { state.result = state.temp1 + state.temp2 + state.temp3; }

function bind(id, value) { state[id] = value; }

function get(id)         { return state[id]; }

bind('temp1', 1);

bind('temp2', 2);

bind('temp3', 3);

sum();

console.log('sum:', get('result'));

bind('temp1', 4);

bind('temp2', 5);

add();

console.log('add:', get('result'));

请注意，我不会解除任何绑定。我只是绑定下一个函数运行所需的内容。