Where to position uniforms, view matrix and projection matrix to form a camera in WebGL2? - camera

Question

I'm doing a homework on WebGL2 and am provided with a projection and view matrix I have to use to form a camera. It says "the matrices have to be send to the shaders and the shaders have to be extended by new uniforms".
It's part two of a multipart assignment where part one was to send the vertices of a cube to the vertex shader.
I get to the part where it shows a rectangle, as all over parts of the cube are behind that one.
I looked at some examples on webgl2fundamentals but wasn't able to adapt the code to the code we were provided with. I've tried several positionings, especially with looking up the uniforms during init() and then binding them either in createGeometry() or render(), where all questionable lines of code currently sit for better overview.
I think at least the lookup shouldn't happen at render time.
vertex shader:
#version 300 es
precision mediump float;
layout(location = 0) in vec3 aPos;
layout(location = 1) in vec3 aColor;
uniform mat4 u_pmatrix;
uniform mat4 u_vmatrix;
out vec3 color;
void main() {
color = aColor;
gl_Position = u_pmatrix * u_vmatrix * vec4(aPos, 1.0);
}
"use strict"
var gl;
var viewMatrix;
var projectionMatrix;
var program;
var vao;
function render(timestamp, previousTimestamp)
{
var light = getLightPosition(); // vec3
var rotation = getRotation(); // vec3
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
gl.bindVertexArray(vao);
var pMatLocation = gl.getUniformLocation(program, "u_pmatrix");
var vMatLocation = gl.getUniformLocation(program, "u_vmatrix");
gl.uniformMatrix4fv(pMatLocation, false, projectionMatrix);
gl.uniformMatrix4fv(vMatLocation, false, viewMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);
window.requestAnimFrame(function (time) {
render(time, timestamp);
});
}
function createGeometry()
{
var positions = [];
positions.push(vec3(-0.5, -0.5, -0.5));
positions.push(vec3(-0.5, 0.5, -0.5));
positions.push(vec3(0.5, -0.5, -0.5));
positions.push(vec3(-0.5, 0.5, -0.5));
positions.push(vec3(0.5, 0.5, -0.5));
positions.push(vec3(0.5, -0.5, -0.5));
positions.push(vec3(-0.5, -0.5, 0.5));
positions.push(vec3(0.5, -0.5, 0.5));
positions.push(vec3(-0.5, 0.5, 0.5));
positions.push(vec3(-0.5, 0.5, 0.5));
positions.push(vec3(0.5, -0.5, 0.5));
positions.push(vec3(0.5, 0.5, 0.5));
positions.push(vec3(-0.5, 0.5, -0.5));
positions.push(vec3(-0.5, 0.5, 0.5));
positions.push(vec3(0.5, 0.5, -0.5));
positions.push(vec3(-0.5, 0.5, 0.5));
positions.push(vec3(0.5, 0.5, 0.5));
positions.push(vec3(0.5, 0.5, -0.5));
positions.push(vec3(-0.5, -0.5, -0.5));
positions.push(vec3(0.5, -0.5, -0.5));
positions.push(vec3(-0.5, -0.5, 0.5));
positions.push(vec3(-0.5, -0.5, 0.5));
positions.push(vec3(0.5, -0.5, -0.5));
positions.push(vec3(0.5, -0.5, 0.5));
positions.push(vec3(-0.5, -0.5, -0.5));
positions.push(vec3(-0.5, -0.5, 0.5));
positions.push(vec3(-0.5, 0.5, -0.5));
positions.push(vec3(-0.5, 0.5, -0.5));
positions.push(vec3(-0.5, 0.5, 0.5));
positions.push(vec3(-0.5, 0.5, -0.5));
positions.push(vec3(0.5, -0.5, -0.5));
positions.push(vec3(0.5, 0.5, -0.5));
positions.push(vec3(0.5, -0.5, 0.5));
positions.push(vec3(0.5, -0.5, 0.5));
positions.push(vec3(0.5, 0.5, -0.5));
positions.push(vec3(0.5, 0.5, 0.5));
vao = gl.createVertexArray();
gl.bindVertexArray(vao);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
gl.bufferData(gl.ARRAY_BUFFER, flatten(positions), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);
gl.enableVertexAttribArray(0);
var colors = [];
colors.push(vec3(0.0, 1.0, 0.0));
colors.push(vec3(0.0, 1.0, 0.0));
colors.push(vec3(0.0, 1.0, 0.0));
colors.push(vec3(0.0, 1.0, 0.0));
colors.push(vec3(0.0, 1.0, 0.0));
colors.push(vec3(0.0, 1.0, 0.0));
colors.push(vec3(1.0, 0.0, 0.0));
colors.push(vec3(1.0, 0.0, 0.0));
colors.push(vec3(1.0, 0.0, 0.0));
colors.push(vec3(1.0, 0.0, 0.0));
colors.push(vec3(1.0, 0.0, 0.0));
colors.push(vec3(1.0, 0.0, 0.0));
colors.push(vec3(0.0, 0.0, 1.0));
colors.push(vec3(0.0, 0.0, 1.0));
colors.push(vec3(0.0, 0.0, 1.0));
colors.push(vec3(0.0, 0.0, 1.0));
colors.push(vec3(0.0, 0.0, 1.0));
colors.push(vec3(0.0, 0.0, 1.0));
colors.push(vec3(1.0, 1.0, 0.0));
colors.push(vec3(1.0, 1.0, 0.0));
colors.push(vec3(1.0, 1.0, 0.0));
colors.push(vec3(1.0, 1.0, 0.0));
colors.push(vec3(1.0, 1.0, 0.0));
colors.push(vec3(1.0, 1.0, 0.0));
colors.push(vec3(1.0, 1.0, 0.5));
colors.push(vec3(1.0, 1.0, 0.5));
colors.push(vec3(1.0, 1.0, 0.5));
colors.push(vec3(1.0, 1.0, 0.5));
colors.push(vec3(1.0, 1.0, 0.5));
colors.push(vec3(1.0, 1.0, 0.5));
colors.push(vec3(1.0, 0.0, 1.0));
colors.push(vec3(1.0, 0.0, 1.0));
colors.push(vec3(1.0, 0.0, 1.0));
colors.push(vec3(1.0, 0.0, 1.0));
colors.push(vec3(1.0, 0.0, 1.0));
colors.push(vec3(1.0, 0.0, 1.0));
var vboColor = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vboColor);
gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);
gl.vertexAttribPointer(1, 3, gl.FLOAT, gl.FALSE, 0, 0);
gl.enableVertexAttribArray(1);
}
function loadModel()
{
var meshData = loadMeshData();
var positions = meshData.positions;
var normals = meshData.normals;
var colors = meshData.colors;
var vertexCount = meshData.vertexCount;
}
window.onload = function init() {
var canvas = document.getElementById('rendering-surface');
gl = WebGLUtils.setupWebGL( canvas );
gl.viewport(0, 0, canvas.width, canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.0, 0.0, 0.0, 0.0);
program = initShaders(gl, "vertex-shader","fragment-shader");
gl.useProgram(program);
createGeometry();
loadModel();
var projectionMatrix = mat4(1.0);
projectionMatrix = perspective(90, canvas.width / canvas.height, 0.1, 100);
var eyePos = vec3(0, 1.0, 2.0);
var lookAtPos = vec3(0.0, 0.0, 0.0);
var upVector = vec3(0.0, 1.0, 0.0);
viewMatrix = lookAt(eyePos, lookAtPos, upVector);
render(0,0);
}
There should be a cube, but all that's to be seen is blank space. Either the positioning or transformation is wrong, or the program is crashing.

Answer 1

In your init function you're shadowing your global projectionMatrix thus your projection matrix used in render always remains undefined.
var projectionMatrix = mat4(1.0);// << shadowing your global with the same name
projectionMatrix = perspective(90, canvas.width / canvas.height, 0.1, 100);
You might want to take a look at this article on how to use developer tools for debugging.