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
-        shader = gl.createShader( gl_shaderType );
+		shader = gl.createShader(gl_shaderType);
 
 		// Set the shader source code
-        gl.shaderSource( shader, shaderSource );
+		gl.shaderSource(shader, shaderSource);
 
 		// Compile the shader to make it readable for the GPU
-        gl.compileShader( shader );
+		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 {
-        else {
 			return shader;
 		}
-    }
+	};
 
 	/*
 	 * Setup shader program
 	 */
-    vShaderSource = document.querySelector( '#' + vertexShaderId ).text;
+	vShaderSource = document.querySelector("#" + vertexShaderId).text;
-    fShaderSource = document.querySelector( '#' + fragmentShaderId ).text;
+	fShaderSource = document.querySelector("#" + fragmentShaderId).text;
 
-    vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource );
+	vertexShader = compileShader(gl, gl.VERTEX_SHADER, vShaderSource);
-    fragmentShader = compileShader( gl, gl.FRAGMENT_SHADER, fShaderSource );
+	fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fShaderSource);
 
 	// Build the program
 	const program = gl.createProgram();
 
 	// Attach shaders to it
-    gl.attachShader( program, vertexShader );
+	gl.attachShader(program, vertexShader);
-    gl.attachShader( program, fragmentShader );
+	gl.attachShader(program, fragmentShader);
 
-    gl.linkProgram( program );
+	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,7 +88,6 @@ class Object3D {
 	}
 
 	Render() {
-
 		// Link data in VBO to shader variables
 		gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO);
 		gl.enableVertexAttribArray(posLoc);
@@ -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]);
 
 		// 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,

Abgabe_4/lightTODOs/index.html

@@ -1,10 +1,11 @@
 <!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
@@ -61,7 +62,8 @@
 				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;

Abgabe_4/lightTODOs/main.js

@@ -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");
-	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();
-	}
+	};
 
 	// 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);