Interactive_Computer_Graphi.../Übung_23112023/aufgabe2/main.js

72 lines
1.7 KiB
JavaScript
Raw Normal View History

2023-11-24 20:30:05 +00:00
"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();