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

Merge branch 'prod' of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi into prod

This commit is contained in:
Luca Conte 2025-05-10 09:04:58 +00:00
parent 1758567ca5 6de0e709a4
commit da82987e60
4 changed files with 210 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
LICENSE.md Normal file
View File

@ -0,0 +1,25 @@
The MIT License (MIT)
=====================
Copyright © 2025 Luca Conte, Dennis Allerkamp
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the “Software”), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

79
src/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>CG1 MDI</title> <title>CG1 MDI</title>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="matrix-math.js"></script> <script src="matrix-math.js"></script>
<script src="shader.js"></script> <script src="shader.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
@ -50,7 +51,7 @@
padding: 20px; padding: 20px;
display: block; display: block;
border: solid 2px #11111b; border: solid 2px #11111b;
background-color: #313244; background-color: #31324480;
border-radius: 20px; border-radius: 20px;
} }
@ -61,28 +62,18 @@
#controls { #controls {
left: 20px; left: 20px;
} }
#interpolate {
width: 100%;
}
</style> </style>
</head> </head>
<body> <body>
<div id="display"> <div id="display">
<canvas id="cv"></canvas> <canvas id="cv"></canvas>
<div id="stats"> <div id="stats">
FPS: <span id="fps"></span> - <span id="ms"></span>
</div>
<div id="controls">
<div> <div>
Click & Drag to move camera FPS: <span id="fps"></span> - <span id="ms"></span>
</div>
<div>
Scroll to zoom
</div>
<div>
LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off">
</div>
<div>
Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes">
<div style="margin-left: 20px;">Invert Z-Axis: <input type="checkbox" id="invertZAxis" checked autocomplete="off"></div>
</div> </div>
<div> <div>
Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off"> Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off">
@ -91,6 +82,62 @@
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off"> Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
</div> </div>
</div> </div>
<div id="controls">
<div>
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & -1 & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
\frac{2}{r-l} & 0 & 0 & 0 \\
0 & \frac{2}{t-b} & 0 & 0 \\
0 & 0 & \frac{2}{f-n} & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
1 & 0 & 0 & - \frac{r+l}{2} \\
0 & 1 & 0 & - \frac{t+b}{2} \\
0 & 0 & 1 & \frac{n+f}{2} \\
0 & 0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & 1 + \frac{f}{n} & f \\
0 & 0 & - \frac{1}{n} & 0
\end{pmatrix}
\color{green}
\begin{pmatrix}
u_x & u_y & u_z & 0 \\
v_x & v_y & v_z & 0 \\
n_x & n_y & n_z & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
1 & 0 & 0 & -e_x \\
0 & 1 & 0 & -e_y \\
0 & 0 & 1 & -e_z \\
0 & 0 & 0 & 1
\end{pmatrix}
$$
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
<datalist id="steplist">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>
</div>
<div>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

63
src/matrix-math.js
View File

@ -173,6 +173,32 @@ function mat4BuildLookAt(out, eye, look, up) {
out[2] = n[0]; out[6] = n[1]; out[10] = n[2]; out[14] = t[2]; out[2] = n[0]; out[6] = n[1]; out[10] = n[2]; out[14] = t[2];
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1; out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
} }
function mat4BuildLookAt1(out, eye, look, up) {
out[0] = 1; out[4] = 0; out[8] = 0; out[12] = -eye[0];
out[1] = 0; out[5] = 1; out[9] = 0; out[13] = -eye[1];
out[2] = 0; out[6] = 0; out[10] = 1; out[14] = -eye[2];
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
}
function mat4BuildLookAt2(out, eye, look, up) {
let n = [];
let u = [];
let v = [];
vec3Subtract(n, eye, look);
vec3CrossProduct(u, up, n);
vec3CrossProduct(v, n, u);
vec3Normalise(n, n);
vec3Normalise(u, u);
vec3Normalise(v, v);
out[0] = u[0]; out[4] = u[1]; out[8] = u[2]; out[12] = 0;
out[1] = v[0]; out[5] = v[1]; out[9] = v[2]; out[13] = 0;
out[2] = n[0]; out[6] = n[1]; out[10] = n[2]; out[14] = 0;
out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
}
/** /**
* builds a projection matrix, overwriting out * builds a projection matrix, overwriting out
@ -209,6 +235,43 @@ function mat4BuildPerspective(out, fovy, aspect, n, f) {
mat4BuildProjection(out, r, l, t, b, n, f); mat4BuildProjection(out, r, l, t, b, n, f);
} }
function mat4BuildPerspective1(out, fovy, aspect, n, f) {
mat4Identity(out);
out[10] = 1.0 + f / n;
out[11] = -1.0 / n;
out[14] = f;
out[15] = 0.0;
}
function mat4BuildPerspective2(out, fovy, aspect, n, f) {
let t = n * Math.tan(0.5 * fovy);
let b = -t;
let r = aspect * t;
let l = -r;
mat4Identity(out);
out[12] = -(r + l) / 2.0;
out[13] = -(t + b) / 2.0;
out[14] = (f + n) / 2.0;
}
function mat4BuildPerspective3(out, fovy, aspect, n, f) {
let t = n * Math.tan(0.5 * fovy);
let b = -t;
let r = aspect * t;
let l = -r;
mat4Identity(out);
out[0] = 2.0 / (r - l);
out[5] = 2.0 / (t - b);
out[10] = 2.0 / (f - n);
}
function mat4BuildPerspective4(out, fovy, aspect, n, f) {
mat4Identity(out);
out[10] = -1.0;
}
/** /**
* linearly interpolates between a and b, storing the result in out * linearly interpolates between a and b, storing the result in out

91
src/script.js
View File

@ -25,8 +25,8 @@ let cameraVertexBuffer;
let lastFrame = Date.now(); let lastFrame = Date.now();
let interpolateProjection = 0; let t = 0.0;
let interpolateLookAt = 0; let interpolate = [0, 0, 0, 0, 0, 0];
let displayMatricesVirtually = true; let displayMatricesVirtually = true;
let virtualRealInterpolation = 1; let virtualRealInterpolation = 1;
@ -64,34 +64,31 @@ async function init() {
// input handling // input handling
document.getElementById("interpolateProjection").addEventListener("input", (e) => { document.getElementById("interpolate").addEventListener("input", (e) => {
interpolateProjection = e.target.value; t = 6.0 - e.target.value;
if (interpolateProjection <= 0) { if (t <= 2.0) {
document.getElementById("interpolateLookAt").disabled = ""; invertZAxis = false;
} else {
document.getElementById("interpolateLookAt").disabled = "yes";
} }
}); else if (t <= 5.0) {
document.getElementById("invertZAxis").addEventListener("input", (e) => { invertZAxis = false;
invertZAxis = e.target.checked; }
}); else {
document.getElementById("interpolateLookAt").addEventListener("input", (e) => { invertZAxis = true;
interpolateLookAt = e.target.value; }
if (interpolateLookAt >= 1) { for (let i = 0; i < 6; ++i) {
document.getElementById("interpolateProjection").disabled = ""; if (i > t) {
} else { interpolate[i] = 0.0;
document.getElementById("interpolateProjection").disabled = "yes"; }
else if (i+1 > t) {
interpolate[i] = t - Math.floor(t);
}
else {
interpolate[i] = 1.0;
}
} }
}); });
document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
displayMatricesVirtually = e.target.checked; displayMatricesVirtually = e.target.checked;
if (!displayMatricesVirtually) {
document.getElementById("invertZAxis").checked = true;
document.getElementById("invertZAxis").disabled = true;
} else {
document.getElementById("invertZAxis").checked = invertZAxis;
document.getElementById("invertZAxis").disabled = false;
}
}); });
document.getElementById("backfaceCulling").addEventListener("input", (e) => { document.getElementById("backfaceCulling").addEventListener("input", (e) => {
if (e.target.checked) { if (e.target.checked) {
@ -413,6 +410,7 @@ async function init() {
gl.enable( gl.POLYGON_SMOOTH ); gl.enable( gl.POLYGON_SMOOTH );
gl.hint( gl.LINE_SMOOTH_HINT, gl.NICEST ); gl.hint( gl.LINE_SMOOTH_HINT, gl.NICEST );
gl.hint( gl.POLYGON_SMOOTH_HINT, gl.NICEST ) gl.hint( gl.POLYGON_SMOOTH_HINT, gl.NICEST )
gl.lineWidth(3.0);
// start drawing // start drawing
requestAnimationFrame(draw); requestAnimationFrame(draw);
@ -483,7 +481,7 @@ async function draw() {
// Real Matrices // Real Matrices
let realProjectionMatrix = []; let realProjectionMatrix = [];
mat4BuildPerspective(realProjectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 30); mat4BuildPerspective(realProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 30);
let realViewMatrix = []; let realViewMatrix = [];
let realCameraPosition = [Math.cos(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch), Math.sin(cameraPitch) * smoothCameraDistance, Math.sin(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch)]; let realCameraPosition = [Math.cos(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch), Math.sin(cameraPitch) * smoothCameraDistance, Math.sin(cameraYaw) * smoothCameraDistance * Math.cos(cameraPitch)];
@ -509,7 +507,7 @@ async function draw() {
let virtualProjectionMatrix = []; let virtualProjectionMatrix = [];
mat4BuildPerspective(virtualProjectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
if (!invertZAxis) { if (!invertZAxis) {
let zAxisFlipMatrix = []; let zAxisFlipMatrix = [];
@ -531,8 +529,34 @@ async function draw() {
let inverseVirtualViewMatrix = []; let inverseVirtualViewMatrix = [];
mat4Inverse(inverseVirtualViewMatrix, virtualViewMatrix); mat4Inverse(inverseVirtualViewMatrix, virtualViewMatrix);
mat4Interpolate(virtualProjectionMatrix, identity, virtualProjectionMatrix, interpolateProjection); // interpolated view matrix
mat4Interpolate(virtualViewMatrix, identity, virtualViewMatrix, interpolateLookAt); let virtualViewMatrix1 = [];
mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, interpolate[0]);
let virtualViewMatrix2 = [];
mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, interpolate[1]);
mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1);
// interpolated projection matrix
let virtualProjectionMatrix1 = [];
mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, interpolate[2]);
let virtualProjectionMatrix2 = [];
mat4BuildPerspective2(virtualProjectionMatrix2, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, interpolate[3]);
let virtualProjectionMatrix3 = [];
mat4BuildPerspective3(virtualProjectionMatrix3, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, interpolate[4]);
mat4Identity(virtualProjectionMatrix);
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix3);
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix2);
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix, virtualProjectionMatrix1);
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(virtualProjectionMatrix)); gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(virtualProjectionMatrix));
@ -600,7 +624,7 @@ async function draw() {
gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
setAttribPointers(); setAttribPointers();
if (displayMatricesVirtually && interpolateProjection <= 0) { if (displayMatricesVirtually && t <= 2.0) {
gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6); gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6);
} }
@ -619,8 +643,11 @@ async function draw() {
// draw origin // draw origin
let originMatrix = [];
mat4BuildPerspective4(originMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(originMatrix, identity, originMatrix, interpolate[5]);
gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(identity)); gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(originMatrix));
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity)); gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity));
gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
@ -629,7 +656,7 @@ async function draw() {
// draw origin cube // draw origin cube
if (interpolateProjection < 1 && interpolateLookAt > 0) { if (t != 0.0 && t < 5.0) {
gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
setAttribPointers(); setAttribPointers();
gl.uniform3fv(colorOverrideLocation, [1, 0, 0]); gl.uniform3fv(colorOverrideLocation, [1, 0, 0]);