Question

是否可以轻松地创建我的场景的立体3D视觉，而不是诉诸于three.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也会被裁剪。

TD; LR您需要同时设置gl.viewport并启用并设置剪刀以渲染多个视口。

两个视口用于没有three.js的立体3D

1 个答案: