亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

WebGL 繪制多個對象

WebGL 繪制多個對象

九州編程 2022-09-02 21:08:16
我正在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的理解,每個緩沖區等在繪制三角形后都會被停用。導致只繪制第一個類的錯誤在哪里?
查看完整描述

1 回答

?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊


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

請注意,我不會解除任何綁定。我只是綁定下一個函數運行所需的內容。

查看完整回答
反對 回復 2022-09-02
  • 1 回答
  • 0 關注
  • 152 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號