IST

Start a project

3D & WebGL website development— Three.js, shaders, performance

Interactive work in Three.js and custom shaders: product configurators, scroll-driven stories and launch sites that people remember, and that still load fast on a mid-range phone.

Start a projectSee the deliverables
0102030405
Part
CS-03 · Sheet 03 / 04
Deliverables
05 · handed over by operation
Tolerances
LCP ≤ 2.0 sCLS ≤ 0.05INP ≤ 200 msFallback Every scene
Stack
Three.js · GLSL · WebGL · GSAP · Astro

01Content first

Real HTML first. 3D on top.

The load order of a well-built 3D page: content paints, a static poster holds the space, then the scene goes live. Drag to turn the part.

Load order

  1. 01HTMLContent paints first. Search engines read it.
  2. 02PosterA designed static state, always in place.
  3. 03WebGLLoads after, only on devices that can carry it.

02 · Fit

Who it's for.

  • AProduct launches that need one memorable moment.
  • BHardware and consumer brands that want a product configurator.
  • CSaaS companies that want a flagship site without giving up speed or SEO.

Problems this solves

  1. D-013D sites are slow and heavy.

    FixContent paints first. 3D loads afterwards, only on devices that can handle it.

  2. D-02It looks great on a laptop and stutters on a phone.

    FixTested on real mid-range devices, with lighter variants for phones.

  3. D-03Search engines can't read a canvas.

    FixAll content lives in real HTML. The 3D layer is an enhancement on top.

  4. D-04Heavy motion makes some visitors unwell.

    FixA designed reduced-motion state and a static fallback for every scene.

03Routing sheet

What you get, operation by operation.

5 operations, in order. Each one hands over something you can check: 5 deliverables in total.

  1. Operation 10: Art direction

    Concept, references and the interaction idea, agreed in writing.

    • 01Art direction and interaction concept

  2. Operation 20: Prototype

    A working WebGL prototype in week one or two, running on real devices.

    • 02Working WebGL prototype in week one or two

  3. Operation 30: Optimise

    Models, textures and shaders optimised, capability-gated and lazy-loaded.

    • 03Optimised models, textures and shaders (capability-gated, lazy-loaded)

  4. Operation 40: Fallbacks

    Static and reduced-motion versions, designed rather than left as blank space.

    • 04Static and reduced-motion fallbacks

  5. Operation 50: Measure

    A performance report from real mid-range devices before handover.

    • 05Performance report on real mid-range devices

04Tolerances

The numbers this part ships inside.

Written into the spec before any design. Measured before handover, and dated in the report you keep.

Published budgets · 04 parameters · lab and manual checks
RefParameterToleranceInstrument
T-01LCPLargest Contentful PaintLab run on the production build of every key template, dated in the handover report.≤2.0s
T-02CLSCumulative Layout ShiftNo jumps from fonts, images or animation. Space is reserved before anything loads.≤0.05
T-03INPInteraction to Next PaintMeasured on the interactions the spec names: menus, forms, filters, the checkout.≤200ms
T-07Fallback3D fallbacksContent paints first. 3D loads afterwards, only on devices that can handle it, with a designed static state.Every scene
  • Lazy-loaded
  • Capability-gated
  • Static poster
  • Reduced motion

05Questions

3D & WebGL websites: answers.

Short and factual. Anything else, just ask us.

05 questions · answered by the studio

Q.01Does 3D/WebGL make a site slow?

It doesn't have to. The page content loads first, 3D loads afterwards only on devices that can handle it, and every scene has a static fallback. Performance targets are agreed in the spec.

Q.02Is WebGL worth it for our site?

When the product benefits from being seen in 3D, or a launch needs one memorable moment, often yes. When the page's job is to be read and scanned, usually not. The spec says which, with the reasons written down.

Q.03What happens on older phones or with reduced motion?

Devices that can't run the scene well, and visitors who prefer reduced motion, get a designed static version. The content is the same for everyone.

Q.04Can you work with our existing 3D models?

Yes. Existing models are optimised for the web. When new models are needed, a 3D artist we've worked with before joins the project, and you'll know their name and role from day one.

Q.05Can search engines read a 3D website?

Yes, when it's built this way. Text, headings and links are real HTML, so search engines and AI assistants read them as normal. The 3D scene sits on top as an enhancement.

06 · Work order

Open a work order.

Pick the part and the way you'd like to work. Your brief opens with both filled in, and we reply within one working day.

Order slipWO · CS-03 × EM-01
01 · Part
02 · Engagement model

3D & WebGL websites, as a fixed-scope project.

Start this brief