Command Palette

Search for a command to run...

Hectal

Phase 10 · part: Chain

Models and the Asset Pipeline

Inside glTF, exporting the bike, loading models with progress and errors, Draco and Meshopt compression, and licences: the showroom loads a 34 KB file.

Until now the bike was built from code: every tube a line of JavaScript. Real 3D apps load models instead, made in Blender or exported from code, and sent as one file. This phase opens that file and shows exactly what is inside a .glb: a header, a JSON description and the raw bytes the GPU needs.

Then the parts a product needs: exporting the bike so designers can open it, loading it with a progress message, an error message and a Try again button, and a deadline for a load that never finishes. You shrink the file from 1.3 MB to 34 KB with glTF Transform and learn which settings quietly break your app, and which models you are allowed to ship.

The build swaps the code-built bike for the loaded, compressed model and adds this phase's part, the chain.

Phase 10 · the brief from Lumen

Lena, QA, who tests on a cheap Android phone

“On the bus the showroom is a black screen for seconds, and when the signal drops it stays black for ever.”

Lena tests every change on the cheapest phone in the office, on mobile data, on her way home. On Tuesday she writes: the showroom shows nothing for four seconds, and once, in a tunnel, it never showed anything at all. No message, no button, just black.

Kofi looks at the network panel. The page downloads three.js, then builds the bike in code: fine. But Ama's designers now want to tweak the bike in Blender, and the next version will be a real model file. If that file is large, or the connection fails, the visitor gets Lena's black screen.

So the team learns the format first, then makes loading honest: what is happening, what went wrong, how to try again. And they make the file small enough that a bus ride is no problem.

At this station

You will learn

  • Read what is inside a .glb file, and export a scene to one
  • Load a model with progress, a clear error, a retry and a timeout
  • Shrink a model with Draco or Meshopt, and keep what your app needs
  • Tell which models you may ship, and credit them properly

You write code in

In your lumen-3d project (npm run dev) and in the editor on this page; the compression runs in a terminal with npx

Files you touch

  • index.html
  • src/systems/loader.js
  • src/objects/bike.js
  • src/ui/panel.js
  • src/main.js
  • public/data/3d/models/lumen-bike-draco.glb
  • public/data/3d/draco/
Start with 10.1

Work order · 7 steps

  1. 10.1Inside glTFglTF is the standard file format for 3D on the web: a JSON description of the scene plus the raw bytes of its geometry and images. A .glb puts both in one binary file: a 12-byte header and two chunks. 18 min 2 live scenes
  2. 10.2Export Our Bike as glTFGLTFExporter turns any three.js scene into a .glb or .gltf: names, positions, standard materials, textures, lights and userData survive. Custom shaders do not, and textures are re-encoded, which can make the file bigger. 19 min 2 live scenes
  3. 10.3Loading ModelsGLTFLoader.loadAsync(url) fetches and parses a model and gives you its scene. Then you measure it, scale it to real size, stand it on the floor, and handle the ways a load fails: a missing file, a file that is not a model, no network. 19 min 2 live scenes
  4. 10.4Loading, Empty and Error StatesA model takes time to arrive and sometimes never does. The page must always say what is happening: loading (with progress when it can), an error in plain words with a Try again button, and a deadline for loads that hang. 18 min 2 live scenes
  5. 10.5Compression: Draco, Meshopt and KTX2glTF Transform shrinks the exported bike from 1.3 MB to 34 KB: Draco or Meshopt compress the geometry, WebP or KTX2 the textures. Compressed files need a decoder, and the default settings can merge your named parts. 19 min 2 live scenes
  6. 10.6Licences and Asset SourcesA model you download belongs to someone. CC0 means no conditions; CC BY means credit the authors; many "free" models forbid redistribution. Check each file's licence where you found it, keep the credit with the file, and show it on the page. 16 min 1 live scene
  7. 10.7Build: Load the Bike ModelbuildThe showroom now loads the bike from a 34 KB Draco-compressed file, says what it is doing while it loads, offers Try again when it fails, and gives up on a load that hangs. The chain, this phase's part, is added in code to the loaded model. 54 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-01Read a .glb headerThe code fetches the bike's .glb file. Read its 12-byte header with the DataView: the 4 letters at the start (the magic), the version (bytes 4–7) and the total length (bytes 8–11), both little-endian.IntermediateQC-02Fit the Fox into the showroomThe Fox arrives about 155 units long. Name its scene "fox", scale it so its longest side is 0.9 m, and move it so its lowest point is on the floor (y = 0).IntermediateQC-03Give the loader its decoderThe bike file is Draco-compressed, and loading it fails with No DRACOLoader instance provided.IntermediateQC-04An honest loading statusThe code loads a file that does not exist and only logs the error, so the visitor sees nothing.Intermediate