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

Prepared Abgabe 6

Browse Source
This commit is contained in:
Julian Brammer 2024-01-18 00:36:37 +01:00
parent cc49f03c44
commit 050f9448f0
9 changed files with 7916 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Abgabe_6/icg_exercise6.pdf Normal file
View File

Binary file not shown.

BIN
Abgabe_6/normalMappingTODOs.zip Normal file
View File

Binary file not shown.

5555
Abgabe_6/normalMappingTODOs/common/gl-matrix.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
Abgabe_6/normalMappingTODOs/common/initShaders.js Normal file
View File

@ -0,0 +1,46 @@
//
// initShaders.js
//
function initShaders( gl, vertexShaderId, fragmentShaderId )
{
const compileShader = ( gl, gl_shaderType, shaderSource ) => {
// Create the shader
shader = gl.createShader( gl_shaderType );
// Set the shader source code
gl.shaderSource( shader, shaderSource );
// Compile the shader to make it readable for the GPU
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 {
return shader;
}
}
/*
* Setup shader program
*/
vShaderSource = document.querySelector( '#' + vertexShaderId ).text;
fShaderSource = document.querySelector( '#' + fragmentShaderId ).text;
vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource );
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, fragmentShader );
gl.linkProgram( program );
return program;
}

1949
Abgabe_6/normalMappingTODOs/common/objects3D.js Normal file
View File

File diff suppressed because it is too large Load Diff

170
Abgabe_6/normalMappingTODOs/index.html Normal file
View File

@ -0,0 +1,170 @@
<!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;
in vec3 vNormal;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 lightPosition;
uniform vec4 Ia;
uniform vec4 Id;
uniform vec4 Is;
uniform vec4 ka;
uniform vec4 kd;
uniform vec4 ks;
uniform float specExp;
const float c1 = 1.0;
const float c2 = 0.0005;
const float c3 = 0.000003;
out vec4 vfColor;
void main()
{
mat4 modelViewMatrix = viewMatrix * modelMatrix;
mat4 normalMatrix = inverse(transpose(modelViewMatrix));
vec4 position = modelViewMatrix * vPosition;
vec4 normal = normalMatrix * vec4(vNormal, 0.0);
vec4 lightPos = viewMatrix * vec4(lightPosition, 1.0);
vec3 N = normalize(normal.xyz);
vec3 L = normalize((lightPos - position).xyz);
vec3 V = normalize((-position).xyz);
vec3 R = reflect(-L, N);
float d = distance(lightPos, position);
float fAtt = min(1.0/(c1 + c2 * d + c3 * pow(d, 2.0)), 1.0);
vec4 I = Ia * ka
+ fAtt * (Id * kd * max(dot(N, L), 0.0)
+ Is * ks * pow(max(dot(R, V), 0.0), specExp));
vfColor = vec4(I.xyz, 1.0);
gl_Position = projectionMatrix * position;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in vec4 vfColor;
out vec4 fColor;
void main()
{
fColor = vfColor;
}
</script>
<script id="vertex-shader-water" type="x-shader/x-vertex">#version 300 es
in vec4 vPosition;
in vec3 vNormal;
in vec2 vTexCoord;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 lightPosition;
out vec4 positionCam;
out vec4 normalCam;
out vec4 lightPosCam;
out vec2 vfTexCoord;
void main()
{
mat4 modelViewMatrix = viewMatrix * modelMatrix;
mat4 normalMatrix = inverse(transpose(modelViewMatrix));
positionCam = modelViewMatrix * vPosition;
normalCam = normalMatrix * vec4(vNormal, 0.0);
lightPosCam = viewMatrix * vec4(lightPosition, 1.0);
gl_Position = projectionMatrix * positionCam;
vfTexCoord = vTexCoord;
}
</script>
<script id="fragment-shader-water" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in vec4 positionCam;
in vec4 normalCam;
in vec4 lightPosCam;
in vec2 vfTexCoord;
uniform vec4 Ia;
uniform vec4 Id;
uniform vec4 Is;
uniform vec4 ka;
uniform vec4 kd;
uniform vec4 ks;
uniform float specExp;
const float c1 = 1.0;
const float c2 = 0.0005;
const float c3 = 0.000003;
uniform sampler2D diffuseMap;
// TODO 1.2: Füge Normal Map als uniforme Variable hinzu.
out vec4 fColor;
void main()
{
// TODO 1.5: Berechne (normalisierte) Normale, Tangente und Binormale im Kameraraum
// TODO 1.6: Stelle TBN-Matrix zur Transformation vom Kamera- in den Tangentenraum auf.
// 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);
// Calculate and normalize L, V and R
vec3 L = normalize((lightPosCam - positionCam).xyz);
vec3 V = normalize((-positionCam).xyz);
vec3 R = reflect(-L, N);
float d = distance(lightPosCam, positionCam);
float fAtt = min(1.0/(c1 + c2 * d + c3 * pow(d, 2.0)), 1.0);
vec4 diffuseColor = texture(diffuseMap, vfTexCoord);
vec4 I = Ia * ka
+ fAtt * (Id * diffuseColor * max(dot(N, L), 0.0)
+ Is * ks * pow(max(dot(R, V), 0.0), specExp));
fColor = vec4(I.xyz, 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>

196
Abgabe_6/normalMappingTODOs/main.js Normal file
View File

@ -0,0 +1,196 @@
let gl;
let defaultProgram,
waterProgram;
let objects = [];
let viewMatrix,
projectionMatrix;
let eye,
target,
up;
let keyPressed = {
KeyW: false,
KeyA: false,
KeyS: 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');
// Configure viewport
gl.viewport(0,0,canvas.width,canvas.height);
gl.clearColor(0.75,0.8,1.0,1.0);
gl.enable(gl.DEPTH_TEST);
// Init shader program via additional function and bind it
defaultProgram = initShaders(gl, "vertex-shader", "fragment-shader");
waterProgram = initShaders(gl, "vertex-shader-water", "fragment-shader-water");
// Create object instances
let island = new Island();
objects.push(island);
let tree1 = new Tree();
tree1.SetModelMatrix([1.3, 0, 0.6], [0, 45, 0], [0.3, 0.3, 0.3]);
objects.push(tree1);
let tree2 = new Tree();
tree2.SetModelMatrix([0.9, 0, 0.3], [0, 33, 0], [0.45, 0.45, 0.45]);
objects.push(tree2);
let tree3 = new Tree();
tree3.SetModelMatrix([0.45, 0, 0.75], [0, 0, 0], [0.4, 0.4, 0.4]);
objects.push(tree3);
let tree4 = new Tree();
tree4.SetModelMatrix([-1.1, 0, 0.5], [0, 222, 0], [0.42, 0.42, 0.42]);
objects.push(tree4);
let tree5 = new Tree();
tree5.SetModelMatrix([-0.65, 0, 0.7], [0, 79, 0], [0.32, 0.32, 0.32]);
objects.push(tree5);
let cloud1 = new Cloud();
cloud1.SetModelMatrix([-0.4, 1, -0.9], [0, 0, 0], [0.32, 0.32, 0.32]);
objects.push(cloud1);
let cloud2 = new Cloud();
cloud2.SetModelMatrix([0, 1.4, -1.6], [0, -90, 0], [0.2, 0.2, 0.2]);
objects.push(cloud2);
let cloud3 = new Cloud();
cloud3.SetModelMatrix([0.7, 0.9, -0.8], [0, 100, 0], [0.25, 0.25, 0.25]);
objects.push(cloud3);
let river = new River();
river.SetModelMatrix([0, 0.04, 1.8], [0, 185, 0], [0.11, 0.11, 0.11]);
objects.push(river);
let sea = new Sea();
objects.push(sea);
// Compute view matrix
eye = vec3.fromValues(0.0, 0.3, 4.0);
target = vec3.fromValues(0.0, 0.3, 0.0);
up = vec3.fromValues(0.0, 1.0, 0.0);
viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, eye, target, up);
// Compute projection matrix
projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, Math.PI * 0.25, canvas.width / canvas.height, 0.5, 100);
for(let object of objects) {
gl.useProgram(object.shader);
// Set view and projection matrix
gl.uniformMatrix4fv(object.viewMatrixLoc, false, viewMatrix);
gl.uniformMatrix4fv(object.projectionMatrixLoc, false, projectionMatrix);
// Set position und intensity of the light source
gl.uniform3fv(object.lightPositionLoc, [1.0, 2.0, 1.0]);
gl.uniform4fv(object.IaLoc, [0.4, 0.4, 0.4, 1.0]);
gl.uniform4fv(object.IdLoc, [0.8, 0.8, 0.8, 1.0]);
gl.uniform4fv(object.IsLoc, [1.0, 1.0, 1.0, 1.0]);
}
document.addEventListener("keydown", keydown);
document.addEventListener("keyup", keyup);
document.addEventListener("mousemove", changeView);
canvas.onmousedown = function() {
canvas.requestPointerLock();
}
gameLoop();
};
function update()
{
let look = vec3.create();
vec3.sub(look, target, eye);
vec3.scale(look, look, speed);
if(keyPressed.KeyW) {
eye[0] += look[0];
eye[2] += look[2];
target[0] += look[0];
target[2] += look[2];
}
if(keyPressed.KeyS) {
eye[0] -= look[0];
eye[2] -= look[2];
target[0] -= look[0];
target[2] -= look[2];
}
if(keyPressed.KeyA) {
eye[0] += look[2];
eye[2] -= look[0];
target[0] += look[2];
target[2] -= look[0];
}
if(keyPressed.KeyD) {
eye[0] -= look[2];
eye[2] += look[0];
target[0] -= look[2];
target[2] += look[0];
}
mat4.lookAt(viewMatrix, eye, target, up);
for(let object of objects) {
gl.useProgram(object.shader);
gl.uniformMatrix4fv(object.viewMatrixLoc, false, viewMatrix);
}
}
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) {
object.Render();
};
}
function gameLoop()
{
update();
render();
requestAnimationFrame(gameLoop);
}
function keydown(e)
{
keyPressed[e.code] = true;
}
function keyup(e)
{
keyPressed[e.code] = false;
}
function changeView(e)
{
vec3.rotateY(target, target, eye, -e.movementX * speed);
mat4.lookAt(viewMatrix, eye, target, up);
for(let object of objects) {
gl.useProgram(object.shader);
gl.uniformMatrix4fv(object.viewMatrixLoc, false, viewMatrix);
}
}
main();

BIN
Abgabe_6/normalMappingTODOs/water_diffuse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
Abgabe_6/normalMappingTODOs/water_normal.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB