flowchart TD
subgraph CPU["CPU / UI"]
Upload["Upload image"] --> Texture["Create WebGL texture"]
Drag["Drag vertices A, B0, B1, B2"] --> Uniforms["Update uniforms"]
Sliders["Camera / h / spin / zoom"] --> Uniforms
end
subgraph GPU["GPU / Fragment shader - inverse mapping"]
Quad["Full-screen quad"] --> Ray["Per-pixel camera ray"]
Ray --> Hit{"Closest valid hit"}
Hit -->|Table plane z=0, masked when h nonzero| PlaneUV["UV from hit XY"]
Hit -->|Pyramid faces, 3 triangles| FaceUV["UV from hit XY"]
PlaneUV --> Sample["Sample image texture"]
FaceUV --> Sample
Sample --> Shade["Face shading + optional overlay"]
Shade --> Out["gl_FragColor"]
end
Texture --> Quad
Uniforms --> Quad
Out --> Export["Export PNG (grid hidden)"]
Mermaid diagram supports pan/zoom (mouse wheel + drag).
Geometry: base triangle (B0/B1/B2) on table, apex A at height h.
h=0 → flat (identity) | h>0 → convex | h<0 → concave