Command Palette

Search for a command to run...

Hectal

Phase 18 · part: Bell and bottle cage

Production-ready 3D

What to do when 3D cannot run: fallbacks, a lost GPU, screen readers, slow first loads, WebXR, and a deploy where the models 404.

A demo works on your laptop. A product works on every visitor's device: the one with no usable GPU, the one whose graphics driver restarts mid-session, the visitor who cannot see the screen, the phone on a slow connection, and the server that serves your model as a web page. This phase covers each one, with real failures you can run.

You detect what the browser can do and choose a path, survive a lost GPU context, give the canvas a text alternative and real buttons, load three.js only when the showroom is about to be seen, find out what WebXR does in a browser that blocks it, and deploy with Vite without a surprise 404.

The build makes the showroom production-ready and adds the bell and the bottle cage.

Phase 18 · the brief from Lumen

Ravi, a screen-reader user who tests Lumen's pages

“I opened the showroom. My screen reader said "group" and then nothing. Is there a bike on this page?”

Before launch, Ama asks Ravi, who uses a screen reader every day, to try the showroom. He tabs in and hears one word. The canvas is a picture, and nothing says what is in it. The part buttons exist, but he never hears that the bike has finished loading.

Then Lena sends a worse report. On her cheap phone the page was fine for ten minutes. She switched to another app and came back: a frozen black rectangle, and no message. And Tomás has found that on the office's locked-down laptops the showroom shows a blank page, because the administrators turned the graphics acceleration off.

None of this appears on a developer's machine. The team lists every way the showroom can fail, gives each one an honest answer, and makes sure the first thing a visitor sees is a picture, not a spinner.

At this station

You will learn

  • Detect what the browser can draw and choose WebGPU, WebGL 2 or a still image
  • Survive a lost GPU context, and know what three.js restores and what you must
  • Give a canvas a text alternative, real buttons, announcements and readable contrast
  • Load 3D only when it is needed, and deploy with Vite without the models 404ing

You write code in

In your lumen-3d project (npm run dev, then npm run build for Topic 18.6) and in the editor on this page

Files you touch

  • index.html
  • src/boot.js
  • src/systems/context.js
  • src/systems/lazy.js
  • src/ui/a11y.js
  • src/systems/rear-glow.js
  • src/objects/bike.js
  • src/ui/panel.js
  • src/main.js
Start with 18.1

Work order · 7 steps

  1. 18.1Feature Detection and FallbacksNever assume the visitor's browser can draw 3D. Ask it, in order: WebGPU if you want it, then WebGL 2, then show a still image with a text alternative. Each answer is a path, and every path must leave the page useful. 18 min 2 live scenes
  2. 18.2Context Loss and RecoveryThe GPU can take a canvas's WebGL context away while the page is open. three.js rebuilds its own objects when it comes back, but anything you drew once, or made with your own WebGL code, is empty until you rebuild it. 20 min 3 live scenes
  3. 18.3Accessibility of 3DTo a screen reader a canvas is one picture with nothing inside. Give it a text alternative, offer every part as a real button, announce changes politely, keep focus visible and check contrast with numbers. 20 min 2 live scenes
  4. 18.4Core Web Vitals and Lazy CanvasesA 3D scene is the heaviest thing on most pages. Show a poster picture first, fetch three.js only when the scene is about to be seen, reserve its space, and stop drawing when it scrolls away. 20 min 2 live scenes
  5. 18.5WebXR in One TopicWebXR lets a page show the scene in a headset or on a phone camera. It needs HTTPS, a user gesture and a supported device. three.js provides the button and the per-eye drawing; this preview blocks it, and the example shows exactly what that looks like. 15 min 1 live scene
  6. 18.6Deployingvite build turns the project into plain files. Asset paths, the base setting, caching and compression headers, and MIME types decide whether the models load in production. The classic bug is a missing file that the server answers with a web page. 17 min 1 live scene
  7. 18.7Build: Production-readybuildThe showroom stops assuming the best. It starts when seen, shows a picture first and a reason when it cannot draw, recovers from a lost GPU, describes itself to a screen reader, and gains the bell and the bottle cage. 107 min 1 live scene

Quality control · 4 tests

Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.

QC-01Show the picture when WebGL is missingThis page pretends the visitor's browser has no WebGL. Right now startScene() would throw.IntermediateQC-02Repaint after the GPU is lostA picture is painted once into a render target and shown on a plane. After a lost and restored context the plane turns black.AdvancedQC-03Describe the scene and announce a choiceWrite the text alternative in #alt from the scene: how many parts, and their names (lower case).IntermediateQC-04Build the bellThe handlebar bar lies along z at (0.5, 0.9, 0). Add a group named bell made of a half-sphere dome (radius 0.03) and a small clamp ring, placed on top of the bar just right of the stem, at about (0.5, 0.911, 0.09).Advanced