brulijam/Interactive_Computer_Graphic_Stuff
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished Abgabe 6

Browse Source
This commit is contained in:
Julian Brammer 2024-01-18 04:25:57 +01:00
parent 050f9448f0
commit 0430dd1e35
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Abgabe_6/normalMappingTODOs/common/objects3D.js
View File

@ -1890,6 +1890,7 @@ class Sea extends Object3D {
this.texCoordLoc = gl.getAttribLocation(this.shader, "vTexCoord"); this.texCoordLoc = gl.getAttribLocation(this.shader, "vTexCoord");
this.diffuseMapLoc = gl.getUniformLocation(this.shader, "diffuseMap"); this.diffuseMapLoc = gl.getUniformLocation(this.shader, "diffuseMap");
// TODO 1.3: Hole Speicheradresse der Normal-Map-Shadervariable. // TODO 1.3: Hole Speicheradresse der Normal-Map-Shadervariable.
this.normalMapLoc = gl.getUniformLocation(this.shader, "normalMap")
for(let i = -10; i < 10; i += 0.5) { for(let i = -10; i < 10; i += 0.5) {
@ -1916,6 +1917,9 @@ class Sea extends Object3D {
handleTexture(waterImage, this.diffuseTexture); handleTexture(waterImage, this.diffuseTexture);
// TODO 1.1: Erstelle analog zu diffuser Textur eine Normal Map für das Meer. // TODO 1.1: Erstelle analog zu diffuser Textur eine Normal Map für das Meer.
this.normalTexture = gl.createTexture();
let waterNormal = await loadImage("water_normal.jpg");
handleTexture(waterNormal, this.normalTexture);
this.InitBuffers(); this.InitBuffers();
@ -1940,7 +1944,9 @@ class Sea extends Object3D {
gl.uniform1i(this.diffuseMapLoc, 0); gl.uniform1i(this.diffuseMapLoc, 0);
// TODO 1.4: Verknüpfe Normal Map analog zu diffuser Map mit Shader. // TODO 1.4: Verknüpfe Normal Map analog zu diffuser Map mit Shader.
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, this.normalTexture);
gl.uniform1i(this.normalMapLoc, 1);
// Render // Render
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexVBO); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);

12
Abgabe_6/normalMappingTODOs/index.html
View File

@ -121,6 +121,7 @@
const float c3 = 0.000003; const float c3 = 0.000003;
uniform sampler2D diffuseMap; uniform sampler2D diffuseMap;
uniform sampler2D normalMap;
// TODO 1.2: Füge Normal Map als uniforme Variable hinzu. // TODO 1.2: Füge Normal Map als uniforme Variable hinzu.
@ -129,13 +130,20 @@
void main() void main()
{ {
// TODO 1.5: Berechne (normalisierte) Normale, Tangente und Binormale im Kameraraum // TODO 1.5: Berechne (normalisierte) Normale, Tangente und Binormale im Kameraraum
vec3 n = normalize(normalCam.xyz);
vec3 t = normalize(cross(n, vec3(0.0, 0.0, 1.0)));
vec3 b = cross(n, t);
// TODO 1.6: Stelle TBN-Matrix zur Transformation vom Kamera- in den Tangentenraum auf. // TODO 1.6: Stelle TBN-Matrix zur Transformation vom Kamera- in den Tangentenraum auf.
mat3 tbn = mat3(t.x, t.y, t.z, b.x, b.y, b.z, n.x, n.y, n.z);
// TODO 1.7: Lese Normale aus Normal Map aus, verschiebe ihren Wertebereich und transformiere sie anschließend mit der TBN-Matrix vom Tangentenraum in den Kameraraum. (Kommentiere hiezu zunächst die folgende Zeile aus.) // TODO 1.7: Lese Normale aus Normal Map aus, verschiebe ihren Wertebereich und transformiere sie anschließend mit der TBN-Matrix vom Tangentenraum in den Kameraraum. (Kommentiere hiezu zunächst die folgende Zeile aus.)
vec3 N = normalize(normalCam.xyz); // vec3 N = normalize(normalCam.xyz);
vec3 normalTex = texture(normalMap, vfTexCoord).rgb;
vec3 N = normalize(tbn * (normalTex * 2.0 - 1.0));
// Calculate and normalize L, V and R // Calculate and normalize L, V and R
vec3 L = normalize((lightPosCam - positionCam).xyz); vec3 L = normalize((lightPosCam - positionCam).xyz);