diff --git a/Abgabe_4/lightTODOs/common/initShaders.js b/Abgabe_4/lightTODOs/common/initShaders.js index 95a6657..06b482f 100644 --- a/Abgabe_4/lightTODOs/common/initShaders.js +++ b/Abgabe_4/lightTODOs/common/initShaders.js @@ -2,45 +2,43 @@ // initShaders.js // -function initShaders( gl, vertexShaderId, fragmentShaderId ) -{ - const compileShader = ( gl, gl_shaderType, shaderSource ) => { - // Create the shader - shader = gl.createShader( gl_shaderType ); +function initShaders(gl, vertexShaderId, fragmentShaderId) { + const compileShader = (gl, gl_shaderType, shaderSource) => { + // Create the shader + shader = gl.createShader(gl_shaderType); - // Set the shader source code - gl.shaderSource( shader, shaderSource ); + // Set the shader source code + gl.shaderSource(shader, shaderSource); - // Compile the shader to make it readable for the GPU - gl.compileShader( shader ); - var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); - - if (!success) { - // Something went wrong during compilation; get the error - throw "could not compile shader:" + gl.getShaderInfoLog(shader); - } - else { - return shader; - } - } - - /* - * Setup shader program - */ - vShaderSource = document.querySelector( '#' + vertexShaderId ).text; - fShaderSource = document.querySelector( '#' + fragmentShaderId ).text; + // Compile the shader to make it readable for the GPU + gl.compileShader(shader); + var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); - vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource ); - fragmentShader = compileShader( gl, gl.FRAGMENT_SHADER, fShaderSource ); + if (!success) { + // Something went wrong during compilation; get the error + throw "could not compile shader:" + gl.getShaderInfoLog(shader); + } else { + return shader; + } + }; - // Build the program - const program = gl.createProgram(); + /* + * Setup shader program + */ + vShaderSource = document.querySelector("#" + vertexShaderId).text; + fShaderSource = document.querySelector("#" + fragmentShaderId).text; - // Attach shaders to it - gl.attachShader( program, vertexShader ); - gl.attachShader( program, fragmentShader ); + vertexShader = compileShader(gl, gl.VERTEX_SHADER, vShaderSource); + fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fShaderSource); - gl.linkProgram( program ); + // Build the program + const program = gl.createProgram(); - return program; -} \ No newline at end of file + // Attach shaders to it + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + + gl.linkProgram(program); + + return program; +} diff --git a/Abgabe_4/lightTODOs/common/objects3D.js b/Abgabe_4/lightTODOs/common/objects3D.js index 4085950..6aea002 100644 --- a/Abgabe_4/lightTODOs/common/objects3D.js +++ b/Abgabe_4/lightTODOs/common/objects3D.js @@ -1,8 +1,10 @@ class Object3D { - // DONE: Füge Default-Materialkoeffizienten hinzu - constructor(ka = [0.5, 0.5, 0.5], kd = [0.5, 0.5, 0.5], ks = [0.5, 0.5, 0.5]) { - + constructor( + ka = [0.5, 0.5, 0.5], + kd = [0.5, 0.5, 0.5], + ks = [0.5, 0.5, 0.5] + ) { this.posVBO = gl.createBuffer(); // DONE: Kein colorVBO mehr! (Farben werden über Materialkoeffizienten bestimmt) this.indexVBO = gl.createBuffer(); @@ -24,30 +26,58 @@ class Object3D { } InitBuffers() { - gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.positions), gl.STATIC_DRAW); - + gl.bufferData( + gl.ARRAY_BUFFER, + new Float32Array(this.positions), + gl.STATIC_DRAW + ); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexVBO); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), gl.STATIC_DRAW); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array(this.indices), + gl.STATIC_DRAW + ); } - SetModelMatrix (position = this.position, orientation = this.orientation, scale = this.scale) { - + SetModelMatrix( + position = this.position, + orientation = this.orientation, + scale = this.scale + ) { this.position = position; - this.orientation = [orientation[0] * Math.PI / 180, orientation[1] * Math.PI / 180, orientation[2] * Math.PI / 180]; // Convert the orientation to RAD + this.orientation = [ + (orientation[0] * Math.PI) / 180, + (orientation[1] * Math.PI) / 180, + (orientation[2] * Math.PI) / 180, + ]; // Convert the orientation to RAD this.scale = scale; - + this.modelMatrix = mat4.create(); mat4.translate(this.modelMatrix, this.modelMatrix, position); - mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[0], [1, 0, 0]); - mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[1], [0, 1, 0]); - mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[2], [0, 0, 1]); + mat4.rotate( + this.modelMatrix, + this.modelMatrix, + this.orientation[0], + [1, 0, 0] + ); + mat4.rotate( + this.modelMatrix, + this.modelMatrix, + this.orientation[1], + [0, 1, 0] + ); + mat4.rotate( + this.modelMatrix, + this.modelMatrix, + this.orientation[2], + [0, 0, 1] + ); mat4.scale(this.modelMatrix, this.modelMatrix, scale); } - UpdateUniforms () { - + UpdateUniforms() { gl.uniformMatrix4fv(modelMatrixLoc, false, this.modelMatrix); // DONE: Übergebe Materialkoeffizienten des Objektes an den Shader @@ -58,12 +88,11 @@ class Object3D { } Render() { - // Link data in VBO to shader variables gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO); gl.enableVertexAttribArray(posLoc); gl.enableVertexAttribArray(normalLoc); - // DONE: Passe Stride-Wert an (vorletzter Parameter) + // DONE: Passe Stride-Wert an (vorletzter Parameter) // -> Vertex-Position und -Normale werden abwechselnd gespeichert gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 2 * 3 * 4, 0); gl.vertexAttribPointer(normalLoc, 3, gl.FLOAT, false, 2 * 3 * 4, 3 * 4); @@ -76,14 +105,13 @@ class Object3D { } } - +asd; class Island extends Object3D { - constructor() { - // DONE: Setze Material für Insel super([0.4, 0.2, 0.0], [0.6, 0.3, 0.0], [0.7, 0.7, 0.7]); + //prettier-ignore // DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender) this.positions = [ -0.344503,-0.106899,-2.313329,-0.011310,-0.533934,-0.845450, @@ -591,6 +619,7 @@ class Island extends Object3D { 0.101020,0.922236,-0.839739,-0.591876,0.677685,0.436377 ]; + //prettier-ignore this.indices = [ 0,1,2, 3,4,5, @@ -767,7 +796,7 @@ class Island extends Object3D { ]; this.colors = []; - for(var i = 0; i < this.positions.length; i += 3) { + for (var i = 0; i < this.positions.length; i += 3) { this.colors.push(0.5, 0.5, 0.5, 1); } @@ -775,15 +804,13 @@ class Island extends Object3D { } } - class River extends Object3D { - constructor() { - // DONE: Setze Material für Fluss super([0.0, 0.0, 0.5], [0, 0, 0.8], [0.9, 0.67, 0.2]); // DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender) + //prettier-ignore this.positions = [ 0.0, 0.0, 14.0, 0, 1, 0, // index 0 1.0, 0.0, 12.5, 0, 1, 0, // index 1 @@ -806,6 +833,7 @@ class River extends Object3D { 4.0, -6.0, 0.0, 0, 0, 1 // index 18 -> additional for waterfall ]; + //prettier-ignore this.indices = [ 0, 1, 2, 1, 2, 3, @@ -830,15 +858,13 @@ class River extends Object3D { } } - class Tree extends Object3D { - constructor() { - // DONE: Setze Material für Baum super([0.2, 0.5, 0.0], [0.4, 0.8, 0.2], [0.6, 0.9, 0.2]); // DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender) + //prettier-ignore this.positions = [ -0.056969,0.301313,0.059775,-0.999612,-0.027868,0.000000, -0.056969,0.301313,-0.040876,-0.999612,-0.027868,0.000000, @@ -1320,6 +1346,7 @@ class Tree extends Object3D { -0.079447,0.009962,0.074201,-0.864465,0.502693,0.000000 ]; + //prettier-ignore this.indices = [ 0,1,2, 3,4,5, @@ -1507,15 +1534,13 @@ class Tree extends Object3D { } } - class Cloud extends Object3D { - constructor() { - // DONE: Setze Material für Wolke - super([0.9, 0.9, 0.9], [0.9, 0.9, 0.9], [1.0, 1.0, 1.0]); + super([0.9, 0.9, 0.9], [0.9, 0.9, 0.9], [1.0, 1.0, 1.0]); // DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender) + //prettier-ignore this.positions = [ -0.308265,-0.282990,-0.001417,-0.135946,-0.969316,0.204803, 0.101554,-0.243033,0.459730,-0.135946,-0.969316,0.204803, @@ -1759,6 +1784,7 @@ class Cloud extends Object3D { -0.014225,0.327900,-0.747573,-0.020912,0.979982,-0.197984 ]; + //prettier-ignore this.indices = [ 0,1,2, 3,4,5, @@ -1844,4 +1870,4 @@ class Cloud extends Object3D { this.InitBuffers(); } -} \ No newline at end of file +} diff --git a/Abgabe_4/lightTODOs/index.html b/Abgabe_4/lightTODOs/index.html index 7e7023e..a58981d 100644 --- a/Abgabe_4/lightTODOs/index.html +++ b/Abgabe_4/lightTODOs/index.html @@ -1,21 +1,22 @@  - + WebGL Example - - - + + diff --git a/Abgabe_4/lightTODOs/main.js b/Abgabe_4/lightTODOs/main.js index da369b7..51b4716 100644 --- a/Abgabe_4/lightTODOs/main.js +++ b/Abgabe_4/lightTODOs/main.js @@ -5,7 +5,7 @@ let objects = []; let posLoc; -// DONE: Deklariere benötigte Locations von Shadervariablen als globale Variablen +// DONE: Deklariere benötigte Locations von Shadervariablen als globale Variablen let normalLoc, lightPositionLoc, IaLoc, @@ -18,32 +18,27 @@ let normalLoc, let modelMatrixLoc; -let viewMatrixLoc, - viewMatrix; +let viewMatrixLoc, viewMatrix; -let eye, - target, - up; +let eye, target, up; let keyPressed = { KeyW: false, KeyA: false, KeyS: false, - KeyD: 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'); + 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.viewport(0, 0, canvas.width, canvas.height); + gl.clearColor(0.75, 0.8, 1.0, 1.0); gl.enable(gl.DEPTH_TEST); @@ -86,9 +81,9 @@ function main() { document.addEventListener("keyup", keyup); document.addEventListener("mousemove", changeView); - canvas.onmousedown = function() { - canvas.requestPointerLock(); - } + canvas.onmousedown = function () { + canvas.requestPointerLock(); + }; // Create object instances let island = new Island(); @@ -131,33 +126,32 @@ function main() { objects.push(river); gameLoop(); -}; +} -function update() -{ +function update() { let look = vec3.create(); vec3.sub(look, target, eye); vec3.scale(look, look, speed); - if(keyPressed.KeyW) { + if (keyPressed.KeyW) { eye[0] += look[0]; eye[2] += look[2]; target[0] += look[0]; target[2] += look[2]; } - if(keyPressed.KeyS) { + if (keyPressed.KeyS) { eye[0] -= look[0]; eye[2] -= look[2]; target[0] -= look[0]; target[2] -= look[2]; } - if(keyPressed.KeyA) { + if (keyPressed.KeyA) { eye[0] += look[2]; eye[2] -= look[0]; target[0] += look[2]; target[2] -= look[0]; } - if(keyPressed.KeyD) { + if (keyPressed.KeyD) { eye[0] -= look[2]; eye[2] += look[0]; target[0] -= look[2]; @@ -168,35 +162,30 @@ function update() } 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) { + for (let object of objects) { object.Render(); - }; + } } -function gameLoop() -{ +function gameLoop() { update(); render(); requestAnimationFrame(gameLoop); } -function keydown(e) -{ +function keydown(e) { keyPressed[e.code] = true; } -function keyup(e) -{ +function keyup(e) { keyPressed[e.code] = false; } -function changeView(e) -{ +function changeView(e) { vec3.rotateY(target, target, eye, -e.movementX * speed); mat4.lookAt(viewMatrix, eye, target, up); gl.uniformMatrix4fv(viewMatrixLoc, false, viewMatrix);