Question

我刚刚开始使用WebGL，一旦我开始将Camera对象合并到图片中，我就遇到了问题。

我有一个Fiddle我的基本示例，其中我有一个以（0,0,0）为中心的立方体，绘制了左，右和后墙。（我使用Angular来帮助减少我必须重写到小提琴的代码量。）我有我的矩阵，矢量，相机和四元数代码。）有控制器移动相机，以及那些移动相机相机角度。我的问题是，从默认位置（0,0,0），当我向左或向右移动1个单位（+ - 1.0,0,0）时，它会分别完全停止渲染左或右墙。

设置WebGL缓冲区的代码如下：

function setupBuffer () {
    var roomVerticeColors = [
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,
        0.0, 0.0, 1.0,

        1.0, 0.0, 0.0,
        1.0, 0.0, 0.0,
        1.0, 0.0, 0.0,
        1.0, 0.0, 0.0
    ];



    roomColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, roomColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(roomVerticeColors), gl.STATIC_DRAW);

    var roomVertices = [
        // Left Wall
        -1.0, -1.0, 1.0,
        -1.0, 1.0, 1.0,
        -1.0, -1.0, -1.0,
        -1.0, 1.0, -1.0,

        // Right Wall
        1.0, -1.0, 1.0,
        1.0, 1.0, 1.0,
        1.0, -1.0, -1.0,
        1.0, 1.0, -1.0

    ];

    roomVerticeBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, roomVerticeBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(roomVertices), gl.STATIC_DRAW);

    var roomVertexIndices = [
        // Left
        0, 1, 2,
        1, 2, 3,

        // Right
        4, 5, 6,
        5, 6, 7,
        // Back
        2, 3, 6,
        6, 7, 3,


    ];
    roomVerticesIndexBuffer = gl.createBuffer();
    roomVerticesIndexBuffer.numberVertexPoints = roomVertexIndices.length;
    console.log(roomVerticesIndexBuffer.numberVertexPoints);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, roomVerticesIndexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(roomVertexIndices), gl.STATIC_DRAW);


}
function getMatrixUniforms () {
    glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, 'uPMatrix');
    glProgram.vMatrixUniform = gl.getUniformLocation(glProgram, 'uVMatrix');
    glProgram.mMatrixUniform = gl.getUniformLocation(glProgram, 'uMMatrix');
}
function setMatrixUniforms () {
    gl.uniformMatrix4fv(glProgram.pMatrixUniform, false, pMatrix.elements);
    gl.uniformMatrix4fv(glProgram.vMatrixUniform, false, vMatrix.elements);
    gl.uniformMatrix4fv(glProgram.mMatrixUniform, false, mMatrix.elements);
}

function setupWebGL () {
    gl.clearColor(0.4, 0.4, 0.4, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.DEPTH_TEST);
    gl.viewport(0, 0, $scope.canvas.width, $scope.canvas.height);


    $scope.camera.updateMatrixWorld(true);
    $scope.camera.matrixWorldInverse.getInverse($scope.camera.matrixWorld);
    pMatrix = $scope.camera.projectionMatrix;
    vMatrix = $scope.camera.matrixWorldInverse;
    mMatrix = $scope.world.matrixWorld;

}

我已经将立方体的顶点硬编码到控制器中，然后将其留给WebGL将其转换为适当的位置。我怀疑这是错误，但我希望有一种方法可以通过WebGL正确计算它们的位置并渲染其余的形状。

非常感谢任何帮助，

谢谢，

亚历

Answer 1

WebGL不提供投影3D。你必须通过为着色器（小程序）提供你想用它来进行投影的数学来提供它。

这是一个很大的话题。查看http://games.greggman.com/game/webgl-3d-perspective/或http://learningwebgl.com

WebGL渲染与相机

1 个答案: