From b27ae9d1138adb158e43f8585c31d902558da09a Mon Sep 17 00:00:00 2001 From: Richard Geldreich Date: Thu, 19 Mar 2026 00:07:38 -0400 Subject: [PATCH] Mouse wheel now zooms in/out Adding View R,G,B buttons --- webgl/ktx2_encode_test/index.html | 67 ++++++++++++++++++++++++++---- webgl/ktx2_encode_test/renderer.js | 5 ++- 2 files changed, 64 insertions(+), 8 deletions(-) diff --git a/webgl/ktx2_encode_test/index.html b/webgl/ktx2_encode_test/index.html index 8b67f09..fe4de6f 100644 --- a/webgl/ktx2_encode_test/index.html +++ b/webgl/ktx2_encode_test/index.html @@ -1084,6 +1084,7 @@ function resetDrawSettings() { drawMode = 0; + updateViewModeButtons(); linearToSRGBFlag = false; elem('linear_to_srgb').innerText = linearToSRGBFlag ? 'Enabled' : 'Disabled'; @@ -1548,9 +1549,18 @@ } } - function alphaBlend() { drawMode = 0; redraw(); } - function viewRGB() { drawMode = 1; redraw(); } - function viewAlpha() { drawMode = 2; redraw(); } + function updateViewModeButtons() + { + var ids = ['btn-alpha-blend', 'btn-view-rgb', 'btn-view-alpha', 'btn-view-r', 'btn-view-g', 'btn-view-b']; + for (var i = 0; i < ids.length; i++) + elem(ids[i]).classList.toggle('active-btn', i === drawMode); + } + function alphaBlend() { drawMode = 0; updateViewModeButtons(); redraw(); } + function viewRGB() { drawMode = 1; updateViewModeButtons(); redraw(); } + function viewAlpha() { drawMode = 2; updateViewModeButtons(); redraw(); } + function viewR() { drawMode = 3; updateViewModeButtons(); redraw(); } + function viewG() { drawMode = 4; updateViewModeButtons(); redraw(); } + function viewB() { drawMode = 5; updateViewModeButtons(); redraw(); } function BC7ChromaFilterClicked() { @@ -2188,6 +2198,7 @@ function globalInit() { elem('SRGB').checked = true; + updateViewModeButtons(); var gl = elem('canvas').getContext('webgl'); checkForGPUFormatSupport(gl); @@ -2336,6 +2347,11 @@ cursor: grabbing; user-select: none; } + .active-btn { + background-color: #4a90d9; + color: white; + border-style: inset; + } /* IMPORTANT: do NOT scale the canvas with CSS; let JS size it 1:1 */ #canvas { display:block; image-rendering: pixelated; } @@ -2376,7 +2392,7 @@
- Basis Universal .KTX2 Supercompressed GPU Texture Encoding/Transcoding Testbed v2.16 + Basis Universal .KTX2 Supercompressed GPU Texture Encoding/Transcoding Testbed v2.17

This simple demo uses the Basis Universal C++ transcoder (compiled to WebAssembly using Emscripten) to transcode a .ktx2 file to: @@ -2564,9 +2580,12 @@ Display/Visualization Options:
- - - + + + + + +
@@ -3085,6 +3104,40 @@ document.addEventListener('DOMContentLoaded', () => { isDragging = false; viewer.classList.remove('dragging'); }); + // Wheel-to-zoom: scroll wheel zooms in/out, preserving the point under the cursor. + viewer.addEventListener('wheel', e => { + e.preventDefault(); + const slider = document.getElementById('display-zoom-slider'); + if (!slider) return; + + const oldSliderVal = parseInt(slider.value, 10); + const newSliderVal = e.deltaY < 0 + ? Math.min(oldSliderVal + 1, parseInt(slider.max, 10)) + : Math.max(oldSliderVal - 1, parseInt(slider.min, 10)); + + if (newSliderVal === oldSliderVal) return; + + const oldZoom = (oldSliderVal === 0) ? 0.5 : oldSliderVal; + const newZoom = (newSliderVal === 0) ? 0.5 : newSliderVal; + + // Mouse position relative to the viewer's top-left corner. + const rect = viewer.getBoundingClientRect(); + const mouseX = e.clientX - rect.left; + const mouseY = e.clientY - rect.top; + + // The texture-space coordinate currently under the cursor. + const texX = (viewer.scrollLeft + mouseX) / oldZoom; + const texY = (viewer.scrollTop + mouseY) / oldZoom; + + // Apply the zoom through the existing slider/function so all state stays in sync. + slider.value = newSliderVal; + updateDisplayZoom(newSliderVal); + + // Adjust scroll so the same texture-space point remains under the cursor. + viewer.scrollLeft = texX * newZoom - mouseX; + viewer.scrollTop = texY * newZoom - mouseY; + + }, { passive: false }); }); diff --git a/webgl/ktx2_encode_test/renderer.js b/webgl/ktx2_encode_test/renderer.js index cfd1b00..38b3a4d 100644 --- a/webgl/ktx2_encode_test/renderer.js +++ b/webgl/ktx2_encode_test/renderer.js @@ -239,7 +239,7 @@ Renderer.prototype.drawTexture = function (texture, width, height, mode, scale, var a = 1.0 / width; var b = 1.0 / height; - var c = 0; + var c = (mode >= 3) ? (mode - 2) : 0; // mode 3->1(R), 4->2(G), 5->3(B) var d = 0; gl.uniform4f(this.uniformLocations_.control2, a, b, c, d); @@ -318,6 +318,9 @@ Renderer.fragmentShaderSource_ = [ ' {', ' c.rgb = c.aaa; c.w = 1.0;', ' }', + ' if (control2.z == 1.0) { c.rgb = vec3(c.r); c.w = 1.0; }', + ' else if (control2.z == 2.0) { c.rgb = vec3(c.g); c.w = 1.0; }', + ' else if (control2.z == 3.0) { c.rgb = vec3(c.b); c.w = 1.0; }', ' if (control.w > 0.0)', ' c.rgb = linearToSrgb(c.rgb);', ' gl_FragColor = c;',