197 lines
4.3 KiB
JavaScript
197 lines
4.3 KiB
JavaScript
let gl;
|
|
let defaultProgram,
|
|
waterProgram;
|
|
|
|
let objects = [];
|
|
|
|
let viewMatrix,
|
|
projectionMatrix;
|
|
|
|
let eye,
|
|
target,
|
|
up;
|
|
|
|
let keyPressed = {
|
|
KeyW: false,
|
|
KeyA: false,
|
|
KeyS: false,
|
|
KeyD: false
|
|
};
|
|
|
|
const speed = 0.005;
|
|
|
|
|
|
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(0.75,0.8,1.0,1.0);
|
|
|
|
gl.enable(gl.DEPTH_TEST);
|
|
|
|
// Init shader program via additional function and bind it
|
|
defaultProgram = initShaders(gl, "vertex-shader", "fragment-shader");
|
|
waterProgram = initShaders(gl, "vertex-shader-water", "fragment-shader-water");
|
|
|
|
// Create object instances
|
|
let island = new Island();
|
|
objects.push(island);
|
|
|
|
let tree1 = new Tree();
|
|
tree1.SetModelMatrix([1.3, 0, 0.6], [0, 45, 0], [0.3, 0.3, 0.3]);
|
|
objects.push(tree1);
|
|
|
|
let tree2 = new Tree();
|
|
tree2.SetModelMatrix([0.9, 0, 0.3], [0, 33, 0], [0.45, 0.45, 0.45]);
|
|
objects.push(tree2);
|
|
|
|
let tree3 = new Tree();
|
|
tree3.SetModelMatrix([0.45, 0, 0.75], [0, 0, 0], [0.4, 0.4, 0.4]);
|
|
objects.push(tree3);
|
|
|
|
let tree4 = new Tree();
|
|
tree4.SetModelMatrix([-1.1, 0, 0.5], [0, 222, 0], [0.42, 0.42, 0.42]);
|
|
objects.push(tree4);
|
|
|
|
let tree5 = new Tree();
|
|
tree5.SetModelMatrix([-0.65, 0, 0.7], [0, 79, 0], [0.32, 0.32, 0.32]);
|
|
objects.push(tree5);
|
|
|
|
let cloud1 = new Cloud();
|
|
cloud1.SetModelMatrix([-0.4, 1, -0.9], [0, 0, 0], [0.32, 0.32, 0.32]);
|
|
objects.push(cloud1);
|
|
|
|
let cloud2 = new Cloud();
|
|
cloud2.SetModelMatrix([0, 1.4, -1.6], [0, -90, 0], [0.2, 0.2, 0.2]);
|
|
objects.push(cloud2);
|
|
|
|
let cloud3 = new Cloud();
|
|
cloud3.SetModelMatrix([0.7, 0.9, -0.8], [0, 100, 0], [0.25, 0.25, 0.25]);
|
|
objects.push(cloud3);
|
|
|
|
let river = new River();
|
|
river.SetModelMatrix([0, 0.04, 1.8], [0, 185, 0], [0.11, 0.11, 0.11]);
|
|
objects.push(river);
|
|
|
|
let sea = new Sea();
|
|
objects.push(sea);
|
|
|
|
// Compute view matrix
|
|
eye = vec3.fromValues(0.0, 0.3, 4.0);
|
|
target = vec3.fromValues(0.0, 0.3, 0.0);
|
|
up = vec3.fromValues(0.0, 1.0, 0.0);
|
|
|
|
viewMatrix = mat4.create();
|
|
mat4.lookAt(viewMatrix, eye, target, up);
|
|
|
|
// Compute projection matrix
|
|
projectionMatrix = mat4.create();
|
|
mat4.perspective(projectionMatrix, Math.PI * 0.25, canvas.width / canvas.height, 0.5, 100);
|
|
|
|
for(let object of objects) {
|
|
|
|
gl.useProgram(object.shader);
|
|
|
|
// Set view and projection matrix
|
|
gl.uniformMatrix4fv(object.viewMatrixLoc, false, viewMatrix);
|
|
gl.uniformMatrix4fv(object.projectionMatrixLoc, false, projectionMatrix);
|
|
|
|
// Set position und intensity of the light source
|
|
gl.uniform3fv(object.lightPositionLoc, [1.0, 2.0, 1.0]);
|
|
gl.uniform4fv(object.IaLoc, [0.4, 0.4, 0.4, 1.0]);
|
|
gl.uniform4fv(object.IdLoc, [0.8, 0.8, 0.8, 1.0]);
|
|
gl.uniform4fv(object.IsLoc, [1.0, 1.0, 1.0, 1.0]);
|
|
}
|
|
|
|
document.addEventListener("keydown", keydown);
|
|
document.addEventListener("keyup", keyup);
|
|
document.addEventListener("mousemove", changeView);
|
|
|
|
canvas.onmousedown = function() {
|
|
canvas.requestPointerLock();
|
|
}
|
|
|
|
gameLoop();
|
|
};
|
|
|
|
function update()
|
|
{
|
|
let look = vec3.create();
|
|
vec3.sub(look, target, eye);
|
|
vec3.scale(look, look, speed);
|
|
|
|
if(keyPressed.KeyW) {
|
|
eye[0] += look[0];
|
|
eye[2] += look[2];
|
|
target[0] += look[0];
|
|
target[2] += look[2];
|
|
}
|
|
if(keyPressed.KeyS) {
|
|
eye[0] -= look[0];
|
|
eye[2] -= look[2];
|
|
target[0] -= look[0];
|
|
target[2] -= look[2];
|
|
}
|
|
if(keyPressed.KeyA) {
|
|
eye[0] += look[2];
|
|
eye[2] -= look[0];
|
|
target[0] += look[2];
|
|
target[2] -= look[0];
|
|
}
|
|
if(keyPressed.KeyD) {
|
|
eye[0] -= look[2];
|
|
eye[2] += look[0];
|
|
target[0] -= look[2];
|
|
target[2] += look[0];
|
|
}
|
|
mat4.lookAt(viewMatrix, eye, target, up);
|
|
for(let object of objects) {
|
|
gl.useProgram(object.shader);
|
|
gl.uniformMatrix4fv(object.viewMatrixLoc, false, viewMatrix);
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
|
|
// Only clear once
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
|
|
// Call render function of each scene object
|
|
for(let object of objects) {
|
|
object.Render();
|
|
};
|
|
}
|
|
|
|
function gameLoop()
|
|
{
|
|
update();
|
|
render();
|
|
requestAnimationFrame(gameLoop);
|
|
}
|
|
|
|
function keydown(e)
|
|
{
|
|
keyPressed[e.code] = true;
|
|
}
|
|
|
|
function keyup(e)
|
|
{
|
|
keyPressed[e.code] = false;
|
|
}
|
|
|
|
function changeView(e)
|
|
{
|
|
vec3.rotateY(target, target, eye, -e.movementX * speed);
|
|
mat4.lookAt(viewMatrix, eye, target, up);
|
|
for(let object of objects) {
|
|
gl.useProgram(object.shader);
|
|
gl.uniformMatrix4fv(object.viewMatrixLoc, false, viewMatrix);
|
|
}
|
|
}
|
|
|
|
main();
|