Interactive_Computer_Graphi.../Abgabe_4/lightTODOs/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>WebGL Example</title>

		<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;
			uniform vec3 Id;
			uniform vec3 kd;
			uniform vec3 Is;
			uniform vec3 ks;
			uniform float specExp;

			// TODO: Definiere alle Konstanten c_1, c_2, c_3
			const float c_1 = 1.0;
			const float c_2 = 0.001;
			const float c_3 = 0.0001;


			out vec3 vfColor;

			void main()
			{
				const mat4 projectionMatrix = mat4(
					1.2071068286895752, 0, 0, 0,
					0, 2.4142136573791504, 0, 0,
					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));
				vec4 vec4Normal = vec4(vNormal, 0.0);

				// 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)
				// Folie 52
				// Vektor L ist Vektor von Vertex zu Lichtquelle
				// Vektor N ist Normale vom Vertex (haben wir die nicht schon durch vNormal?)
				// https://docs.gl/sl4/reflect 
				// Vektor R ist reflect(-L, N)?
				// Vektor V ist von Vertex zu camera position? Folie 54
				//vec3 L = 


				// TODO: Berechne die Distanz d, sowie f_{att} // Folie 49
				// Distanz zwischen Lichtposition und Vertex ?
				// Problem: vPosition is vec4 not vec3
				// Umrechnung von vec4 zu vec3
				vec3 vPositionVec3 = vec3(vPosition);
				float d = distance(lightPosition, vPositionVec3); 
				float f_att = min(1.0 / (c_1 + c_2*d + c_3*pow(d, 2.0)), 1.0);

				// TODO: Berechne die Farbe vfColor anhand der Phong-Beleuchtungsgleichung
				//vfColor = TODO;
				//float temp_diffuseLight = 
				vfColor = Ia * ka + f_att * 1.0;

				gl_Position = projectionMatrix * position;
			}
		</script>
		<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
			precision mediump float;

			in vec3 vfColor;
			out vec4 fColor;

			void main()
			{
				// DONE: Umrechnung von vec3 in vec4
				fColor = vec4(vfColor, 1.0);
			}
		</script>
		<script type="text/javascript" src="common/initShaders.js"></script>
		<script type="text/javascript" src="common/gl-matrix.js"></script>
		<script type="text/javascript" src="common/objects3D.js"></script>
	</head>
	<body>
		<h1>Lorem Ipsum</h1>

		<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>
	</body>
</html>
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+								<!DOCTYPE html>
 								<html>
 									<head>
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
+										<meta charset="utf-8" />
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+										<title>WebGL Example</title>
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Working ambient light in Abgabe 4

											
										
										
											2023-12-07 14:38:00 +00:00
+										<script id="vertex-shader" type="x-shader/x-vertex">#version 300 es
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+											in vec4 vPosition;
 											// TODO: Nimm Normalen als Attribut entgegen
-												Added Ambient Lighting

											
										
										
											2023-11-30 12:05:13 +00:00
+											in vec3 vNormal;
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+											uniform mat4 modelMatrix;
 											uniform mat4 viewMatrix;
 											// TODO: Nimm die Position der Lichtquelle als Uniform-Variable entgegen
-												Added Ambient Lighting

											
										
										
											2023-11-30 12:05:13 +00:00
+											uniform vec3 lightPosition;
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+											// TODO: Nimm alle Koeffizienten und Intensitäten, sowie den Exponenten als Uniform-Variablen entgegen
-												Added Ambient Lighting

											
										
										
											2023-11-30 12:05:13 +00:00
+											uniform vec3 Ia;
 											uniform vec3 ka;
-												Working ambient light in Abgabe 4

											
										
										
											2023-12-07 14:38:00 +00:00
+											uniform vec3 Id;
 											uniform vec3 kd;
 											uniform vec3 Is;
 											uniform vec3 ks;
-												started working on Abgabe 4

											
										
										
											2023-11-30 12:47:15 +00:00
+											uniform float specExp;
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
 											// TODO: Definiere alle Konstanten c_1, c_2, c_3
-												started working on Abgabe 4

											
										
										
											2023-11-30 12:47:15 +00:00
+											const float c_1 = 1.0;
 											const float c_2 = 0.001;
 											const float c_3 = 0.0001;
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
 											out vec3 vfColor;
 											void main()
 											{
 												const mat4 projectionMatrix = mat4(
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
+.2071068286895752, 0, 0, 0,
 , 2.4142136573791504, 0, 0,
 , 0, -1.0100502967834473, -1,
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+, 0, -1.0050251483917236, 0);
 												mat4 modelViewMatrix = viewMatrix * modelMatrix;
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+												// TODO: Berechne die Normalenmatrix
-												started working on Abgabe 4

											
										
										
											2023-11-30 12:47:15 +00:00
+												// ? is modelViewMatrix our T or viewMatrix
 												mat4 normalMatrix = inverse(transpose(modelViewMatrix));
 												vec4 vec4Normal = vec4(vNormal, 0.0);
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
 												// TODO: Rechne alle übergebenen Koordinaten (Lichtposition, Normalen) in das Kamerakoordinatensystem um
 												vec4 position = modelViewMatrix * vPosition;
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+												// 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)
-												Added Attenuation Factor

											
										
										
											2023-12-07 16:18:30 +00:00
+												// Folie 52
 												// Vektor L ist Vektor von Vertex zu Lichtquelle
 												// Vektor N ist Normale vom Vertex (haben wir die nicht schon durch vNormal?)
 												// https://docs.gl/sl4/reflect
 												// Vektor R ist reflect(-L, N)?
 												// Vektor V ist von Vertex zu camera position? Folie 54
 												//vec3 L =
 												// TODO: Berechne die Distanz d, sowie f_{att} // Folie 49
 												// Distanz zwischen Lichtposition und Vertex ?
 												// Problem: vPosition is vec4 not vec3
 												// Umrechnung von vec4 zu vec3
 												vec3 vPositionVec3 = vec3(vPosition);
 												float d = distance(lightPosition, vPositionVec3);
 												float f_att = min(1.0 / (c_1 + c_2*d + c_3*pow(d, 2.0)), 1.0);
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
 												// TODO: Berechne die Farbe vfColor anhand der Phong-Beleuchtungsgleichung
 												//vfColor = TODO;
-												Added Attenuation Factor

											
										
										
											2023-12-07 16:18:30 +00:00
+												//float temp_diffuseLight =
 												vfColor = Ia * ka + f_att * 1.0;
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+												gl_Position = projectionMatrix * position;
 											}
 										</script>
-												Working ambient light in Abgabe 4

											
										
										
											2023-12-07 14:38:00 +00:00
+										<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+											precision mediump float;
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+											in vec3 vfColor;
 											out vec4 fColor;
 											void main()
 											{
 												// DONE: Umrechnung von vec3 in vec4
 												fColor = vec4(vfColor, 1.0);
 											}
 										</script>
 										<script type="text/javascript" src="common/initShaders.js"></script>
 										<script type="text/javascript" src="common/gl-matrix.js"></script>
 										<script type="text/javascript" src="common/objects3D.js"></script>
 									</head>
 									<body>
 										<h1>Lorem Ipsum</h1>
-												Formatting

											
										
										
											2023-11-30 21:37:29 +00:00
+										<canvas id="gl-canvas" width="1024" height="512"> If you see this, your browser doesn't support WebGL. </canvas>
-												Formatting

											
										
										
											2023-11-30 21:22:17 +00:00
 										<script src="main.js" type="text/javascript"></script>
-												Prepared Abgabe 4 and Übung

											
										
										
											2023-11-30 09:08:48 +00:00
+									</body>
 								</html>