两个视口，用于立体 3D，无需三个.js

Question

是否可以轻松地创建场景的立体3D视觉，而无需诉诸三个.js？我想过 2 个画布或两个视口，但我不知道是否可以这样做，所以我开始尝试创建一个新视口，但它只是保持黑色并且只显示第二个。

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth/2, gl.viewportHeight);
    mat4.frustum(-24.0, 24.0, -11.0, 25.0, -100.0, 100.0, pMatrix);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
    if(perspective){
        mat4.perspective(38.5, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
    }
    if(perspectiveTP){
        mat4.perspective(53.13, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
    }
    if(orthogonal){
        mat4.ortho(-24.0, 24.0,  -11.0, 25.0, -100.0, 100.0, pMatrix);
    }
    mat4.identity(mvMatrix);
    if(perspectiveTP){
        mat4.lookAt([camX+frogH,camY,camZ+frogV],[frogH,1,frogV],[0,1,0], mvMatrix);
    }
    if(perspective){
        mat4.lookAt([-12,50,17],[-12,0,17],[0,0,1], mvMatrix);
    }
    if(orthogonal){
        mat4.lookAt([-12,52.5,10],[-12,0,10],[0,0,1], mvMatrix);
    }
    mat4.identity(pMatrix);
    gl.viewport(gl.viewportWidth/2, 0, gl.viewportWidth/2, gl.viewportHeight);
    mat4.frustum(-24.0, 24.0, -11.0, 25.0, -100.0, 100.0, pMatrix);
    if(perspective){
        mat4.perspective(38.5, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
    }
    if(perspectiveTP){
        mat4.perspective(53.13, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
    }
    if(orthogonal){
        mat4.ortho(-24.0, 24.0,  -11.0, 25.0, -100.0, 100.0, pMatrix);
    }
    mat4.identity(mvMatrix);
    if(perspectiveTP){
        mat4.lookAt([camX+frogH,camY,camZ+frogV],[frogH,1,frogV],[0,1,0], mvMatrix);
    }
    if(perspective){
        mat4.lookAt([-12,50,17],[-12,0,17],[0,0,1], mvMatrix);
    }
    if(orthogonal){
        mat4.lookAt([-12,52.5,10],[-12,0,10],[0,0,1], mvMatrix);
    }

(...

编辑：我只是创建了一个drawSceneLeft和一个drawSceneRight，但不确定这是否是实现我想要做的事情的正确方法，仍然欢迎任何帮助！

Answer 1

你的绘图函数在做什么？如果是清除画布，那么你基本上是在画一半，擦除整个画布，然后画另一半。

gl.viewport仅设置顶点数学相关函数。它不会阻止在视口之外绘制内容。具体来说，它告诉WebGL如何从剪辑空间转换回像素，并裁剪顶点计算。例如，如果您要绘制POINTS并将gl_PointSize设置为100这些点可能会从您的视口中消失。中心在视口外的点根本不会被绘制(它被剪裁(，但会绘制一个中心位于视口内边的点。仅裁剪顶点计算，并且点在内部，因此不会裁剪。通过该测试后，仍会渲染基元，在本例中为 100x100 像素POINT其中 ~50 像素位于视口之外。

另一方面。 gl.scissor在光栅化过程中确实会削波。因此，启用剪刀测试gl.enable(gl.SCISSOR_TEST)并设置剪刀gl.scissor(x, y, width, height)，现在上面的相同POINT将被剪掉。 gl.clear也将被剪辑。

道明;LR 您需要设置gl.viewport并启用和设置剪刀以渲染多个视口。