72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
"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();
|