206 lines
4.7 KiB
JavaScript
206 lines
4.7 KiB
JavaScript
let gl;
|
|
let program;
|
|
|
|
let objects = [];
|
|
|
|
let posLoc;
|
|
|
|
// DONE: Deklariere benötigte Locations von Shadervariablen als globale Variablen
|
|
let normalLoc,
|
|
lightPositionLoc,
|
|
IaLoc,
|
|
IdLoc,
|
|
IsLoc,
|
|
kaLoc,
|
|
kdLoc,
|
|
ksLoc,
|
|
specularExponentLoc;
|
|
|
|
let modelMatrixLoc;
|
|
|
|
let viewMatrixLoc,
|
|
viewMatrix;
|
|
|
|
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
|
|
program = initShaders(gl, "vertex-shader", "fragment-shader");
|
|
gl.useProgram(program);
|
|
|
|
// Get locations of shader variables
|
|
posLoc = gl.getAttribLocation(program, "vPosition");
|
|
modelMatrixLoc = gl.getUniformLocation(program, "modelMatrix");
|
|
viewMatrixLoc = gl.getUniformLocation(program, "viewMatrix");
|
|
|
|
// DONE: Fülle globale Variablen mit Speicherlocations für Materialkoeffizienten und Lichtintensitäten
|
|
normalLoc = gl.getAttribLocation(program, "vNormal");
|
|
lightPositionLoc = gl.getUniformLocation(program, "lightPosition");
|
|
IaLoc = gl.getUniformLocation(program, "Ia");
|
|
IdLoc = gl.getUniformLocation(program, "Id");
|
|
IsLoc = gl.getUniformLocation(program, "Is");
|
|
kaLoc = gl.getUniformLocation(program, "ka");
|
|
kdLoc = gl.getUniformLocation(program, "kd");
|
|
ksLoc = gl.getUniformLocation(program, "ks");
|
|
specularExponentLoc = gl.getUniformLocation(program, "specExp");
|
|
|
|
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);
|
|
|
|
gl.uniformMatrix4fv(viewMatrixLoc, false, viewMatrix);
|
|
|
|
// DONE: Setze Position und Intensitäten der Lichtquelle als Uniform-Variablen
|
|
gl.uniform3fv(lightPositionLoc, [1.0, 2.0, 1.0]);
|
|
gl.uniform3fv(IaLoc, [0.3, 0.3, 0.3]);
|
|
gl.uniform3fv(IdLoc, [0.8, 0.8, 0.8]);
|
|
gl.uniform3fv(IsLoc, [0.7, 0.7, 0.7]);
|
|
|
|
document.addEventListener("keydown", keydown);
|
|
document.addEventListener("keyup", keyup);
|
|
document.addEventListener("mousemove", changeView);
|
|
|
|
canvas.onmousedown = function() {
|
|
canvas.requestPointerLock();
|
|
}
|
|
|
|
// 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);
|
|
|
|
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);
|
|
gl.uniformMatrix4fv(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);
|
|
gl.uniformMatrix4fv(viewMatrixLoc, false, viewMatrix);
|
|
}
|
|
|
|
main();
|