From 0c3f1577ce3638763a13d0fcb52b7eb142fb6699 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Sun, 27 Apr 2025 16:08:11 +0200 Subject: [PATCH 1/4] optimise color override --- src/shaders/vertex.glsl | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/shaders/vertex.glsl b/src/shaders/vertex.glsl index 49dc12b..fd4a97c 100644 --- a/src/shaders/vertex.glsl +++ b/src/shaders/vertex.glsl @@ -14,10 +14,8 @@ uniform vec3 colorOverride; varying vec3 fragColor; void main() { - if (colorOverride != vec3(0)) { - fragColor = colorOverride; - } else { - fragColor = vertColor; - } + float colorOverrideActive = step(0.001, length(colorOverride)); + fragColor = colorOverride * colorOverrideActive + vertColor * (1.0 - colorOverrideActive); + gl_Position = realProjectionMatrix * realViewMatrix * virtualProjectionMatrix * virtualModelViewMatrix * vec4(vertPosition, 1.0); } \ No newline at end of file From 57b6851c8d7914916389654f1b9b9d87c8ee5163 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Sun, 27 Apr 2025 16:15:03 +0200 Subject: [PATCH 2/4] fullscreen --- src/index.html | 105 +++++++++++++++++++++++++++++-------------------- src/script.js | 13 +++++- 2 files changed, 75 insertions(+), 43 deletions(-) diff --git a/src/index.html b/src/index.html index 294c3ea..7e7b32d 100644 --- a/src/index.html +++ b/src/index.html @@ -8,68 +8,89 @@ - -
- Stats: -
    -
  • FPS:
    • -
  • Frame time:
    • -
+
+ +
+ FPS: - +
- Controls: -
    -
  • +
    +
    Click & Drag to move camera -
    • -
  • +
+
Scroll to zoom - -
  • +
    • +
    LookAt Matrix: - -
  • +
    • +
    Projection Matrix: -
      -
    • Invert Z-Axis:
      • -
    - -
  • +
    Invert Z-Axis:
    +
    • +
    Use virtual camera: - -
  • +
    • +
    Backface Culling: - - - +
    +
    \ No newline at end of file diff --git a/src/script.js b/src/script.js index e059098..13afb8e 100644 --- a/src/script.js +++ b/src/script.js @@ -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(); }); From 2d7fb37165b926f7191a453149971723e61fdc07 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Sun, 27 Apr 2025 16:48:09 +0200 Subject: [PATCH 3/4] consider device pixel density --- src/script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/script.js b/src/script.js index 13afb8e..185e6c0 100644 --- a/src/script.js +++ b/src/script.js @@ -41,8 +41,9 @@ let smoothCameraDistance = 4; let mouseDragging = false; function resizeCanvas() { - cv.width = cv.parentElement.clientWidth; - cv.height = cv.parentElement.clientHeight; + const dpr = window.devicePixelRatio; + cv.width = cv.parentElement.clientWidth * dpr; + cv.height = cv.parentElement.clientHeight * dpr; gl.viewport(0, 0, cv.width, cv.height); } From c4599824c6118e7f017fcc971143cdf48cc90840 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Sun, 27 Apr 2025 16:48:29 +0200 Subject: [PATCH 4/4] adjust origin cube and camera drawing thresholds --- src/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/script.js b/src/script.js index 185e6c0..9d5113d 100644 --- a/src/script.js +++ b/src/script.js @@ -589,7 +589,7 @@ async function draw() { gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer); setAttribPointers(); - if (displayMatricesVirtually && interpolateProjection < 0.01) { + if (displayMatricesVirtually && interpolateProjection <= 0) { gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6); } @@ -618,7 +618,7 @@ async function draw() { // draw origin cube - if (interpolateProjection < 0.99 && interpolateLookAt > 0.01) { + if (interpolateProjection < 1 && interpolateLookAt > 0) { gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); setAttribPointers(); gl.uniform3fv(colorOverrideLocation, [1, 0, 0]);