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

Formatting

Browse Source
This commit is contained in:
Julian Brammer 2023-11-30 22:22:17 +01:00
parent 352cab6abb
commit 7502ab9cdb
4 changed files with 133 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
Abgabe_4/lightTODOs/common/initShaders.js
View File

@ -2,45 +2,43 @@
// initShaders.js
//
function initShaders( gl, vertexShaderId, fragmentShaderId )
{
const compileShader = ( gl, gl_shaderType, shaderSource ) => {
// Create the shader
shader = gl.createShader( gl_shaderType );
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 );
// 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;
// Compile the shader to make it readable for the GPU
gl.compileShader(shader);
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource );
fragmentShader = compileShader( gl, gl.FRAGMENT_SHADER, fShaderSource );
if (!success) {
// Something went wrong during compilation; get the error
throw "could not compile shader:" + gl.getShaderInfoLog(shader);
} else {
return shader;
}
};
// Build the program
const program = gl.createProgram();
/*
* Setup shader program
*/
vShaderSource = document.querySelector("#" + vertexShaderId).text;
fShaderSource = document.querySelector("#" + fragmentShaderId).text;
// Attach shaders to it
gl.attachShader( program, vertexShader );
gl.attachShader( program, fragmentShader );
vertexShader = compileShader(gl, gl.VERTEX_SHADER, vShaderSource);
fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fShaderSource);
gl.linkProgram( program );
// Build the program
const program = gl.createProgram();
return program;
}
// Attach shaders to it
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
return program;
}

92
Abgabe_4/lightTODOs/common/objects3D.js
View File

@ -1,8 +1,10 @@
class Object3D {
// DONE: Füge Default-Materialkoeffizienten hinzu
constructor(ka = [0.5, 0.5, 0.5], kd = [0.5, 0.5, 0.5], ks = [0.5, 0.5, 0.5]) {
constructor(
ka = [0.5, 0.5, 0.5],
kd = [0.5, 0.5, 0.5],
ks = [0.5, 0.5, 0.5]
) {
this.posVBO = gl.createBuffer();
// DONE: Kein colorVBO mehr! (Farben werden über Materialkoeffizienten bestimmt)
this.indexVBO = gl.createBuffer();
@ -24,30 +26,58 @@ class Object3D {
}
InitBuffers() {
gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.positions), gl.STATIC_DRAW);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(this.positions),
gl.STATIC_DRAW
);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), gl.STATIC_DRAW);
gl.bufferData(
gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(this.indices),
gl.STATIC_DRAW
);
}
SetModelMatrix (position = this.position, orientation = this.orientation, scale = this.scale) {
SetModelMatrix(
position = this.position,
orientation = this.orientation,
scale = this.scale
) {
this.position = position;
this.orientation = [orientation[0] * Math.PI / 180, orientation[1] * Math.PI / 180, orientation[2] * Math.PI / 180]; // Convert the orientation to RAD
this.orientation = [
(orientation[0] * Math.PI) / 180,
(orientation[1] * Math.PI) / 180,
(orientation[2] * Math.PI) / 180,
]; // Convert the orientation to RAD
this.scale = scale;
this.modelMatrix = mat4.create();
mat4.translate(this.modelMatrix, this.modelMatrix, position);
mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[0], [1, 0, 0]);
mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[1], [0, 1, 0]);
mat4.rotate(this.modelMatrix, this.modelMatrix, this.orientation[2], [0, 0, 1]);
mat4.rotate(
this.modelMatrix,
this.modelMatrix,
this.orientation[0],
[1, 0, 0]
);
mat4.rotate(
this.modelMatrix,
this.modelMatrix,
this.orientation[1],
[0, 1, 0]
);
mat4.rotate(
this.modelMatrix,
this.modelMatrix,
this.orientation[2],
[0, 0, 1]
);
mat4.scale(this.modelMatrix, this.modelMatrix, scale);
}
UpdateUniforms () {
UpdateUniforms() {
gl.uniformMatrix4fv(modelMatrixLoc, false, this.modelMatrix);
// DONE: Übergebe Materialkoeffizienten des Objektes an den Shader
@ -58,12 +88,11 @@ class Object3D {
}
Render() {
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO);
gl.enableVertexAttribArray(posLoc);
gl.enableVertexAttribArray(normalLoc);
// DONE: Passe Stride-Wert an (vorletzter Parameter)
// DONE: Passe Stride-Wert an (vorletzter Parameter)
// -> Vertex-Position und -Normale werden abwechselnd gespeichert
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 2 * 3 * 4, 0);
gl.vertexAttribPointer(normalLoc, 3, gl.FLOAT, false, 2 * 3 * 4, 3 * 4);
@ -76,14 +105,13 @@ class Object3D {
}
}
asd;
class Island extends Object3D {
constructor() {
// DONE: Setze Material für Insel
super([0.4, 0.2, 0.0], [0.6, 0.3, 0.0], [0.7, 0.7, 0.7]);
//prettier-ignore
// DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender)
this.positions = [
-0.344503,-0.106899,-2.313329,-0.011310,-0.533934,-0.845450,
@ -591,6 +619,7 @@ class Island extends Object3D {
0.101020,0.922236,-0.839739,-0.591876,0.677685,0.436377
];
//prettier-ignore
this.indices = [
0,1,2,
3,4,5,
@ -767,7 +796,7 @@ class Island extends Object3D {
];
this.colors = [];
for(var i = 0; i < this.positions.length; i += 3) {
for (var i = 0; i < this.positions.length; i += 3) {
this.colors.push(0.5, 0.5, 0.5, 1);
}
@ -775,15 +804,13 @@ class Island extends Object3D {
}
}
class River extends Object3D {
constructor() {
// DONE: Setze Material für Fluss
super([0.0, 0.0, 0.5], [0, 0, 0.8], [0.9, 0.67, 0.2]);
// DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender)
//prettier-ignore
this.positions = [
0.0, 0.0, 14.0, 0, 1, 0, // index 0
1.0, 0.0, 12.5, 0, 1, 0, // index 1
@ -806,6 +833,7 @@ class River extends Object3D {
4.0, -6.0, 0.0, 0, 0, 1 // index 18 -> additional for waterfall
];
//prettier-ignore
this.indices = [
0, 1, 2,
1, 2, 3,
@ -830,15 +858,13 @@ class River extends Object3D {
}
}
class Tree extends Object3D {
constructor() {
// DONE: Setze Material für Baum
super([0.2, 0.5, 0.0], [0.4, 0.8, 0.2], [0.6, 0.9, 0.2]);
// DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender)
//prettier-ignore
this.positions = [
-0.056969,0.301313,0.059775,-0.999612,-0.027868,0.000000,
-0.056969,0.301313,-0.040876,-0.999612,-0.027868,0.000000,
@ -1320,6 +1346,7 @@ class Tree extends Object3D {
-0.079447,0.009962,0.074201,-0.864465,0.502693,0.000000
];
//prettier-ignore
this.indices = [
0,1,2,
3,4,5,
@ -1507,15 +1534,13 @@ class Tree extends Object3D {
}
}
class Cloud extends Object3D {
constructor() {
// DONE: Setze Material für Wolke
super([0.9, 0.9, 0.9], [0.9, 0.9, 0.9], [1.0, 1.0, 1.0]);
super([0.9, 0.9, 0.9], [0.9, 0.9, 0.9], [1.0, 1.0, 1.0]);
// DONE: Füge zu jedem Vertex Normale hinzu (bei PLY-Export in Blender)
//prettier-ignore
this.positions = [
-0.308265,-0.282990,-0.001417,-0.135946,-0.969316,0.204803,
0.101554,-0.243033,0.459730,-0.135946,-0.969316,0.204803,
@ -1759,6 +1784,7 @@ class Cloud extends Object3D {
-0.014225,0.327900,-0.747573,-0.020912,0.979982,-0.197984
];
//prettier-ignore
this.indices = [
0,1,2,
3,4,5,
@ -1844,4 +1870,4 @@ class Cloud extends Object3D {
this.InitBuffers();
}
}
}

34
Abgabe_4/lightTODOs/index.html
View File

@ -1,21 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8" />
<title>WebGL Example</title>
<script id="vertex-shader" type="x-shader/x-vertex">#version 300 es
<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;
@ -32,13 +33,13 @@
void main()
{
const mat4 projectionMatrix = mat4(
1.2071068286895752, 0, 0, 0,
0, 2.4142136573791504, 0, 0,
0, 0, -1.0100502967834473, -1,
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));
@ -46,7 +47,7 @@
// 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)
@ -57,13 +58,14 @@
// TODO: Berechne die Farbe vfColor anhand der Phong-Beleuchtungsgleichung
//vfColor = TODO;
vfColor = Ia * ka;
gl_Position = projectionMatrix * position;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
<script id="fragment-shader" type="x-shader/x-fragment">
#version 300 es
precision mediump float;
in vec3 vfColor;
out vec4 fColor;
@ -83,7 +85,7 @@
<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>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

57
Abgabe_4/lightTODOs/main.js
View File

@ -5,7 +5,7 @@ let objects = [];
let posLoc;
// DONE: Deklariere benötigte Locations von Shadervariablen als globale Variablen
// DONE: Deklariere benötigte Locations von Shadervariablen als globale Variablen
let normalLoc,
lightPositionLoc,
IaLoc,
@ -18,32 +18,27 @@ let normalLoc,
let modelMatrixLoc;
let viewMatrixLoc,
viewMatrix;
let viewMatrixLoc, viewMatrix;
let eye,
target,
up;
let eye, target, up;
let keyPressed = {
KeyW: false,
KeyA: false,
KeyS: false,
KeyD: 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');
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.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.75, 0.8, 1.0, 1.0);
gl.enable(gl.DEPTH_TEST);
@ -86,9 +81,9 @@ function main() {
document.addEventListener("keyup", keyup);
document.addEventListener("mousemove", changeView);
canvas.onmousedown = function() {
canvas.requestPointerLock();
}
canvas.onmousedown = function () {
canvas.requestPointerLock();
};
// Create object instances
let island = new Island();
@ -131,33 +126,32 @@ function main() {
objects.push(river);
gameLoop();
};
}
function update()
{
function update() {
let look = vec3.create();
vec3.sub(look, target, eye);
vec3.scale(look, look, speed);
if(keyPressed.KeyW) {
if (keyPressed.KeyW) {
eye[0] += look[0];
eye[2] += look[2];
target[0] += look[0];
target[2] += look[2];
}
if(keyPressed.KeyS) {
if (keyPressed.KeyS) {
eye[0] -= look[0];
eye[2] -= look[2];
target[0] -= look[0];
target[2] -= look[2];
}
if(keyPressed.KeyA) {
if (keyPressed.KeyA) {
eye[0] += look[2];
eye[2] -= look[0];
target[0] += look[2];
target[2] -= look[0];
}
if(keyPressed.KeyD) {
if (keyPressed.KeyD) {
eye[0] -= look[2];
eye[2] += look[0];
target[0] -= look[2];
@ -168,35 +162,30 @@ function update()
}
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) {
for (let object of objects) {
object.Render();
};
}
}
function gameLoop()
{
function gameLoop() {
update();
render();
requestAnimationFrame(gameLoop);
}
function keydown(e)
{
function keydown(e) {
keyPressed[e.code] = true;
}
function keyup(e)
{
function keyup(e) {
keyPressed[e.code] = false;
}
function changeView(e)
{
function changeView(e) {
vec3.rotateY(target, target, eye, -e.movementX * speed);
mat4.lookAt(viewMatrix, eye, target, up);
gl.uniformMatrix4fv(viewMatrixLoc, false, viewMatrix);