84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
|
"use strict" ;
|
||
|
|
||
|
let gl;
|
||
|
let viewLoc;
|
||
|
let program;
|
||
|
let objects = [];
|
||
|
let posLoc,
|
||
|
colorLoc;
|
||
|
let lastTimestamp;
|
||
|
|
||
|
let modelViewProjection;
|
||
|
let modelMatrix;
|
||
|
let viewMatrix;
|
||
|
let projectionMatrix;
|
||
|
|
||
|
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);
|
||
|
|
||
|
viewMatrix = glMatrix.mat4.create();
|
||
|
projectionMatrix = glMatrix.mat4.create();
|
||
|
modelViewProjection = glMatrix.mat4.create();
|
||
|
glMatrix.mat4.perspective(projectionMatrix, 90.0, 1.0, 0.0001, 1000.0)
|
||
|
|
||
|
glMatrix.mat4.lookAt(viewMatrix, glMatrix.vec3.create(0.8, 0.8, 0.8), glMatrix.vec3.create(0, 0, 0), glMatrix.vec3.create(0, 1, 0))
|
||
|
|
||
|
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();
|