Formatting

Abgabe_4/lightTODOs/common/initShaders.js

@@ -2,45 +2,43 @@
 //  initShaders.js
 //
 
-function initShaders( gl, vertexShaderId, fragmentShaderId )
+function initShaders(gl, vertexShaderId, fragmentShaderId) {
-{
+	const compileShader = (gl, gl_shaderType, shaderSource) => {
-    const compileShader = ( gl, gl_shaderType, shaderSource ) => {
+		// Create the shader
-        // Create the shader
+		shader = gl.createShader(gl_shaderType);
-        shader = gl.createShader( gl_shaderType );
 
-        // Set the shader source code
+		// Set the shader source code
-        gl.shaderSource( shader, shaderSource );
+		gl.shaderSource(shader, shaderSource);
 
-        // Compile the shader to make it readable for the GPU
+		// Compile the shader to make it readable for the GPU
-        gl.compileShader( shader );
+		gl.compileShader(shader);
-        var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+		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;
 
-    vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource );
+		if (!success) {
-    fragmentShader = compileShader( gl, gl.FRAGMENT_SHADER, fShaderSource );
+			// 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
+	vertexShader = compileShader(gl, gl.VERTEX_SHADER, vShaderSource);
-    gl.attachShader( program, vertexShader );
+	fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fShaderSource);
-    gl.attachShader( program, fragmentShader );
 
-    gl.linkProgram( program );
+	// Build the program
+	const program = gl.createProgram();
 
-    return program;
+	// Attach shaders to it
-}
+	gl.attachShader(program, vertexShader);
+	gl.attachShader(program, fragmentShader);
+
+	gl.linkProgram(program);
+
+	return program;
+}

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(
-		mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[1], [0, 1, 0]);
+			this.modelMatrix,
-		mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[2], [0, 0, 1]);
+			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();
 	}
-}
+}

Abgabe_4/lightTODOs/index.html

@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="utf-8"/>
+		<meta charset="utf-8" />
 		<title>WebGL Example</title>
-		
+
-		<script id="vertex-shader" type="x-shader/x-vertex">#version 300 es
+		<script id="vertex-shader" type="x-shader/x-vertex">
-			
+			#version 300 es
+
 			in vec4 vPosition;
 			// TODO: Nimm Normalen als Attribut entgegen
 			in vec3 vNormal;
-			
+
 			uniform mat4 modelMatrix;
 			uniform mat4 viewMatrix;
 
 			// TODO: Nimm die Position der Lichtquelle als Uniform-Variable entgegen
 			uniform vec3 lightPosition;
-			
+
 			// TODO: Nimm alle Koeffizienten und Intensitäten, sowie den Exponenten als Uniform-Variablen entgegen
 			uniform vec3 Ia;
 			uniform vec3 ka;
@@ -32,13 +33,13 @@
 			void main()
 			{
 				const mat4 projectionMatrix = mat4(
-					1.2071068286895752, 0, 0, 0, 
+					1.2071068286895752, 0, 0, 0,
-					0, 2.4142136573791504, 0, 0, 
+					0, 2.4142136573791504, 0, 0,
-					0, 0, -1.0100502967834473, -1, 
+					0, 0, -1.0100502967834473, -1,
 					0, 0, -1.0050251483917236, 0);
 
 				mat4 modelViewMatrix = viewMatrix * modelMatrix;
-				
+
 				// TODO: Berechne die Normalenmatrix
 				// ? is modelViewMatrix our T or viewMatrix
 				mat4 normalMatrix = inverse(transpose(modelViewMatrix));
@@ -46,7 +47,7 @@
 
 				// TODO: Rechne alle übergebenen Koordinaten (Lichtposition, Normalen) in das Kamerakoordinatensystem um
 				vec4 position = modelViewMatrix * vPosition;
-				
+
 				// TODO: Berechne und normalisiere die Vektoren L, N, R und V
 				// Tipp aus den References: For a given incident vector I and surface normal N reflect returns the reflection direction calculated as I - 2.0 * dot(N, I) * N.
 				// I ist in diesem Fall der normalisierte Einheitsvektor -L (Siehe Diskussion 7)
@@ -57,13 +58,14 @@
 				// TODO: Berechne die Farbe vfColor anhand der Phong-Beleuchtungsgleichung
 				//vfColor = TODO;
 				vfColor = Ia * ka;
-				
+
 				gl_Position = projectionMatrix * position;
 			}
 		</script>
-		<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
+		<script id="fragment-shader" type="x-shader/x-fragment">
+			#version 300 es
 			precision mediump float;
-			
+
 			in vec3 vfColor;
 			out vec4 fColor;
 
@@ -83,7 +85,7 @@
 		<canvas id="gl-canvas" width="1024" height="512">
 			If you see this, your browser doesn't support WebGL.
 		</canvas>
-		
+
-		<script src="main.js" type="text/javascript"></script>	
+		<script src="main.js" type="text/javascript"></script>
 	</body>
 </html>

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,
+let viewMatrixLoc, viewMatrix;
-	viewMatrix;
 
-let eye,
+let eye, target, up;
-	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");
+	const canvas = document.getElementById("gl-canvas");
-	gl = canvas.getContext('webgl2');
+	gl = canvas.getContext("webgl2");
 
 	// Configure viewport
-	gl.viewport(0,0,canvas.width,canvas.height);
+	gl.viewport(0, 0, canvas.width, canvas.height);
-	gl.clearColor(0.75,0.8,1.0,1.0);
+	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.onmousedown = function () {
-        canvas.requestPointerLock();
+		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);