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正确计算它们的位置并渲染形状的其余部分。
任何帮助是非常赞赏，
感谢，
亚历