"use strict" ; let gl; let viewLoc; let program; let objects = []; let posLoc, colorLoc; let lastTimestamp; function main() { // Get canvas and setup WebGL context const canvas = document.getElementById("gl-canvas"); gl = canvas.getContext('webgl2'); // Configure viewport gl.viewport(0,0,canvas.width,canvas.height); gl.clearColor(1.0,1.0,1.0,1.0); gl.enable(gl.DEPTH_TEST); // Init shader program via additional function and bind it program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program); // Get locations of shader variables posLoc = gl.getAttribLocation(program, "vPosition"); colorLoc = gl.getAttribLocation(program, "vColor"); // Create object instances let island = new Island(); objects.push(island); let river = new River(); objects.push(river); // View Matrix var mat = new Float32Array([ 0.1767766922712326 , -0.0589255653321743 , -0.013334667310118675 , 0 , 0 , 0.2357022613286972 , -0.006667333655059338 , 0 , -0.1767766922712326 , -0.0589255653321743 , -0.013334667310118675 , 0 , 0 , 0 , -0.8801880478858948 , 1 ]); viewLoc = gl.getUniformLocation(program,"viewMatrix"); gl.uniformMatrix4fv(viewLoc,false,mat); window.requestAnimationFrame(render); }; function render(timestamp) { // Only clear once gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); if (lastTimestamp == undefined) { lastTimestamp = timestamp; } const elapsed = timestamp - lastTimestamp; // Call render function of each scene object // and don't mix up "of" and "in" up here, both keywords // are valid but have different meanings for(let object of objects) { object.Render(); }; window.requestAnimationFrame(render); } main();