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

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

@ -2,8 +2,7 @@
// initShaders.js
//
function initShaders( gl, vertexShaderId, fragmentShaderId )
{
function initShaders(gl, vertexShaderId, fragmentShaderId) {
const compileShader = (gl, gl_shaderType, shaderSource) => {
// Create the shader
shader = gl.createShader(gl_shaderType);
@ -18,17 +17,16 @@ function initShaders( gl, vertexShaderId, fragmentShaderId )
if (!success) {
// Something went wrong during compilation; get the error
throw "could not compile shader:" + gl.getShaderInfoLog(shader);
}
else {
} else {
return shader;
}
}
};
/*
* Setup shader program
*/
vShaderSource = document.querySelector( '#' + vertexShaderId ).text;
fShaderSource = document.querySelector( '#' + fragmentShaderId ).text;
vShaderSource = document.querySelector("#" + vertexShaderId).text;
fShaderSource = document.querySelector("#" + fragmentShaderId).text;
vertexShader = compileShader(gl, gl.VERTEX_SHADER, vShaderSource);
fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fShaderSource);

78
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() {
gl.uniformMatrix4fv(modelMatrixLoc, false, this.modelMatrix);
// DONE: Übergebe Materialkoeffizienten des Objektes an den Shader
@ -58,7 +88,6 @@ class Object3D {
}
Render() {
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO);
gl.enableVertexAttribArray(posLoc);
@ -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,
@ -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]);
// 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,

6
Abgabe_4/lightTODOs/index.html
View File

@ -4,7 +4,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
@ -61,7 +62,8 @@
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;

35
Abgabe_4/lightTODOs/main.js
View File

@ -18,28 +18,23 @@ 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');
gl = canvas.getContext("webgl2");
// Configure viewport
gl.viewport(0, 0, canvas.width, canvas.height);
@ -88,7 +83,7 @@ function main() {
canvas.onmousedown = function () {
canvas.requestPointerLock();
}
};
// Create object instances
let island = new Island();
@ -131,10 +126,9 @@ function main() {
objects.push(river);
gameLoop();
};
}
function update()
{
function update() {
let look = vec3.create();
vec3.sub(look, target, eye);
vec3.scale(look, look, speed);
@ -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) {
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);