HSH
/
cg1-visualisations
mirror of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

some stuff

This commit is contained in:
Luca Conte 2025-04-24 17:39:38 +02:00
parent 64bf69ec71
commit 505aee8ecc
3 changed files with 97 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/script.js
View File

@ -7,6 +7,15 @@ let program;
let cubeVertices;
let cubeVertexBuffer;
let lineCubeVertices;
let lineCubeVertexBuffer;
let originVertices;
let originVertexBuffer;
let floorVertices;
let floorVertexBuffer;
let lastFrame = Date.now();
async function init() {
@ -72,37 +81,66 @@ async function init() {
1, -1, -1, 0.5, 1, 1
];
lineCubeVertices = [
1, 1, 1, 1, 0, 0,
1, 1, -1, 1, 0, 0,
1, 1, 1, 1, 0, 0,
1, -1, 1, 1, 0, 0,
1, 1, 1, 1, 0, 0,
-1, 1, 1, 1, 0, 0,
1, 1, -1, 1, 0, 0,
1, -1, -1, 1, 0, 0,
1, 1, -1, 1, 0, 0,
-1, 1, -1, 1, 0, 0,
1, -1, 1, 1, 0, 0,
1, -1, -1, 1, 0, 0,
1, -1, 1, 1, 0, 0,
-1, -1, 1, 1, 0, 0,
-1, 1, 1, 1, 0, 0,
-1, 1, -1, 1, 0, 0,
-1, 1, 1, 1, 0, 0,
-1, -1, 1, 1, 0, 0,
1, -1, -1, 1, 0, 0,
-1, -1, -1, 1, 0, 0,
-1, -1, 1, 1, 0, 0,
-1, -1, -1, 1, 0, 0,
-1, 1, -1, 1, 0, 0,
-1, -1, -1, 1, 0, 0,
];
originVertices = [
0, 0, 0, 1, 0, 0,
1, 0, 0, 1, 0, 0,
0, 0, 0, 0, 1, 0,
0, 1, 0, 0, 1, 0,
0, 0, 0, 0, 0, 1,
0, 0, 1, 0, 0, 1,
];
floorVertices = [
1, 0, 1, 0, 0, 0,
-1, 0, -1, 0, 0, 0,
-1, 0, 1, 0, 0, 0,
-1, 0, -1, 0, 0, 0,
1, 0, 1, 0, 0, 0,
1, 0, -1, 0, 0, 0,
];
cubeVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW);
// get location of vertPosition attribute
let positionAttribLocation = gl.getAttribLocation(program, "vertPosition");
let colorAttribLocation = gl.getAttribLocation(program, "vertColor");
lineCubeVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(lineCubeVertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(
positionAttribLocation, // which attribute is read
3, // number of values to read
gl.FLOAT, // type of values
gl.FALSE, // whether to normalize
6 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
0 // offset where to start reading
);
// enable attribute
gl.enableVertexAttribArray(positionAttribLocation);
originVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(originVertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(
colorAttribLocation, // which attribute is read
3, // number of values to read
gl.FLOAT, // type of values
gl.FALSE, // whether to normalize
6 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
3 * Float32Array.BYTES_PER_ELEMENT // offset where to start reading
);
gl.enableVertexAttribArray(colorAttribLocation);
floorVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, floorVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(floorVertices), gl.STATIC_DRAW);
// unbind buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
@ -116,6 +154,17 @@ async function init() {
requestAnimationFrame(draw);
}
function setAttribPointers() {
let positionAttribLocation = gl.getAttribLocation(program, "vertPosition");
let colorAttribLocation = gl.getAttribLocation(program, "vertColor");
gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, gl.FALSE, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.vertexAttribPointer(colorAttribLocation, 3, gl.FLOAT, gl.FALSE, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(positionAttribLocation);
gl.enableVertexAttribArray(colorAttribLocation);
}
let frameCount = 0;
let lastStatUpdate = Date.now();
@ -156,11 +205,11 @@ async function draw() {
let modelViewLocation = gl.getUniformLocation(program, "modelViewMatrix");
let projectionLocation = gl.getUniformLocation(program, "projectionMatrix");
let modelMatrix = [];
mat4Identity(modelMatrix);
mat4RotateX(modelMatrix, modelMatrix, hue * 2 * Math.PI);
mat4RotateY(modelMatrix, modelMatrix, hue * 2 * Math.PI);
let projectionMatrix = [];
mat4BuildPerspective(projectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 20);
gl.uniformMatrix4fv(projectionLocation, gl.FALSE, new Float32Array(projectionMatrix));
let viewMatrix = [];
let cameraPosition = [2, 2, 2];
@ -168,20 +217,35 @@ async function draw() {
let cameraUp = [0, 1, 0];
mat4BuildLookAt(viewMatrix, cameraPosition, cameraLookAt, cameraUp);
let modelMatrix = [];
mat4Identity(modelMatrix);
mat4RotateX(modelMatrix, modelMatrix, hue * 2 * Math.PI);
mat4RotateY(modelMatrix, modelMatrix, hue * 2 * Math.PI);
let modelViewMatrix = [];
mat4Multiply(modelViewMatrix, viewMatrix, modelMatrix);
gl.uniformMatrix4fv(modelViewLocation, gl.FALSE, new Float32Array(modelViewMatrix));
let projectionMatrix = [];
mat4BuildPerspective(projectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 20);
gl.uniformMatrix4fv(projectionLocation, gl.FALSE, new Float32Array(projectionMatrix));
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
setAttribPointers();
gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6);
gl.lineWidth(3);
gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
setAttribPointers();
gl.drawArrays(gl.LINES, 0, lineCubeVertices.length / 6);
gl.uniformMatrix4fv(modelViewLocation, gl.FALSE, new Float32Array(viewMatrix));
gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
setAttribPointers();
gl.drawArrays(gl.LINES, 0, originVertices.length / 6);
lastFrame = now;
requestAnimationFrame(draw);
}

0
src/shaders/floor-fragment.glsl Normal file
View File

0
src/shaders/floor-vertex.glsl Normal file
View File