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

Uebung 07.12.23

Browse Source
This commit is contained in:
Julian Brammer 2023-12-07 13:48:19 +01:00
parent 27408aeed3
commit ff748e7326
7 changed files with 7710 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Uebung_06122023/Projektions Matrix.zip Normal file
View File

Binary file not shown.

5555
Uebung_06122023/Projektions Matrix/common/gl-matrix.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
Uebung_06122023/Projektions Matrix/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;
}

1847
Uebung_06122023/Projektions Matrix/common/objects3D.js Normal file
View File

File diff suppressed because it is too large Load Diff

50
Uebung_06122023/Projektions Matrix/index.html Normal file
View File

@ -0,0 +1,50 @@
<!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;
// TODO Nehme die Projektionsmatrix entgegen
uniform mat4 projMatrix;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
out vec4 vfColor;
void main()
{
// TODO bestimme mit der Projektionsmatrix die Vertexposition
gl_Position = projMatrix * viewMatrix * modelMatrix * vPosition;
}
</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 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>

211
Uebung_06122023/Projektions Matrix/main.js Normal file
View File

@ -0,0 +1,211 @@
let gl;
let program;
let objects = [];
let posLoc;
// DONE: Deklariere benötigte Locations von Shadervariablen als globale Variablen
let normalLoc,
lightPositionLoc,
IaLoc,
IdLoc,
IsLoc,
kaLoc,
kdLoc,
ksLoc,
specularExponentLoc;
let modelMatrixLoc;
let viewMatrixLoc,
viewMatrix;
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
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
// Get locations of shader variables
posLoc = gl.getAttribLocation(program, "vPosition");
modelMatrixLoc = gl.getUniformLocation(program, "modelMatrix");
viewMatrixLoc = gl.getUniformLocation(program, "viewMatrix");
normalLoc = gl.getAttribLocation(program, "vNormal");
// TODO bestimme die Uniform Position
projMatrixLoc = gl.getUniformLocation(program,"projMatrix");
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);
gl.uniformMatrix4fv(viewMatrixLoc, false, viewMatrix);
// TODO erstelle die Projektionsmatrix
projMatrix = mat4.create();
mat4.perspective(projMatrix, 90.0, 1.0, 0.0001, 1000.0);
// Kapitel Projektionen - Folie 57
projMatrix = [
0.617, 0 , 0 , 0,
0 , 0.617, 0 , 0,
0 , 0 , -1 , -1,
0 , 0 , -0.002, 0
]
// fovy zerrt/staucht horizontal und vertikal gleich
// mat4.ortho(projMatrix, -2, 2, -1, 1, 0.0001, 1000,0);
// left und right zerren oder stauchen den view in der Horizontalen und
// top bottom um die Vertikale.
// far und near machen bestimmt auch Dinge.
// TODO übergebe die Projektionsmatrix an den Vertexshader
gl.uniformMatrix4fv(projMatrixLoc, false, projMatrix);
document.addEventListener("keydown", keydown);
document.addEventListener("keyup", keyup);
document.addEventListener("mousemove", changeView);
canvas.onmousedown = function() {
canvas.requestPointerLock();
}
// 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);
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);
gl.uniformMatrix4fv(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);
gl.uniformMatrix4fv(viewMatrixLoc, false, viewMatrix);
}
main();

1
index.html
View File

@ -7,6 +7,7 @@
<a href="/Übung_23112023/">Übung_23112023/</a><br> <a href="/Übung_23112023/">Übung_23112023/</a><br>
<a href="/Übung_30112023/">Übung_30112023/</a><br> <a href="/Übung_30112023/">Übung_30112023/</a><br>
<a href="/Uebung_06122023/">Uebung_06122023/</a><br>
<a href="/Abgabe_3/">Abgabe_3/</a><br> <a href="/Abgabe_3/">Abgabe_3/</a><br>
<a href="/Abgabe_4/">Abgabe_4/</a><br> <a href="/Abgabe_4/">Abgabe_4/</a><br>