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: - +
- Controls: -
+
Scroll to zoom - -
  • +
    • +
    LookAt Matrix: - -
  • +
    • +
    Projection Matrix: - - -
  • +
    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..9d5113d 100644 --- a/src/script.js +++ b/src/script.js @@ -40,6 +40,13 @@ let smoothCameraDistance = 4; 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() { cv = document.getElementById("cv"); @@ -49,6 +56,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 +125,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(); }); @@ -577,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); } @@ -606,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]); 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