HSH
/
cg1_tut_mdi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Merge branch 'visualisations' into prod

This commit is contained in:
Luca Conte 2025-04-27 16:48:35 +02:00
parent 5474bf85bb c4599824c6
commit 4a330360db
3 changed files with 81 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/index.html
View File

@ -8,68 +8,89 @@
<script src="shader.js"></script> <script src="shader.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
<style> <style>
body { :root {
display: flex; font-size: 20px;
flex-direction: column; }
justify-content: center;
align-items: center; html, body {
min-height: 100vh;
margin: 0; margin: 0;
height: 100%;
}
body {
padding: 1vw;
box-sizing: border-box;
background-color: #1e1e2e; background-color: #1e1e2e;
color: #cdd6f4; color: #cdd6f4;
font-family: monospace; font-family: monospace;
font-size: 20px; overflow: hidden;
gap: 20px; }
#display {
position: relative;
overflow: hidden;
box-sizing: border-box;
border-radius: 20px;
height: 100%;
width: 100%;
border: solid 2px #11111b;
} }
#cv { #cv {
position: relative;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
display: block;
background-color: #181825;
}
#stats, #controls {
position: absolute;
top: 20px;
padding: 20px;
display: block;
border: solid 2px #11111b; border: solid 2px #11111b;
background-color: #313244;
border-radius: 20px; border-radius: 20px;
} }
#content {
width: 100%; #stats {
max-width: 800px; right: 20px;
box-sizing: border-box; }
padding: 20px;
border: solid 2px #11111b; #controls {
border-radius: 20px; left: 20px;
background-color: #181825;
} }
</style> </style>
</head> </head>
<body> <body>
<canvas id="cv" width="1000" height="700"></canvas> <div id="display">
<div id="content"> <canvas id="cv"></canvas>
Stats: <div id="stats">
<ul> FPS: <span id="fps"></span> - <span id="ms"></span>
<li>FPS: <span id="fps"></span></li> </div>
<li>Frame time: <span id="ms"></span></li>
</ul>
Controls: <div id="controls">
<ul> <div>
<li>
Click & Drag to move camera Click & Drag to move camera
</li> </div>
<li> <div>
Scroll to zoom Scroll to zoom
</li> </div>
<li> <div>
LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off"> LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off">
</li> </div>
<li> <div>
Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes"> Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes">
<ul> <div style="margin-left: 20px;">Invert Z-Axis: <input type="checkbox" id="invertZAxis" checked autocomplete="off"></div>
<li>Invert Z-Axis: <input type="checkbox" id="invertZAxis" checked autocomplete="off"></li> </div>
</ul> <div>
</li>
<li>
Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off"> Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off">
</li> </div>
<li> <div>
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off"> Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
</li> </div>
</ul> </div>
</div> </div>
</body> </body>
</html> </html>

18
src/script.js
View File

@ -40,6 +40,13 @@ let smoothCameraDistance = 4;
let mouseDragging = false; let mouseDragging = false;
function resizeCanvas() {
const dpr = window.devicePixelRatio;
cv.width = cv.parentElement.clientWidth * dpr;
cv.height = cv.parentElement.clientHeight * dpr;
gl.viewport(0, 0, cv.width, cv.height);
}
async function init() { async function init() {
cv = document.getElementById("cv"); cv = document.getElementById("cv");
@ -49,6 +56,10 @@ async function init() {
window.alert("WebGL not supported"); window.alert("WebGL not supported");
} }
const resizeObserver = new ResizeObserver(resizeCanvas);
resizeObserver.observe(cv.parentElement);
resizeCanvas();
// input handling // input handling
document.getElementById("interpolateProjection").addEventListener("input", (e) => { document.getElementById("interpolateProjection").addEventListener("input", (e) => {
@ -114,7 +125,8 @@ async function init() {
cv.addEventListener("wheel", (e) => { cv.addEventListener("wheel", (e) => {
cameraDistance += e.deltaY / 100; cameraDistance += e.deltaY / 100;
if (cameraDistance < 1) cameraDistance = 1; if (cameraDistance < 1) cameraDistance = 1;
if (cameraDistance > 10) cameraDistance = 10; if (cameraDistance > 15) cameraDistance = 15;
e.preventDefault();
}); });
@ -577,7 +589,7 @@ async function draw() {
gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
setAttribPointers(); setAttribPointers();
if (displayMatricesVirtually && interpolateProjection < 0.01) { if (displayMatricesVirtually && interpolateProjection <= 0) {
gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6); gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6);
} }
@ -606,7 +618,7 @@ async function draw() {
// draw origin cube // draw origin cube
if (interpolateProjection < 0.99 && interpolateLookAt > 0.01) { if (interpolateProjection < 1 && interpolateLookAt > 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]);

8
src/shaders/vertex.glsl
View File

@ -14,10 +14,8 @@ uniform vec3 colorOverride;
varying vec3 fragColor; varying vec3 fragColor;
void main() { void main() {
if (colorOverride != vec3(0)) { float colorOverrideActive = step(0.001, length(colorOverride));
fragColor = colorOverride; fragColor = colorOverride * colorOverrideActive + vertColor * (1.0 - colorOverrideActive);
} else {
fragColor = vertColor;
}
gl_Position = realProjectionMatrix * realViewMatrix * virtualProjectionMatrix * virtualModelViewMatrix * vec4(vertPosition, 1.0); gl_Position = realProjectionMatrix * realViewMatrix * virtualProjectionMatrix * virtualModelViewMatrix * vec4(vertPosition, 1.0);
} }