使用相机进行 WebGL 渲染答案

【问题标题】：WebGL Rendering With Camera使用相机进行 WebGL 渲染
【发布时间】：2014-02-07 02:24:17
【问题描述】：

我刚刚开始使用 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 正确计算它们的位置并渲染形状的其余部分。

非常感谢任何帮助，

谢谢，

亚历克斯

【问题讨论】：

标签： angularjs webgl

【解决方案1】：

WebGL 不提供投影 3D。您必须通过为着色器（小程序）提供您希望它用来进行投影的数学来提供这一点。

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

【讨论】：