From 159ca2ca19345515cdfebed9fd88646730492cd2 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Sun, 22 Mar 2026 16:21:25 +0100
Subject: feat(cnn_v3): add G-buffer visualizer + web sample loader (Phase 7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

C++ GBufViewEffect: renders all 20 feature channels from feat_tex0/feat_tex1
in a 4×5 tiled grid. Custom BGL with WGPUTextureSampleType_Uint; bind group
rebuilt per frame via wgpuRenderPipelineGetBindGroupLayout.

Web tool: "Load sample directory" button — webkitdirectory picker, FULL_PACK_SHADER
compute (matches gbuf_pack.wgsl packing), runFromFeat() skips photo-pack step,
computePSNR() readback + comparison vs target.png side-by-side.

36/36 tests pass. Docs updated: HOWTO.md §9, README, PROJECT_CONTEXT, TODO,
COMPLETED.

handoff(Gemini): CNN v3 Phase 7 done. Next: run train_cnn_v3.py (see HOWTO §3).
---
 cnn_v3/tools/index.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'cnn_v3/tools/index.html')

diff --git a/cnn_v3/tools/index.html b/cnn_v3/tools/index.html
index 8494fef..1398ca5 100644
--- a/cnn_v3/tools/index.html
+++ b/cnn_v3/tools/index.html
@@ -64,6 +64,7 @@ video{display:none}
   <div class="left">
     <input type="file" id="wFile"  accept=".bin" style="display:none">
     <input type="file" id="fFile"  accept=".bin" style="display:none">
+    <input type="file" id="sFile"  webkitdirectory style="display:none" onchange="tester.loadSampleDir(this.files)">
 
     <div class="dz" id="wDrop"  onclick="document.getElementById('wFile').click()">Drop cnn_v3_weights.bin</div>
     <div class="dz" id="fDrop"  onclick="document.getElementById('fFile').click()">Drop cnn_v3_film_mlp.bin (optional)</div>
@@ -79,6 +80,10 @@ video{display:none}
         <div id="fullHelp" style="display:none;margin-top:6px;font-size:9px;color:#555;line-height:1.6">
           Drop PNGs: *albedo*/color · *normal* · *depth* · *matid*/index · *shadow* · *transp*/alpha
         </div>
+        <div style="margin-top:8px;border-top:1px solid #333;padding-top:8px">
+          <button onclick="document.getElementById('sFile').click()" style="width:100%">↑ Load sample directory</button>
+          <div id="sampleSt" style="font-size:9px;color:#555;margin-top:3px"></div>
+        </div>
       </div>
     </div>
 
@@ -121,7 +126,17 @@ video{display:none}
       <div class="sep"></div>
       <button onclick="tester.savePNG()">Save PNG</button>
     </div>
-    <canvas id="canvas"></canvas>
+    <div style="display:flex;gap:12px;align-items:flex-start">
+      <div style="display:flex;flex-direction:column;align-items:center;gap:3px">
+        <canvas id="canvas"></canvas>
+        <span id="cnnLabel" style="font-size:9px;color:#555"></span>
+      </div>
+      <div id="targetPane" style="display:none;flex-direction:column;align-items:center;gap:3px">
+        <canvas id="targetCanvas" style="max-width:100%;max-height:100%;image-rendering:pixelated;box-shadow:0 4px 12px rgba(0,0,0,.5)"></canvas>
+        <span style="font-size:9px;color:#555">target.png</span>
+        <span id="psnrSt" style="font-size:9px;color:#4a9eff"></span>
+      </div>
+    </div>
   </div>
 
   <div class="right">
-- 
cgit v1.2.3