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

fullscreen

This commit is contained in:
Luca Conte 2025-04-27 16:15:03 +02:00
parent 0c3f1577ce
commit 57b6851c8d
2 changed files with 75 additions and 43 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="script.js"></script>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
:root {
font-size: 20px;
}
html, body {
margin: 0;
height: 100%;
}
body {
padding: 1vw;
box-sizing: border-box;
background-color: #1e1e2e;
color: #cdd6f4;
font-family: monospace;
font-size: 20px;
gap: 20px;
overflow: hidden;
}
#display {
position: relative;
overflow: hidden;
box-sizing: border-box;
border-radius: 20px;
height: 100%;
width: 100%;
border: solid 2px #11111b;
}
#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;
background-color: #313244;
border-radius: 20px;
}
#content {
width: 100%;
max-width: 800px;
box-sizing: border-box;
padding: 20px;
border: solid 2px #11111b;
border-radius: 20px;
background-color: #181825;
#stats {
right: 20px;
}
#controls {
left: 20px;
}
</style>
</head>
<body>
<canvas id="cv" width="1000" height="700"></canvas>
<div id="content">
Stats:
<ul>
<li>FPS: <span id="fps"></span></li>
<li>Frame time: <span id="ms"></span></li>
</ul>
<div id="display">
<canvas id="cv"></canvas>
<div id="stats">
FPS: <span id="fps"></span> - <span id="ms"></span>
</div>
Controls:
<ul>
<li>
<div id="controls">
<div>
Click & Drag to move camera
</li>
<li>
</div>
<div>
Scroll to zoom
</li>
<li>
</div>
<div>
LookAt Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateLookAt" autocomplete="off">
</li>
<li>
</div>
<div>
Projection Matrix: <input type="range" min=0 max=1 step=0.01 value=0 id="interpolateProjection" autocomplete="off" disabled="yes">
<ul>
<li>Invert Z-Axis: <input type="checkbox" id="invertZAxis" checked autocomplete="off"></li>
</ul>
</li>
<li>
<div style="margin-left: 20px;">Invert Z-Axis: <input type="checkbox" id="invertZAxis" checked autocomplete="off"></div>
</div>
<div>
Use virtual camera: <input type="checkbox" id="displayMatricesVirtually" checked autocomplete="off">
</li>
<li>
</div>
<div>
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

13
src/script.js
View File

@ -40,6 +40,12 @@ let smoothCameraDistance = 4;
let mouseDragging = false;
function resizeCanvas() {
cv.width = cv.parentElement.clientWidth;
cv.height = cv.parentElement.clientHeight;
gl.viewport(0, 0, cv.width, cv.height);
}
async function init() {
cv = document.getElementById("cv");
@ -49,6 +55,10 @@ async function init() {
window.alert("WebGL not supported");
}
const resizeObserver = new ResizeObserver(resizeCanvas);
resizeObserver.observe(cv.parentElement);
resizeCanvas();
// input handling
document.getElementById("interpolateProjection").addEventListener("input", (e) => {
@ -114,7 +124,8 @@ async function init() {
cv.addEventListener("wheel", (e) => {
cameraDistance += e.deltaY / 100;
if (cameraDistance < 1) cameraDistance = 1;
if (cameraDistance > 10) cameraDistance = 10;
if (cameraDistance > 15) cameraDistance = 15;
e.preventDefault();
});