是否有一种方法可以使用转换矩阵确定WEBGL上的两个3D对象的位置？

Question

我有两个使用两个不同js文件制作的3D对象。我希望它们都出现在按比例缩小并平移的同一个画布上，使您可以在同一画布上并排看到它们。我使用了我认为可行的方法，但只显示了其中一种模型。

我尝试过的JS代码如下：

 var canvas;
    var gl;

    var total= 1000;
var total2= 1005;

    var dvertex= []; var dColors = []; var dIndices = [];
    var dvertex2= []; var dColors2 = []; var dIndices2 = [];

    window.onload = function init()
    {
   canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0,1.0,1.0, 1.0 );
    gl.enable(gl.DEPTH_TEST);

    //----------------OBJECT1-------------------

    var programD = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( programD );

    var iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(dIndices), gl.STATIC_DRAW);

    var cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(dColors), gl.STATIC_DRAW );

    var vColor = gl.getAttribLocation( programD, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );

    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(dVertex), gl.STATIC_DRAW );

    var vPosition = gl.getAttribLocation( programD, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    var scaleZMatrix = mat4 ( 0.2,0, 0, 0,
    0, 0.2, 0, 0,
    0, 0, 0.2, 0,
    0, 0, 0, 1);

    var scaleZMatrixLoc = gl.getUniformLocation(programD, "uSZMatrix");
    gl.uniformMatrix4fv(scaleZMatrixLoc, false, flatten(scaleZMatrix));

    var transZMatrix = mat4( 1,0,0,0.99,
                   0,1,0,0,
                   0,0,1,0,
                   0,0,0,1 )

    var transZMatrixLoc = gl.getUniformLocation(programD, "uTZMatrix");
    gl.uniformMatrix4fv(transZMatrixLoc, false, flatten(transZMatrix));

    thetaLoc = gl.getUniformLocation(programD, "theta"); 

    render();

    //------------------object2-----------------------

    var programD2 = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( programD2 );

    var iBuffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer2);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(dIndices2), gl.STATIC_DRAW);

    var cBuffer2 = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer2 );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(dColors2), gl.STATIC_DRAW );

    var vColor2 = gl.getAttribLocation( programD2, "vColor" );
    gl.vertexAttribPointer( vColor2, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor2 );

    var vBuffer2 = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer2 );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(dVertices2), gl.STATIC_DRAW );

    var vPosition2 = gl.getAttribLocation( programD2, "vPosition" );
    gl.vertexAttribPointer( vPosition2, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition2 );

    var transDon = mat4( 1,0,0,-0.99,
                   0,1,0,0,
                   0,0,1,0,
                   0,0,0,1 )

    var transDonLoc = gl.getUniformLocation(programD2, "uTMatrix");
    gl.uniformMatrix4fv(transDonLoc, false, flatten(transDon));

    //thetaLoc = gl.getUniformLocation(programD2, "theta"); 

    document.getElementById( "xButton" ).onclick = function () {
        axis = xAxis;
    };
    document.getElementById( "yButton" ).onclick = function () {
        axis = yAxis;
    };
    document.getElementById( "zButton" ).onclick = function () {
        axis = zAxis;
    };

    render();

};

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    theta[axis] += 1.0;
    gl.uniform3fv(thetaLoc, theta);

    //relates the vertices to the indices, so the verts will be drawn in order
    gl.drawElements( gl.TRIANGLES, total, gl.UNSIGNED_SHORT, 0 );

    gl.drawElements( gl.TRIANGLES, total2, gl.UNSIGNED_SHORT, 0 );

    requestAnimFrame( render );
}

我不知道为什么他们两个不能一起出现。您是否应该沿着这两个方向发送两个不同的统一位置或其他内容？

Answer 1

问题是您连续两次调用gl.drawElements，但没有在两次绘画调用之间更改状态以设置您要绘画的对象。

也许您的问题应作为重复项关闭，但基本上参见this answer，this one和this one