mirror of
https://github.com/hanzo-templates/three-webgpu.git
synced 2026-10-30 20:52:04 +00:00
zeekayandHanzo Dev
7f56d30320
Neon Reef: ONE WebGPURenderer construction picks the best backend the browser
actually has, so the same bundle is a WebGPU demo on Chrome/Edge and a WebGL2
demo everywhere else. TSL node materials push the vertex wave onto the GPU; 900
instanced shards draw in a single call.
Why this exists: static-SPA builders cannot ship a game. Proving hanzo.app can
meant finding what actually stopped it, and three things did:
1. POST /v1/projects/:slug/deploy carries the entire build in ONE request body
and the public edge caps a body at 4 MiB (measured: 4194304 accepted,
4198400 gets the opaque fasthttp "Error when parsing request"). Godot emits
a 43 MB engine wasm; Unity 22 MB + 5.7 MB of data. The artifact lane cannot
express a game at all, so these ship through the release lane instead: stage
to the object store, then POST /v1/sites/:slug/publish promotes it
server-side with no body.
2. Engine loaders emit NON-fingerprinted filenames (index.js, <name>.loader.js)
and clients/sites.CacheControlFor only marks a content-hashed name
immutable. A redeploy therefore leaves the CDN and the browser running the
OLD loader against the NEW wasm. That is not a visible error: emscripten
prints "still waiting on run dependencies" forever and the canvas stays
300x150. Every template here fingerprints its own asset names so the case
cannot recur.
3. A cross-origin-isolated document (COEP: require-corp) BLOCKS a plain
cross-origin script, so the shared a.hanzo.ai runtime needs
crossorigin="anonymous" on exactly the pages that opt into isolation.
Co-authored-by: Hanzo Dev <[email protected]>
26 lines
1.2 KiB
HTML
26 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<title>Neon Reef — Three.js WebGPU</title>
|
|
<meta name="description" content="A WebGPU-first Three.js scene with automatic WebGL2 fallback: TSL node materials, 900 instanced shards, one draw call.">
|
|
<style>
|
|
:root { color-scheme: dark }
|
|
html,body { margin:0; height:100%; background:#05060d; overflow:hidden;
|
|
font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:#cbd5e1 }
|
|
canvas { display:block }
|
|
#hud { position:fixed; left:16px; top:14px; white-space:pre; pointer-events:none;
|
|
text-shadow:0 1px 3px #000; letter-spacing:.02em }
|
|
#tag { position:fixed; right:16px; bottom:12px; opacity:.55; pointer-events:none }
|
|
</style>
|
|
<script src="https://a.hanzo.ai/analytics.js" data-org="hanzo" crossorigin="anonymous" defer></script>
|
|
<script src="https://a.hanzo.ai/chat.js" data-org="hanzo" data-mode="site" crossorigin="anonymous" defer></script>
|
|
</head>
|
|
<body>
|
|
<div id="hud">loading…</div>
|
|
<div id="tag">Neon Reef · three.js · hanzo.app</div>
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|