When I use my code:
`const gl = WebGL.gl;
const programInfo = WebGL.programInfo;
const fieldOfView = (this.camera.FOV * Math.PI) / 180; // Convert FOV to radians
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; // Aspect ratio
const zNear = 0.1;
const zFar = this.camera.RENDER_DISTANCE;
const projectionMatrix = mat4.perspective(mat4.create(), fieldOfView, aspect, zNear, zFar);
var xRotationMatrix = new Float32Array(16);
var yRotationMatrix = new Float32Array(16);
var zRotationMatrix = new Float32Array(16);
const viewMatrix = mat4.create();
mat4.rotate(xRotationMatrix, viewMatrix, this.camera.rx, [1, 0, 0]);
mat4.rotate(yRotationMatrix, viewMatrix, this.camera.ry, [0, 1, 0]);
mat4.rotate(zRotationMatrix, viewMatrix, this.camera.rz, [0, 0, 1]);
mat4.translate(viewMatrix, viewMatrix, [-this.camera.x, -this.camera.y, -this.camera.z]);
let buffers = {
position: [],
color: [],
};
for (let object of this.objects) {
if (this.camera.visible(object)) {
const modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, [object.position.x, object.position.y, object.position.z]);
mat4.rotateX(modelMatrix, modelMatrix, object.rotation.x);
mat4.rotateY(modelMatrix, modelMatrix, object.rotation.y);
mat4.rotateZ(modelMatrix, modelMatrix, object.rotation.z);
mat4.scale(modelMatrix, modelMatrix, [object.size.x, object.size.y, object.size.z]);
const modelViewMatrix = mat4.create();
mat4.multiply(modelViewMatrix, viewMatrix, modelMatrix, xRotationMatrix, yRotationMatrix, zRotationMatrix);
const cubeVertices = this.cubev(1)
for (let i = 0; i < cubeVertices.length; i += 3) {
const vertex = vec3.transformMat4(vec3.create(), [cubeVertices[i], cubeVertices[i + 1], cubeVertices[i + 2]], modelViewMatrix);
buffers.position.push(...vertex);
}
const color = object.material.color;
for (let i = 0; i < cubeVertices.length / 3; i++) {
buffers.color.push(...color);
}
}
}
return buffers;`
I see a jumble of rotating triangles.
I was expecting for a cube but instead I get a jumble of rotating triangles when the object is not at (0, 0, 0) and no rotations.