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

Prepared Abgabe 4 and Übung

Browse Source
This commit is contained in:
Julian Brammer 2023-11-30 10:08:48 +01:00
parent cf77804e5e
commit 3042ffc241
12 changed files with 16679 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5555
Abgabe_4/lightTODOs/common/gl-matrix.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
Abgabe_4/lightTODOs/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
Abgabe_4/lightTODOs/common/objects3D.js Normal file
View File

File diff suppressed because it is too large Load Diff

77
Abgabe_4/lightTODOs/index.html Normal file
View File

@ -0,0 +1,77 @@
<!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;
// TODO: Nimm Normalen als Attribut entgegen
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
// TODO: Nimm die Position der Lichtquelle als Uniform-Variable entgegen
// TODO: Nimm alle Koeffizienten und Intensitäten, sowie den Exponenten als Uniform-Variablen entgegen
// TODO: Definiere alle Konstanten c_1, c_2, c_3
out vec3 vfColor;
void main()
{
const mat4 projectionMatrix = mat4(
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
// 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)
// TODO: Berechne die Distanz d, sowie f_{att}
// TODO: Berechne die Farbe vfColor anhand der Phong-Beleuchtungsgleichung
//vfColor = TODO;
gl_Position = projectionMatrix * position;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in vec3 vfColor;
out vec4 fColor;
void main()
{
// DONE: Umrechnung von vec3 in vec4
fColor = vec4(vfColor, 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>

205
Abgabe_4/lightTODOs/main.js Normal file
View File

@ -0,0 +1,205 @@
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");
// DONE: Fülle globale Variablen mit Speicherlocations für Materialkoeffizienten und Lichtintensitäten
normalLoc = gl.getAttribLocation(program, "vNormal");
lightPositionLoc = gl.getUniformLocation(program, "lightPosition");
IaLoc = gl.getUniformLocation(program, "Ia");
IdLoc = gl.getUniformLocation(program, "Id");
IsLoc = gl.getUniformLocation(program, "Is");
kaLoc = gl.getUniformLocation(program, "ka");
kdLoc = gl.getUniformLocation(program, "kd");
ksLoc = gl.getUniformLocation(program, "ks");
specularExponentLoc = gl.getUniformLocation(program, "specExp");
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);
// DONE: Setze Position und Intensitäten der Lichtquelle als Uniform-Variablen
gl.uniform3fv(lightPositionLoc, [1.0, 2.0, 1.0]);
gl.uniform3fv(IaLoc, [0.3, 0.3, 0.3]);
gl.uniform3fv(IdLoc, [0.8, 0.8, 0.8]);
gl.uniform3fv(IsLoc, [0.7, 0.7, 0.7]);
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();

2
index.html
View File

@ -6,8 +6,10 @@
<body> <body>
<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="/Abgabe_3/">Abgabe_3/</a><br> <a href="/Abgabe_3/">Abgabe_3/</a><br>
<a href="/Abgabe_4/">Abgabe_4/</a><br>
</body> </body>
</html> </html>

7861
Übung_30112023/Insel/common/glMatrix.js Normal file
View File

File diff suppressed because it is too large Load Diff

46
Übung_30112023/Insel/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;
}

437
Übung_30112023/Insel/common/objects3D.js Normal file
View File

@ -0,0 +1,437 @@
class Object3D
{
constructor()
{
this.posVBO = gl.createBuffer();
this.colorVBO = gl.createBuffer();
this.indexVBO = gl.createBuffer();
}
initBuffers()
{
// Create VBO for positions and activate it
gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO);
// Fill VBO with positions
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.positions), gl.STATIC_DRAW);
// Create VBO for colors and activate it
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorVBO);
// Fill VBO with colors
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colors), gl.STATIC_DRAW);
// Create VBO for indices and activate it
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
// Fill VBO with indices
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), gl.STATIC_DRAW);
}
render()
{
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, this.posVBO);
gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorVBO);
gl.enableVertexAttribArray(colorLoc);
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
// Render
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
}
}
class Cube extends Object3D
{
constructor()
{
super();
this.positions =
[
-1 , -1 , -1 , // index 0
-1 , -1 , 1 , // index 1
-1 , 1 , -1 , // index 2
-1 , 1 , 1 , // index 3
1 , -1 , -1 , // index 4
1 , -1 , 1 , // index 5
1 , 1 , -1 , // index 6
1 , 1 , 1 // index 7
];
this.indices =
[
1 , 7 , 3 , 1 , 5 , 7 , // Front
5 , 6 , 7 , 5 , 4 , 6 , // Right
4 , 2 , 0 , 4 , 6 , 2 , // Back
0 , 3 , 2 , 0 , 1 , 3 , // Left
0 , 5 , 1 , 0 , 4 , 5 , // Bottom
3 , 6 , 2 , 3 , 7 , 6 // Top
];
this.colors =
[
0 , 0 , 0 , 1 , // index 0
1 , 0 , 0 , 1 , // index 1
0 , 1 , 0 , 1 , // index 2
0 , 0 , 1 , 1 , // index 3
1 , 1 , 0 , 1 , // index 4
1 , 0 , 1 , 1 , // index 5
0 , 1 , 1 , 1 , // index 6
1 , 1 , 1 , 1 // index 7
];
this.initBuffers();
}
}
class Insel extends Object3D
{
constructor()
{
super();
this.positions =
[
-0.344503,-0.106899,-2.313329,
0.254658,0.065420,-2.430170,
0.506020,-0.293147,-2.207084,
1.415955,0.064912,-1.957500,
1.489208,-0.318759,-1.320762,
1.685851,0.084184,-1.268915,
2.014675,-0.126122,-0.782958,
0.957233,-1.089151,-0.905606,
0.454708,-1.256676,-0.897711,
0.810208,-0.709404,-1.141590,
0.739686,-1.249709,-0.541415,
0.231851,-1.904112,-0.621845,
0.052641,-1.633897,-0.758536,
-0.020753,-0.743329,-1.377161,
1.364762,-0.324582,0.647285,
2.074500,0.090083,0.068582,
1.608835,0.037777,0.559365,
1.955554,-0.191974,0.132568,
1.393132,0.037777,1.383312,
1.210661,-0.322174,1.134609,
0.514977,-0.286422,1.576757,
0.507135,-1.581211,0.348922,
0.342563,-2.052501,-0.027325,
0.620568,-1.491335,-0.146730,
0.745909,-0.723539,0.485115,
0.089439,-1.345612,0.360167,
1.089500,-0.770651,-0.314462,
-0.123718,-0.298339,1.611730,
-0.930959,0.037777,1.550149,
-0.866234,-0.291222,1.300128,
-0.414258,0.037777,1.808618,
-1.444312,-0.282136,0.794076,
-1.591571,0.097928,0.827036,
-1.839477,-0.177971,0.145553,
-0.936850,-0.751093,-0.176985,
-0.611777,-1.317411,-0.262516,
-0.326162,-1.310280,0.225784,
0.289486,-0.743127,0.679448,
0.020776,-1.770522,0.330532,
-1.675519,-0.336500,-0.606829,
-1.607249,0.010755,-1.680275,
-0.625318,-0.725192,-1.039731,
-2.011082,0.043485,-0.744422,
-1.247727,0.059337,-1.332687,
-0.934732,-0.314137,-1.943344,
-0.184171,-0.491687,-2.096484,
-0.707720,0.065178,-2.205832,
-0.350659,-1.373304,-0.758204,
-0.299529,-2.155551,-0.308846,
-0.086080,-2.478361,-0.004677,
0.091215,-2.267556,0.130842,
-0.260030,-2.240649,0.060849,
-0.470828,-1.954876,0.024811,
-0.278168,0.037777,-0.209083,
-0.914878,0.210568,-1.267986,
-0.862298,0.231412,-0.781910,
-0.302799,0.520691,-1.301783,
-1.068480,0.101026,-0.360536,
-1.736910,0.103204,0.106553,
0.236277,0.037777,0.701510,
0.656348,0.037777,-0.098120,
0.501631,0.037777,1.688231,
1.034499,0.275328,-1.269756,
0.471459,0.267036,-1.698558,
0.637660,0.376390,-1.207861,
0.812177,0.491673,-0.567514,
1.244986,0.398908,-0.324291,
1.002755,0.639249,-0.717163,
1.381545,0.288786,-0.765328,
1.348978,0.284964,-1.076072,
-0.505260,0.213488,-1.704558,
-0.221831,0.306144,-1.838428,
-0.274246,0.065420,-2.359878,
2.054775,0.091828,-0.677912,
-0.148262,0.773865,-0.947432,
0.101020,0.922236,-0.839739,
0.312442,0.779166,-1.109731,
-0.262315,0.721321,-1.533752,
-0.404757,0.197895,-0.782219,
0.568488,0.537125,-0.913448,
0.115069,0.760356,-1.450921,
-0.061115,0.654189,-0.643377,
0.205810,0.801703,-0.757537,
0.344937,0.262088,-0.492076,
0.077232,0.934717,-1.202342,
-0.102879,0.422805,-0.489015,
-0.269697,0.566033,-0.874217,
-0.186512,0.743264,-1.152426
];
this.indices =
[
0,1,2,
3,4,2,
5,6,4,
7,8,9,
8,10,11,
9,12,13,
14,15,16,
14,6,17,
6,15,17,
14,18,19,
18,20,19,
21,22,23,
24,25,21,
24,23,26,
27,28,29,
20,30,27,
28,31,29,
32,33,31,
34,35,36,
36,25,37,
36,38,25,
39,40,41,
40,42,43,
33,42,39,
40,44,41,
44,0,45,
40,46,44,
46,0,44,
41,12,47,
47,12,48,
41,35,34,
48,35,47,
48,11,49,
11,50,49,
50,51,49,
50,52,51,
51,48,49,
53,32,28,
54,55,56,
57,58,32,
59,16,60,
28,59,53,
59,61,18,
62,63,64,
65,66,67,
68,5,69,
70,43,54,
63,1,71,
71,72,46,
13,45,2,
9,4,7,
4,26,7,
26,14,24,
26,6,14,
19,37,24,
37,29,36,
29,34,36,
44,13,41,
2,1,3,
2,45,0,
0,72,1,
9,2,4,
3,5,4,
5,73,6,
7,10,8,
7,26,10,
9,8,12,
8,11,12,
14,17,15,
6,73,15,
14,16,18,
18,61,20,
24,21,23,
21,38,22,
24,37,25,
21,25,38,
26,23,10,
23,22,10,
27,30,28,
20,61,30,
28,32,31,
32,58,33,
36,35,52,
74,75,76,
36,52,38,
40,39,42,
33,58,42,
40,43,46,
46,72,0,
41,13,12,
41,47,35,
48,52,35,
48,12,11,
11,22,50,
11,10,22,
50,38,52,
22,38,50,
48,51,52,
53,57,32,
43,42,57,
57,42,58,
59,18,16,
28,30,59,
59,30,61,
5,62,69,
60,16,15,
66,73,68,
71,70,77,
63,3,1,
71,1,72,
13,2,9,
4,6,26,
14,19,24,
19,20,37,
37,27,29,
37,20,27,
29,31,34,
31,33,34,
34,39,41,
34,33,39,
44,45,13,
55,78,56,
59,60,53,
79,60,65,
77,56,80,
81,82,75,
82,76,75,
60,76,83,
76,80,84,
53,83,85,
86,74,87,
64,76,79,
74,84,87,
53,60,83,
78,85,86,
67,64,79,
67,79,65,
67,66,68,
67,69,62,
67,68,69,
60,66,65,
67,62,64,
62,3,63,
68,73,5,
5,3,62,
66,15,73,
79,76,60,
64,63,76,
60,15,66,
76,82,83,
85,82,81,
85,83,82,
74,85,81,
56,78,86,
56,87,84,
56,86,87,
56,84,80,
71,80,63,
53,55,57,
56,77,70,
56,70,54,
43,55,54,
70,46,43,
71,46,70,
76,63,80,
86,85,74,
74,76,84,
78,53,85,
71,77,80,
53,78,55,
43,57,55,
74,81,75
];
this.colors = [];
for(var i = 0; i < this.positions.length; i += 3)
{
this.colors.push(0.5, 0.5, 0.5, 1);
}
this.initBuffers();
}
}
class River extends Object3D
{
constructor()
{
super();
this.positions =
[
0.0, 0.0, 14.0, // index 0
0.75, 0.0, 12.5, // index 1
1.25, 0.0, 12.5, // index 2
1.0, 0.0, 11.0, // index 3
2.0, 0.0, 11.0, // index 4
0.75, 0.0, 9.5, // index 5
2.25, 0.0, 9.5, // index 6
0.0, 0.0, 8.0, // index 7
2.0, 0.0, 8.0, // index 8
-2.25, 0.0, 6.1875, // index 9
0.25, 0.0, 6.1875, // index 10
-3.0, 0.0, 4.0, // index 11
0.0, 0.0, 4.0, // index 12
-2.25, 0.0, 1.8125, // index 13
1.25, 0.0, 1.8125, // index 14
0.0, 0.0, 0.0, // index 15
4.0, 0.0, 0.0, // index 16
0.0, -7.0, 0.0, // index 17 -> additional for waterfall
4.0, -6.0, 0.0 // index 18 -> additional for waterfall
];
this.indices =
[
0, 1, 2,
1, 2, 3,
2, 3, 4,
3, 4, 5,
4, 5, 6,
5, 6, 7,
6, 7, 8,
7, 8, 9,
8, 9, 10,
9, 10, 11,
10, 11, 12,
11, 12, 13,
12, 13, 14,
13, 14, 15,
14, 15, 16,
15, 16, 17, // additional for waterfall
16, 17, 18 // additional for waterfall
];
this.colors = [];
for(var i = 0; i < this.positions.length; i += 3) {
this.colors.push(0.2, 0.2, 0.8, 1);
}
this.initBuffers();
}
}

69
Übung_30112023/Insel/index.html Normal file
View File

@ -0,0 +1,69 @@
<!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 vec4 vColor;
out vec4 vfColor;
const vec4 colorRed = vec4(1, 0, 0, 1);
uniform mat4 moveDown;
uniform mat4 viewMatrix;
void main()
{
/*
const mat4 viewMatrix = mat4(
0.1767766922712326, -0.0589255653321743, -0.013334667310118675, 0,
0, 0.2357022613286972, -0.006667333655059338, 0,
-0.1767766922712326, -0.0589255653321743, -0.013334667310118675, 0,
0, 0, -0.8801880478858948, 1);
*/
vfColor = vColor;
//vfColor = colorRed;
//gl_Position = vPosition;
gl_Position = viewMatrix * vPosition;
//gl_Position = moveDown * gl_Position;
if(gl_Position.y < 0.0)
{
vfColor = colorRed;
}
//gl_Position.y = gl_Position.y * 0.1;
//gl_Position.x = gl_Position.x * 0.5;
}
</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/objects3D.js"></script>
<script type="text/javascript" src="common/glMatrix.js"></script>
</head>
<body>
<h1>Lorem Ipsum</h1>
<canvas id="gl-canvas" width="512" height="512">
If you see this, your browser doesn't support WebGL.
</canvas>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

534
Übung_30112023/Insel/main.js Normal file
View File

@ -0,0 +1,534 @@
let gl;
let program;
let positions1,
positions2,
colors1,
colors2,
indices1,
indices2;
let posVBO1,
posVBO2,
colorVBO1,
colorVBO2,
indexVBO1,
indexVBO2;
let posLoc,
colorLoc;
let objects = [];
let lastTimestamp;
const {mat4, mat3, vec3} = glMatrix;
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(1.0,1.0,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");
colorLoc = gl.getAttribLocation(program, "vColor");
const moveLoc = gl.getUniformLocation(program, "moveDown");
transformMatrix = [
1, 0, 0, 0,
0, 1, 0, -0.2,
0, 0, 1, 0,
0, 0, 0, 1,
];
gl.uniformMatrix4fv(moveLoc, false, transformMatrix)
const viewLoc = gl.getUniformLocation(program, "viewMatrix");
/*
viewMatrix = [
0.1767766922712326, -0.0589255653321743, -0.013334667310118675, 0,
0, 0.2357022613286972, -0.006667333655059338, 0,
-0.1767766922712326, -0.0589255653321743, -0.013334667310118675, 0,
0, 0, -0.8801880478858948, 1
];
*/
viewMatrix = mat4.create();
projectionMatrix = mat4.create();
modelViewProjection = mat4.create();
mat4.perspective(projectionMatrix, 90.0, 1.0, 0.0001, 1000.0);
gl.uniformMatrix4fv(viewLoc, false, viewMatrix);
// Only clear once
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
objects.push(new Insel());
objects.push(new River());
//initListener();
window.requestAnimationFrame(render);
};
function initListener()
{
document.body.addEventListener('mousemove', printMouseMovement);
document.body.addEventListener('keydown', printKeyPress);
}
function printMouseMovement(e)
{
console.log('mousemoved');
}
function printKeyPress(e)
{
console.log(e.which);
}
function render(timestamp)
{
if(lastTimestamp == undefined)
{
lastTimestamp = timestamp;
}
const elapsed = timestamp - lastTimestamp;
let p = [3 * Math.sin(0.001 * timestamp), 1, 3 * Math.cos(0.001 * timestamp)];
mat4.lookAt(viewMatrix, p, [0, 0, 0], [0, 1, 0]);
mat4.multiply(modelViewProjection, projectionMatrix, viewMatrix);
viewLoc = gl.getUniformLocation(program, "viewMatrix");
gl.uniformMatrix4fv(viewLoc, false, modelViewProjection);
for (var i = 0; i < objects.length; i++)
{
objects[i].render();
}
window.requestAnimationFrame(render);
}
function init1() {
// Specify geometry
positions1 = [
-0.344503,-0.106899,-2.313329,
0.254658,0.065420,-2.430170,
0.506020,-0.293147,-2.207084,
1.415955,0.064912,-1.957500,
1.489208,-0.318759,-1.320762,
1.685851,0.084184,-1.268915,
2.014675,-0.126122,-0.782958,
0.957233,-1.089151,-0.905606,
0.454708,-1.256676,-0.897711,
0.810208,-0.709404,-1.141590,
0.739686,-1.249709,-0.541415,
0.231851,-1.904112,-0.621845,
0.052641,-1.633897,-0.758536,
-0.020753,-0.743329,-1.377161,
1.364762,-0.324582,0.647285,
2.074500,0.090083,0.068582,
1.608835,0.037777,0.559365,
1.955554,-0.191974,0.132568,
1.393132,0.037777,1.383312,
1.210661,-0.322174,1.134609,
0.514977,-0.286422,1.576757,
0.507135,-1.581211,0.348922,
0.342563,-2.052501,-0.027325,
0.620568,-1.491335,-0.146730,
0.745909,-0.723539,0.485115,
0.089439,-1.345612,0.360167,
1.089500,-0.770651,-0.314462,
-0.123718,-0.298339,1.611730,
-0.930959,0.037777,1.550149,
-0.866234,-0.291222,1.300128,
-0.414258,0.037777,1.808618,
-1.444312,-0.282136,0.794076,
-1.591571,0.097928,0.827036,
-1.839477,-0.177971,0.145553,
-0.936850,-0.751093,-0.176985,
-0.611777,-1.317411,-0.262516,
-0.326162,-1.310280,0.225784,
0.289486,-0.743127,0.679448,
0.020776,-1.770522,0.330532,
-1.675519,-0.336500,-0.606829,
-1.607249,0.010755,-1.680275,
-0.625318,-0.725192,-1.039731,
-2.011082,0.043485,-0.744422,
-1.247727,0.059337,-1.332687,
-0.934732,-0.314137,-1.943344,
-0.184171,-0.491687,-2.096484,
-0.707720,0.065178,-2.205832,
-0.350659,-1.373304,-0.758204,
-0.299529,-2.155551,-0.308846,
-0.086080,-2.478361,-0.004677,
0.091215,-2.267556,0.130842,
-0.260030,-2.240649,0.060849,
-0.470828,-1.954876,0.024811,
-0.278168,0.037777,-0.209083,
-0.914878,0.210568,-1.267986,
-0.862298,0.231412,-0.781910,
-0.302799,0.520691,-1.301783,
-1.068480,0.101026,-0.360536,
-1.736910,0.103204,0.106553,
0.236277,0.037777,0.701510,
0.656348,0.037777,-0.098120,
0.501631,0.037777,1.688231,
1.034499,0.275328,-1.269756,
0.471459,0.267036,-1.698558,
0.637660,0.376390,-1.207861,
0.812177,0.491673,-0.567514,
1.244986,0.398908,-0.324291,
1.002755,0.639249,-0.717163,
1.381545,0.288786,-0.765328,
1.348978,0.284964,-1.076072,
-0.505260,0.213488,-1.704558,
-0.221831,0.306144,-1.838428,
-0.274246,0.065420,-2.359878,
2.054775,0.091828,-0.677912,
-0.148262,0.773865,-0.947432,
0.101020,0.922236,-0.839739,
0.312442,0.779166,-1.109731,
-0.262315,0.721321,-1.533752,
-0.404757,0.197895,-0.782219,
0.568488,0.537125,-0.913448,
0.115069,0.760356,-1.450921,
-0.061115,0.654189,-0.643377,
0.205810,0.801703,-0.757537,
0.344937,0.262088,-0.492076,
0.077232,0.934717,-1.202342,
-0.102879,0.422805,-0.489015,
-0.269697,0.566033,-0.874217,
-0.186512,0.743264,-1.152426
];
indices1 = [
0,1,2,
3,4,2,
5,6,4,
7,8,9,
8,10,11,
9,12,13,
14,15,16,
14,6,17,
6,15,17,
14,18,19,
18,20,19,
21,22,23,
24,25,21,
24,23,26,
27,28,29,
20,30,27,
28,31,29,
32,33,31,
34,35,36,
36,25,37,
36,38,25,
39,40,41,
40,42,43,
33,42,39,
40,44,41,
44,0,45,
40,46,44,
46,0,44,
41,12,47,
47,12,48,
41,35,34,
48,35,47,
48,11,49,
11,50,49,
50,51,49,
50,52,51,
51,48,49,
53,32,28,
54,55,56,
57,58,32,
59,16,60,
28,59,53,
59,61,18,
62,63,64,
65,66,67,
68,5,69,
70,43,54,
63,1,71,
71,72,46,
13,45,2,
9,4,7,
4,26,7,
26,14,24,
26,6,14,
19,37,24,
37,29,36,
29,34,36,
44,13,41,
2,1,3,
2,45,0,
0,72,1,
9,2,4,
3,5,4,
5,73,6,
7,10,8,
7,26,10,
9,8,12,
8,11,12,
14,17,15,
6,73,15,
14,16,18,
18,61,20,
24,21,23,
21,38,22,
24,37,25,
21,25,38,
26,23,10,
23,22,10,
27,30,28,
20,61,30,
28,32,31,
32,58,33,
36,35,52,
74,75,76,
36,52,38,
40,39,42,
33,58,42,
40,43,46,
46,72,0,
41,13,12,
41,47,35,
48,52,35,
48,12,11,
11,22,50,
11,10,22,
50,38,52,
22,38,50,
48,51,52,
53,57,32,
43,42,57,
57,42,58,
59,18,16,
28,30,59,
59,30,61,
5,62,69,
60,16,15,
66,73,68,
71,70,77,
63,3,1,
71,1,72,
13,2,9,
4,6,26,
14,19,24,
19,20,37,
37,27,29,
37,20,27,
29,31,34,
31,33,34,
34,39,41,
34,33,39,
44,45,13,
55,78,56,
59,60,53,
79,60,65,
77,56,80,
81,82,75,
82,76,75,
60,76,83,
76,80,84,
53,83,85,
86,74,87,
64,76,79,
74,84,87,
53,60,83,
78,85,86,
67,64,79,
67,79,65,
67,66,68,
67,69,62,
67,68,69,
60,66,65,
67,62,64,
62,3,63,
68,73,5,
5,3,62,
66,15,73,
79,76,60,
64,63,76,
60,15,66,
76,82,83,
85,82,81,
85,83,82,
74,85,81,
56,78,86,
56,87,84,
56,86,87,
56,84,80,
71,80,63,
53,55,57,
56,77,70,
56,70,54,
43,55,54,
70,46,43,
71,46,70,
76,63,80,
86,85,74,
74,76,84,
78,53,85,
71,77,80,
53,78,55,
43,57,55,
74,81,75
];
colors1 = [];
for(var i = 0; i < positions1.length; i += 3) {
colors1.push(0.5, 0.5, 0.5, 1);
}
initBuffers1();
}
function initBuffers1() {
// Create VBO for positions and activate it
posVBO1 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posVBO1);
// Fill VBO with positions
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions1), gl.STATIC_DRAW);
// Create VBO for colors and activate it
colorVBO1 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO1);
// Fill VBO with colors
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors1), gl.STATIC_DRAW);
// Create VBO for indices and activate it
indexVBO1 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexVBO1);
// Fill VBO with indices
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices1), gl.STATIC_DRAW);
}
function render1() {
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, posVBO1);
gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO1);
gl.enableVertexAttribArray(colorLoc);
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
// Render
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexVBO1);
gl.drawElements(gl.TRIANGLES, indices1.length, gl.UNSIGNED_SHORT, 0);
}
function init2() {
// Specify geometry
positions2 = [
0.0, 0.0, 14.0, // index 0
0.75, 0.0, 12.5, // index 1
1.25, 0.0, 12.5, // index 2
1.0, 0.0, 11.0, // index 3
2.0, 0.0, 11.0, // index 4
0.75, 0.0, 9.5, // index 5
2.25, 0.0, 9.5, // index 6
0.0, 0.0, 8.0, // index 7
2.0, 0.0, 8.0, // index 8
-2.25, 0.0, 6.1875, // index 9
0.25, 0.0, 6.1875, // index 10
-3.0, 0.0, 4.0, // index 11
0.0, 0.0, 4.0, // index 12
-2.25, 0.0, 1.8125, // index 13
1.25, 0.0, 1.8125, // index 14
0.0, 0.0, 0.0, // index 15
4.0, 0.0, 0.0, // index 16
0.0, -7.0, 0.0, // index 17 -> additional for waterfall
4.0, -6.0, 0.0 // index 18 -> additional for waterfall
];
indices2 = [
0, 1, 2,
1, 2, 3,
2, 3, 4,
3, 4, 5,
4, 5, 6,
5, 6, 7,
6, 7, 8,
7, 8, 9,
8, 9, 10,
9, 10, 11,
10, 11, 12,
11, 12, 13,
12, 13, 14,
13, 14, 15,
14, 15, 16,
15, 16, 17, // additional for waterfall
16, 17, 18 // additional for waterfall
];
colors2 = [];
for(var i = 0; i < positions2.length; i += 3) {
colors2.push(0.2, 0.2, 0.8, 1);
}
initBuffers2();
}
function initBuffers2() {
// Create VBO for positions and activate it
posVBO2 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posVBO2);
// Fill VBO with positions
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions2), gl.STATIC_DRAW);
// Create VBO for colors and activate it
colorVBO2 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO2);
// Fill VBO with colors
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors2), gl.STATIC_DRAW);
// Create VBO for indices and activate it
indexVBO2 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexVBO2);
// Fill VBO with indices
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices2), gl.STATIC_DRAW);
}
function render2() {
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, posVBO2);
gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);
// Link data in VBO to shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO2);
gl.enableVertexAttribArray(colorLoc);
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
// Render
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexVBO2);
gl.drawElements(gl.TRIANGLES, indices2.length, gl.UNSIGNED_SHORT, 0);
}
main();

BIN
Übung_30112023/uebung-woche7.pdf Normal file
View File

Binary file not shown.