1
我剛剛開始使用WebGL，並在我開始將相機對象合併到圖片中時遇到了問題。WebGL用相機渲染
我有一個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正確計算它們的位置並渲染形狀的其餘部分。
任何幫助是非常讚賞，
感謝，
亞歷