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

92 lines
2.6 KiB
HTML
Raw Normal View History

2023-11-30 09:08:48 +00:00
<!DOCTYPE html>
<html>
<head>
2023-11-30 21:22:17 +00:00
<meta charset="utf-8" />
2023-11-30 09:08:48 +00:00
<title>WebGL Example</title>
2023-11-30 21:22:17 +00:00
<script id="vertex-shader" type="x-shader/x-vertex">
#version 300 es
2023-11-30 09:08:48 +00:00
in vec4 vPosition;
// TODO: Nimm Normalen als Attribut entgegen
2023-11-30 12:05:13 +00:00
in vec3 vNormal;
2023-11-30 21:22:17 +00:00
2023-11-30 09:08:48 +00:00
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
// TODO: Nimm die Position der Lichtquelle als Uniform-Variable entgegen
2023-11-30 12:05:13 +00:00
uniform vec3 lightPosition;
2023-11-30 21:22:17 +00:00
2023-11-30 09:08:48 +00:00
// TODO: Nimm alle Koeffizienten und Intensitäten, sowie den Exponenten als Uniform-Variablen entgegen
2023-11-30 12:05:13 +00:00
uniform vec3 Ia;
uniform vec3 ka;
2023-11-30 12:47:15 +00:00
uniform float specExp;
2023-11-30 09:08:48 +00:00
// TODO: Definiere alle Konstanten c_1, c_2, c_3
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;
2023-11-30 09:08:48 +00:00
out vec3 vfColor;
void main()
{
const mat4 projectionMatrix = mat4(
2023-11-30 21:22:17 +00:00
1.2071068286895752, 0, 0, 0,
0, 2.4142136573791504, 0, 0,
0, 0, -1.0100502967834473, -1,
2023-11-30 09:08:48 +00:00
0, 0, -1.0050251483917236, 0);
mat4 modelViewMatrix = viewMatrix * modelMatrix;
2023-11-30 21:22:17 +00:00
2023-11-30 09:08:48 +00:00
// TODO: Berechne die Normalenmatrix
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);
2023-11-30 09:08:48 +00:00
// TODO: Rechne alle übergebenen Koordinaten (Lichtposition, Normalen) in das Kamerakoordinatensystem um
vec4 position = modelViewMatrix * vPosition;
2023-11-30 21:22:17 +00:00
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)
// TODO: Berechne die Distanz d, sowie f_{att}
// TODO: Berechne die Farbe vfColor anhand der Phong-Beleuchtungsgleichung
//vfColor = TODO;
2023-11-30 12:05:13 +00:00
vfColor = Ia * ka;
2023-11-30 21:22:17 +00:00
2023-11-30 09:08:48 +00:00
gl_Position = projectionMatrix * position;
}
</script>
2023-11-30 21:22:17 +00:00
<script id="fragment-shader" type="x-shader/x-fragment">
#version 300 es
2023-11-30 09:08:48 +00:00
precision mediump float;
2023-11-30 21:22:17 +00:00
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>
<canvas id="gl-canvas" width="1024" height="512">
If you see this, your browser doesn't support WebGL.
</canvas>
2023-11-30 21:22:17 +00:00
<script src="main.js" type="text/javascript"></script>
2023-11-30 09:08:48 +00:00
</body>
</html>