14
Reverse-engineering a WebGL site

Santioni

A study of santionispirits.com — a 100% WebGL experience — rebuilt at two fidelity tiers.

GLSLTypeScript webglnextjsstudy
click to turn
A shader, running

Live WebGL. The chapter is about shaders, so this one is real rather than a screenshot.

Why it couldn’t just be cloned

The target’s body holds a single canvas tag and a 2 MB bundle rendering 18 named scenes. Ditto, a DOM-and-CSS cloner, returned three nodes and a page reading “Your browser is not supported” — its headless Chrome has no GPU, and the site hard-redirects on GPU.BLOCKLIST.

The content was recovered instead by rendering the site under Playwright with SwiftShader and pre-setting window.__WEBGL_CONTEXT_LOSS = true, which takes the bundle’s non-redirecting branch.

The move
// headless Chrome has no GPU, and the site
// hard-redirects on GPU.BLOCKLIST.
// so: tell the bundle the context is already lost.

await page.addInitScript(() => {
  window.__WEBGL_CONTEXT_LOSS = true
})

// → takes the non-redirecting branch
// → 18 scenes become readable

Ditto was still used as designed — on a DOM-rendered sibling site, to harvest a known-good Next 15 + Tailwind 4 scaffold. Its visual output was discarded.

How the content was recovered
target siteone <canvas>2 MB bundle18 named scenes Ditto — DOM cloner3 nodes · unsupported no GPU → GPU.BLOCKLIST → redirect Playwright + SwiftShader__WEBGL_CONTEXT_LOSS = truetakes the non-redirecting branch205 assets recovered contentevery string, readoff the live DOM5 real woff2 Next.js rebuild10 scroll actsLenis + GSAPexact tokens + type scaleWebGL scene graph→ reinterpreted as DOM acts tier C

Ditto was still used as designed — on a DOM-rendered sibling site, to harvest a known-good scaffold. Its visual output was discarded.

Act 1 — the hero
running Act 1 — the hero
Act 3 — hold and pour
running Act 3 — hold and pour
Design tokens, verbatim from source
--inkbody ground
--ink-deepfooter, dark acts
--sacreddominant red field
--paperlight acts

Fluid type reproduces the source’s exact calc() curves at 390 / 768 / 1920.

Three tiers of honesty

Exact — fonts, colours, type scale, copy, overlay CSS, artwork, asset files. Recreated — scene compositions rebuilt from screenshot reference in CSS and GSAP. Reinterpreted — the WebGL scene sequence expressed as DOM acts with scroll choreography rather than a canvas scene graph.

Known gaps are listed rather than hidden: the engraved characters live in .bin mesh geometry driven by hatching shaders and are not reproduced.

Outcome

Martini-Recreation

repogithub.com/Sayandeep1013/Martini-Recreationfidelitygithub.com/Sayandeep1013/Martini-Recreation/blob/main/FIDELITY.md
Back to the start
ReelShell

Browse movies, series and anime — and watch them — without leaving the shell.

continue
14 — Santioni
scroll · drag · ← →