3D Asset Lab 2026-07-25
Six ways to use one render

Bake it.
Don't ship it.

Blender renders the 3D once, at quality. The browser gets an image. Everything that has to feel alive — turning, tilting, reacting, lighting up — is a 1–3 KB layer on top, not a 3D engine underneath. Every sample below works on a phone.

Isometric office diorama turning

The samples

Tap any one
01 · scroll turntable You turn it by scrolling 24 baked frames swapped against scroll position. Feels like a live model. Best one on a phone — scrolling is already what your thumb does. interactive221 KB
02 · lighting reveal Two bakes, one lens Studio and night renders of the same room, wiped between by a soft mask that follows your finger. Any before/after a client cares about. interactive45 KB
03 · service overlay The room is the diagram The bake becomes a process map. Stations light up, work moves between them, counters climb — all plain HTML on top. This is the one for services. plays itself25 KB
04 · cursor dust It reacts, for 2 KB 120 motes that drift, shift with depth, and push away from your pointer. This is what people mean when a render "feels dead". interactive24 KB
05 · tilt parallax Tilt the phone One flat image floated above its card in CSS 3D, leaning with the gyroscope. No WebGL, no model — a transform and a moving highlight. gyroscope23 KB
06 · ambient shader No model, no image One full-screen fragment shader in raw WebGL2. The only place WebGL is still right — because there is no asset to bake. plays itself1.4 KB

Keeping it consistent

Consistency is a config, not a discipline. Every render above came out of one script with a locked house style, so any asset from any source lands looking like the same studio shot it.

  1. The camera auto-fits the model's bounding box, so framing never depends on how the artist exported it.
  2. The 3-point light rig is defined relative to the camera, not the world — so it works at every angle, on every asset.
  3. Light colour and energy live in a MOODS dict. studio, night, dawn — add one per brand, never hand-tune a scene.
  4. Energy is multiplied by the model's own scale, so a teacup and a warehouse get the same exposure.
  5. Alpha background always, so one render drops onto any client's palette.

The trap: at studio power every surface clips to white and the light colour vanishes entirely. Tinted moods need roughly a fifth of the energy.

Shipping this for services

A service has nothing to photograph. Three lanes that work anyway, in the order I'd reach for them:

  1. The room as the diagram — sample 03. An isometric space becomes the process map, and the service runs over it in HTML. Renames and localises in minutes because it is text, not pixels.
  2. Device mockup — Blender renders a studio phone or laptop, and the client's real dashboard is composited onto the glass. Sells your actual work rather than a stock office. Not built yet.
  3. Abstract ambient — sample 06. No object at all, just expensive-looking motion behind a headline. Zero licensing, recolours per brand.

What does not work: a hero object. There is no product, and a stock car or handshake photo reads as a template instantly.

What we rejected

Built, measured, deleted

A live .glb in three.js. It worked — orbit controls, real geometry, procedural lighting. It also cost 350 KB gzipped against 21 KB for the baked still, carried a WebGL context and a mobile-GPU risk, and looked worse, because Cycles gets 20 seconds a frame and a phone gets 16 milliseconds. The only thing it bought was dragging the model — and samples 01, 04 and 05 give the feeling of control for a fiftieth of the weight.