You arrive on the location and it’s locked. There’s no enter button, solely a immediate to attract a zero. As quickly because the circle closes, frost spreads from the stroke and regularly reveals the expertise. We hadn’t seen this sort of interplay used earlier than, and that was precisely the enchantment. It provides you a number of seconds to seize the customer’s consideration with one thing surprising, whereas instantly rewarding the interplay.
The gesture examine is surprisingly easy. It measures simply three issues: complete signed angle, roundness, and closure. If the stroke passes these checks, its centroid turns into the seed for the frost shader:
// settle for the stroke as a "zero" provided that it really closes a spherical loop
const wound = totalSignedAngle(factors, heart); // ~2π for a full flip
const radiusCV = std(radii) / imply(radii); // low = spherical, not a scribble
const closed = dist(factors[0], factors.at(-1)) < meanRadius;
if (wound > 5.76 && radiusCV < 0.35 && closed) unlock();From there, the expertise unfolds as a single steady scroll, taking you from the loading display screen to an interactive metropolis map. Constructed over 4 months with Three.js, GSAP, Howler, and Vite, it transforms greater than a gigabyte of supply belongings right into a website below 10MB that runs at 60fps even on a finances Android telephone. On this article, we’ll have a look at the 3D pipeline, tooling, shaders, and efficiency optimizations that made it potential.
How the mission began
We pitched with a proof of idea as a substitute of a presentation. The idea from Atul Khola’s staff was robust from the beginning: an immersive scrolling expertise that challenges the normal diploma path. We constructed the draw a zero interplay in 48 hours and delivered a working prototype. AI helped us get the primary model operating shortly, then we spent the remainder of the time refining it till the frost impact felt proper. The proof of idea received us the mission.
AI additionally modified the best way we approached improvement. As a substitute of spending time constructing the primary model of an thought, we might generate it shortly and deal with testing, refining, and iterating. We tried a number of variations of the burning cash impact, completely different glass shatter timings, and a number of other shader concepts earlier than selecting what labored finest. Writing the preliminary code grew to become the straightforward half. The actual work was evaluating the outcomes, bettering the small print, and ensuring each interplay regarded and felt proper. The remainder of this text focuses on that course of.
The narrative: six phases, 5 gates
The expertise unfolds throughout six scrolling phases, related by 5 interactive gates that pause or redirect the movement. These embrace drawing a zero, holding to shatter the glass, and holding to launch by means of a tunnel.
The story follows a transparent narrative. It opens with the promise of the normal diploma path: examine onerous, get good grades, and land a job at a prime firm. On the first gate, that promise actually shatters. The following stage reveals actual unemployment statistics scattered throughout the damaged glass. In stage three, the diploma turns into simply one other piece of paper as cash burns, certificates are shredded, and the scene transitions right into a tunnel formed just like the ZERO brand. Stage 4 emerges above the clouds, revealing a metropolis constructed from the headquarters of actual firms. Lastly, stage 5 fingers management to the consumer by means of an interactive map that may be explored freely.
The structure: one quantity drives every thing
One of many largest architectural choices was to keep away from counting on the browser’s native scroll altogether. There isn’t a ScrollTrigger and no outsized scrolling DOM. As a substitute, wheel and contact enter replace a digital scroll worth that eases in the direction of its goal. The whole lot else within the expertise, together with asset loading, animations, shader timing, textual content, and overlays, is pushed by that single worth.
Every stage and interplay is outlined as a self contained phase with its personal non-compulsory lifecycle:
{
scrollVh: 300, // how a lot digital scroll this phase owns
enter(ctx) { /* construct this phase's Three.js objects (async) */ },
scrub(ctx, p) { /* p is LOCAL progress 0..1 inside this phase */ },
replace(ctx, t, dt){ /* runs each body, scroll or not (idle movement) */ },
teardown(ctx) { /* dispose and hand off to the subsequent phase */ },
}In follow, the mission is cut up into 9 segments, with the loader additionally serving as the primary gate. Protecting every phase self contained made the codebase a lot simpler to keep up, particularly later in improvement. It additionally made debugging simpler. Leaping to any stage replays the lifecycle of each previous phase as a substitute of teleporting straight there, making certain the expertise is all the time initialized as if the consumer had naturally scrolled by means of it.
Making ready the 3D for the net
Many of the 4 month improvement time went into getting ready the belongings. The supply information arrived as manufacturing Blender scenes with uncompressed geometry, 8K textures, baked animations, and greater than a gigabyte of knowledge. A lot of the primary month was spent deciding the perfect format for every asset.
All geometry is shipped with DRACO compression utilizing self hosted decoders. The Draco and KTX2/Foundation transcoders are bundled in public/vendor/ moderately than loaded from a CDN. We realized that lesson the onerous manner when a slowdown on gstatic and unpkg brought about each compressed asset to fail decoding, despite the fact that the belongings themselves have been hosted domestically. In case your decoder lives on another person’s server, so does your pipeline.
Textures had the largest affect on efficiency. Whereas a PNG could also be small on disk, it’s absolutely decompressed in GPU reminiscence. A 2048² texture nonetheless occupies round 16MB of VRAM no matter its file dimension. KTX2 with ETC1S compression stays compressed on the GPU, makes use of a lot much less reminiscence, and uploads considerably sooner.
The compression previewer
One problem with KTX2 is that there isn’t a simple approach to preview it domestically. Since ETC1S is a lossy format, discovering the proper compression settings can simply develop into a technique of trial and error. A single world setting both wastes reminiscence or noticeably degrades textures that want larger high quality.
To unravel this, we constructed a converter and previewer into our inside dashboard. It shows compressed and uncompressed pictures and movies facet by facet, making it simple to check the outcomes. This allow us to effective tune the ETC1S settings for every asset individually, making use of heavier compression the place it wasn’t noticeable, preserving high quality for hero belongings, and disabling mipmaps the place they weren’t wanted.
It’s a easy instrument, but it surely had a big impact on the ultimate construct, and it’s a step we not often see mentioned in WebGL workflows.
We additionally consolidated associated textures into shared atlases. For instance, the entire hand textures are packed right into a single 4×4 atlas, with every mesh utilizing UV offsets and scaling to reference its personal part.
We utilized the identical strategy all through the mission. Textual content sprites have been consolidated from 4 separate atlases into one, adopted by certificates, paper shreds, clouds, cash, and glass shards. Greater than fifty particular person pictures have been lowered to round a dozen atlases, whereas most gradient backgrounds have been changed with a number of strains of GLSL.
Early builds have been round 35 to 40MB. The ultimate construct ships at below 10MB, with the interactive world map remoted in its personal loading group so it by no means blocks the opening expertise.
The stutter you don’t see coming: importing textures
Lowering obtain dimension is barely a part of the equation. Compressed textures nonetheless should be uploaded to the GPU on the principle thread, and a big texture can simply block rendering for 50ms, sufficient to drop a number of frames. If that add occurs the primary time a texture is required throughout scrolling, the hitch is straight away noticeable. A website can benchmark effectively and nonetheless really feel sluggish.
To keep away from this, we tackled texture uploads in 3 ways.
- Decode off the principle thread. Utilizing
createImageBitmap()strikes picture decoding off the principle thread, leaving solely the GPU add to occur throughout rendering. - Add throughout idle time. Decoded textures are queued and solely uploaded whereas the browser has spare time accessible:
// add queued textures solely whereas there's idle time to spare
operate drainUploads(deadline) {
whereas (uploadQueue.size && deadline.timeRemaining() > 5) {
renderer.initTexture(uploadQueue.shift()); // forces the GPU add now
}
if (uploadQueue.size) requestIdleCallback(drainUploads, { timeout: 2000 });
}- Cut up massive atlases into smaller chunks. The most important textures are divided into 256² tiles and uploaded one per body, stopping a single add from blowing the body finances.
Each time we all know a brand new stage is about to render, akin to after the loader or throughout gate transitions, we flush the add queue synchronously. This ensures each required texture is already on the GPU earlier than it seems on display screen, avoiding first time uploads throughout scrolling.
The adaptive high quality supervisor
Since you may’t predict the consumer’s gadget, the renderer constantly displays its personal efficiency. It tracks body instances utilizing a rolling buffer and adjusts high quality dynamically. If rendering turns into too sluggish, it steps right down to a decrease high quality tier. If efficiency improves and stays steady, it scales again up once more. A cooldown prevents it from continuously switching between high quality ranges:
if (avgMs > 22 && tier > LOW && cooldownElapsed) downgrade(); // ~<45fps
else if (avgMs < 12 && tier < HIGH && cooldownElapsed) improve(); // ~>83fpsThe standard tiers solely have an effect on visible polish, not the expertise itself. They modify issues like pixel ratio, blur samples, coin geometry, and textual content decision, whereas maintaining the story similar on each flagship gadgets and finances telephones. We additionally use a number of focused optimizations. Throughout the glass shatter interplay, for instance, the renderer briefly lowers the pixel ratio and disables blur and frost results, hiding the efficiency price inside the gesture itself.
A lot of the ultimate month was spent profiling and optimizing on a finances Android gadget. We tracked down body spikes one after the other till the expertise ran easily. The worst offender turned out to be a single 157ms body.
The shaders
The put up processing chain
Every body is constructed from a sequence of put up processing passes which might be utilized in sequence:
- Render: The primary 3D scene.
- Background: Procedural GLSL backgrounds as a substitute of picture belongings.
- Glass refraction: Renders the unbroken glass so it refracts the background behind it.
- Frost and path: Attracts the consumer’s gesture, the frost unfold, and the melting impact.
- Depth of discipline: Blur high quality scales with the lively high quality tier and is disabled on low settings.
- Foreground: Applies movie grain and ultimate tone mapping.
- Deferred textual content: Composites textual content after tone mapping to maintain it crisp. This cross is skipped at any time when no textual content sprites are seen.
- Shatter: Attracts the breaking glass as the ultimate cross.
The glass, textual content, and shatter passes are all initialized lazily and warmed up throughout idle time, maintaining them off the loader’s essential path.
// boot: the always-on backbone, added so as
composer.addPass(renderPass); // 1. the 3D scene
composer.addPass(bgPass); // 2. procedural background
composer.addPass(frostingPass); // 3. draw-zero frost + soften
composer.addPass(lensBlurPass); // 4. depth-of-field, tier-gated
composer.addPass(fgPass); // 5. grain + the one tone mapping
// later, off the loader's essential path
composer.addPass(textPass); // sort, composited after tone mapping
composer.insertPass(glassPass, 2); // slots in proper after the background
composer.addPass(shatterPass); // the break, final over every thing
// warmed throughout an earlier stage's idle time,
// so their first actual body is a cache hit, not a shader-compile stall
glassPass.prewarm(renderer, digicam);
shatterPass.prewarm(renderer, digicam);
// per body: do not pay for the textual content composite when nothing's on display screen
textPass.enabled = textPass.hasVisibleSprites();
Every key second within the expertise makes use of a customized shader constructed for that particular impact. AI helped generate the preliminary variations of lots of them, however each shader was refined and reworked earlier than it grew to become a part of the ultimate expertise.
The frost unlock
The frost impact is constructed utilizing a ping pong buffer with 4 passes: horizontal, vertical, and the 2 diagonals. Every cross expands the drawn stroke by propagating the brightest neighbouring pixels, creating an octagonal development sample. The enlargement is modulated by the brightness of a frost texture, giving the sting a extra pure, crystalline look. As soon as the stroke is full, its centroid turns into the place to begin for the radial soften impact.
// one in every of 4 axis passes → octagonal unfold; uSpreadAxis is the cross course
float m = texture2D(uPrevTrail, vUv).r;
float step = uSpreadStep * (0.4 + iceLuma * 1.2); // stepped by frost luma
for (int ok = 1; ok <= 2; ok++) {
m = max(m, texture2D(uPrevTrail, vUv + uSpreadAxis * step * float(ok)).r * 0.92);
m = max(m, texture2D(uPrevTrail, vUv - uSpreadAxis * step * float(ok)).r * 0.92);
}
gl_FragColor.r = m; // frost solely ever advanceLighting the fingers with out lights
Actual time lighting on a skinned mesh would have been too costly, and the lighting wanted to match the unique art work precisely. As a substitute, we baked the lighting into textures and blended between them. Two texture slots are used, with the incoming slot up to date for every keyframe and easily crossfaded to create the lighting transition.
// two slots crossfaded; the incoming one holds the subsequent keyframe's texture
vec4 a = texture2D(uTextureA, vUv * uTexScaleA + uTexOffsetA);
vec4 b = texture2D(uTextureB, vUv * uTexScaleB + uTexOffsetB);
a.rgb *= a.a; b.rgb *= b.a; // premultiply earlier than the mix
vec4 col = combine(a, b, uProgress); // uProgress ramps 0→1 throughout the beatWe premultiply the alpha earlier than mixing to keep away from darkish halos across the clear edges of the fingers. Each lighting textures are saved as areas inside a single atlas, so switching between them solely requires updating two UV offsets and a mix issue.
Burning cash
The burning cash impact makes use of a noise pushed distance discipline to dissolve every invoice over time. Simply earlier than the burn reaches every space, a skinny glowing HDR ember rim seems, adopted by the charred floor.
float threshold = uBurnProgress * 1.5; // sweeps the burn entrance
float burn = distField * 0.5 + fbm(uv) * 0.5;
float edge = burn - threshold;
if (edge < 0.0) discard; // already ash
float ch = 1.0 - smoothstep(0.0, uCharWidth, edge);
float em = 1.0 - smoothstep(0.0, uEmberWidth, edge);
vec3 col = combine(baseColor, uCharColor, ch) + uEmberColor * em; // HDR ember rimFBM is the most costly a part of the shader, so we discard fragments as early as potential at any time when we all know they can not have reached the burn threshold but.
Shredding certificates
Every vertex shops a strip index that determines which shred it belongs to. Because the shred entrance strikes from left to proper, every strip separates from the sheet and falls independently with its personal rotation, making the certificates tear aside into particular person ribbons.
float previous = clamp((uShredProgress - uv.x) / 0.4, 0.0, 1.0);
float e = previous * previous; // ease-in
pos.y -= e * (0.25 + hash(aStripIndex) * 0.25); // gravity, per strip
pos = rotateStrip(pos, aStripIndex, e * 3.0); // unbiased tumble, ~3 radLighting normals are generated analytically from the identical wave operate that drives the animation, so no regular map must be saved or shipped.
The tunnel
The tunnel is generated by extruding the cross part of the ZERO brand. A brightness pulse travels by means of the tunnel utilizing the geometry’s world house Z coordinate, permitting the impact to stay seamless at the same time as sections of the tunnel repeat.
float q = fract(vTunnelZ * uPulseFreq + uPulseTime); // vTunnelZ = world-space Z
float band = 1.0 - smoothstep(0.0, uPulseWidth, min(q, 1.0 - q));
totalEmissiveRadiance *= 1.0 + uPulseGain * band;
Textual content that pulls into focus
The narrative textual content makes use of a seven faucet hexagonal blur consisting of a middle pattern and 6 surrounding samples. The blur radius is pushed by the reveal progress, permitting the textual content to regularly sharpen because it comes into view as a substitute of showing immediately.
// 7-tap hexagonal blur; r comes from the reveal progress (uProgress)
float r = blurFactor * uMaxBlur * 0.003;
vec4 sum = texture2D(uText, vUv) * 2.0; // centre, weighted ×2
for (int i = 0; i < 6; i++) // six faucets at 60°
sum += texture2D(uText, vUv + hexDir[i] * r);
gl_FragColor = sum / 8.0;As a result of it runs as a part of the deferred textual content cross, the blur is skipped completely at any time when no textual content is seen, avoiding any pointless rendering price.
One situation that took longer than anticipated to debug was shader precision. A number of shaders needed to be explicitly set to highp float as a result of many cell GPUs, together with Adreno and Mali, deal with mediump as a real 16 bit float. This brought about bugs that by no means appeared on desktop, akin to all certificates strips transferring identically or seen banding within the burn impact. It’s a good reminder to check on actual cell gadgets from the beginning, not simply on the finish.
Interplay design
The supply materials consisted of pictures and movies moderately than interplay specs, so the behaviour of every gate needed to be designed from scratch. Most of them use the identical configurable press and maintain system. A shared configuration defines when the immediate seems and the way lengthy the maintain lasts, whereas every gate implements its personal visuals by means of a set of hooks:
holdTrigger: {
showAt: 0.6, holdDuration: 1.4,
onHoldProgress(ctx, p) { /* drive this gate's visuals with p (0..1) */ },
onHoldComplete(ctx) { /* hearth the shatter / launch, then advance */ },
}Throughout the maintain, your entire body regularly shifts in the direction of darkish purple. When the glass shatters, the color snaps again in roughly 200ms, making it really feel just like the shards are breaking the darkness away. An extended 400ms transition felt noticeably much less impactful.
The shatter sound can also be synchronized with the primary rendered body moderately than a timer. On slower gadgets, counting on a timer may cause the audio to play earlier than the animation is definitely seen, making the impact really feel out of sync.
The payoff: an interactive world
The ultimate launch sequence takes you into an open sky. As stage 4 progresses, the clouds half to disclose town under, with ZERO’s tower at its centre. A halo seems above the tower as the ultimate gate, earlier than the digicam settles into the interactive map.
Stage 5 fingers management over to the consumer. You possibly can pan, zoom, and discover town, with every marker opening a card containing the position, state of affairs, and instruments, together with a Be part of Beta button. The persistent be part of bar additionally turns into the waitlist signup. After guiding the consumer by means of the narrative, the expertise ends by letting them discover it for themselves.
Last ideas
One of many largest classes from this mission was that asset preparation and GPU uploads deserve as a lot consideration as rendering itself. Instruments just like the compression previewer, self hosted decoders, add queue, and adaptive high quality supervisor aren’t probably the most thrilling components of the pipeline, however they made the distinction between delivery greater than a gigabyte of supply belongings and delivering a sub 10MB expertise that runs easily on a finances telephone.
As for AI, it did precisely what it was good at. It helped generate the primary model of a lot of the code, together with the prototype that received the mission. The actual work got here afterwards: refining the interactions, bettering the visuals, profiling efficiency, and making a whole lot of small choices that solely develop into apparent when testing on actual gadgets. AI can generate code shortly, however constructing a sophisticated interactive expertise nonetheless is dependent upon cautious iteration and engineering judgment.
Credit
- Idea & design course: Atul Khola, Sanjay, Saba, Hamsa Rasheem, Akshai & staff, for Zero College
- Growth, 3D internet pipeline, shaders & optimization: Sindhur Dutta, Shuprobho, Yashas & staff, for BUNQ LABS
- Constructed with: Three.js, GLSL shaders, GSAP, Howler, DRACO, Vite
