106 lines
3.3 KiB
HTML
106 lines
3.3 KiB
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>
|