WebGL рендеринг с камерой

Question

Я только начинаю работу с WebGL, и у меня возникла проблема, как только я начал внедрять объект Camera в изображение.

У меня есть Fiddle моего основного примера, в котором у меня есть куб с центром в (0, 0, 0) с вытянутыми левыми, правыми и задними стенками. (Я использовал Angular, чтобы помочь уменьшить количество кода, который мне пришлось переписать на скрипку.) У меня есть код Matrix, Vector, Camera и Quaternion.) Есть элементы управления, которые перемещают камеру, и те, которые сдвигают угол камеры. Моя проблема в том, что из позиции по умолчанию (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 и отобразить оставшуюся часть фигуры.

Любая помощь очень ценится,

Спасибо,

Alex

Answer 1

WebGL не обеспечивает проецирование 3D. Вы должны обеспечить это, поставляя шейдеры (небольшие программы) с помощью математики, которую вы хотите использовать для выполнения проекции.

Это большая тема. Выезд http://games.greggman.com/game/webgl-3d-perspective/ или http://learningwebgl.com