A performance budget for 3D websites, written into the prompt

Why the budget goes in the prompt

A coding tool builds on whatever machine it runs on and has no reason to imagine a slower one. Left alone it will render at the full pixel density of the display, load textures at their original size and start a new animation loop for each effect. All of that works in the first preview. The budget is how you tell it that the first preview is not the target.

These are general, long-standing practices for real-time graphics on the web, not measurements. The right numbers for your site come from running it on the devices you care about.

The five rules

• Cap the pixel ratio. High-density screens have several times the pixels of standard ones, and the cost of most effects follows the pixel count. Ask for the renderer's pixel ratio to be the device's value or a cap, whichever is lower. A cap of 2 is a common choice; soft effects tolerate less.
• Keep draw calls low. Each separate object the graphics card is asked to draw has an overhead. Ask for repeated objects to be instanced, static objects that share a material to be merged, and the draw-call count to be reported. three.js exposes it on the renderer's info object.
• Size textures to their use. Graphics memory follows pixel dimensions, not file size. A texture should be about as large as it appears on screen, with power-of-two dimensions where the tooling expects them, and compressed formats if your build supports them.
• One render loop. A single requestAnimationFrame loop should update everything and draw once. Several loops, or one per component, do duplicate work and drift out of step.
• Stop when there is nothing to show. Pause when the canvas is scrolled out of view and when the tab is hidden, and for scenes that come to rest, stop until the next input. An idle page should cost nothing.

Things that are expensive by nature

Some features cost a lot wherever they appear, and a prompt should either ask for them on purpose or rule them out. Real-time shadows redraw the scene from each light's point of view. Post-processing such as bloom, blur and depth of field redraws the whole screen one or more times. Transparent surfaces stacked over each other paint the same pixels repeatedly. Many dynamic lights multiply the work per pixel.

Cheaper substitutes exist for most of them: a soft blob texture under an object in place of a real shadow, glow painted into a texture in place of bloom, fog in place of depth of field. Name the substitute and the model will use it.

Ask the tool to measure

1. Add a debug readout. Frame rate, draw calls and triangle count in a corner, shown only when the URL has a debug flag.
2. Set a target. Aim for 60 frames a second on your own machine with headroom, since slower devices will get less.
3. Name the order of cuts. If the frame rate falls short: lower the pixel ratio first, then effects, then counts, then detail. Without an order, the tool cuts whatever is easiest.
4. Check the weight. Ask for the total size of models and textures the page downloads, listed by file.
5. Test on a real phone. A resized desktop window tells you about layout and nothing about the graphics chip.

Loading is part of the budget

A scene that runs well but shows a blank screen while a large model downloads has still failed. Ask for a still image in place of the canvas from the first paint, for the scene to fade in over it when ready, and for anything not needed in the first chapter to load after the page is usable. If the scene fails to start at all, the still stays, and the page still works.

A budget block to add to any immersive prompt

Performance rules for this build. Treat them as requirements, not suggestions.

Rendering
- One <canvas>, one WebGL context, one requestAnimationFrame loop for the whole page.
- Pixel ratio: min(devicePixelRatio, 2) on desktop, min(devicePixelRatio, 1.5) under 700px wide.
- Pause the loop when the canvas is out of view (IntersectionObserver) and when the tab is hidden. If the scene is at rest for 2 seconds, stop until the next scroll or pointer event.
- Resize the renderer on window resize, debounced by 0.15s.

Scene
- Instance anything that repeats. Merge static meshes that share a material. Target under 100 draw calls.
- No real-time shadows; use one soft contact shadow texture. No post-processing unless I asked for it.
- At most 2 lights plus an environment map.

Assets
- Textures no larger than 2048px on the long edge; anything shown smaller than 400px on screen gets a 512px texture.
- Load models and textures once and reuse them. Dispose of geometry, materials and textures when a component unmounts.
- Show ./poster.jpg in place of the canvas from first paint and fade the scene in over 0.6s when it is ready.

Fallback
- If WebGL fails to start or the context is lost, keep the poster and the page text.
- If the average frame rate over 3 seconds is under 40, drop the pixel ratio to 1; if it is still under 40, switch to the still-image version.

Debug
- With ?debug in the URL, show frame rate, draw calls and triangle count in the top-left corner in 12px mono text, colour #9aff7a on #000.

When you are done, run the site, open it with ?debug, and report the three numbers at 1440px and 390px wide, plus the total download size of models and textures.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• What makes a website immersiveDepth, continuity and response to input are what make a website immersive. What each means in a prompt, and the cases where you should not do it.
• How to describe scroll-driven animation in a promptThe vocabulary for scroll moments in a prompt: pinning, progress from 0 to 1, easing and reversibility, with a moment sheet to copy.
• Fallbacks for phones and reduced motionWhat to ask for when there is no cursor, a weak graphics chip or prefers-reduced-motion: the three fallback tiers and a block to add to any prompt.

• 3D products
• Particles
• Scroll storytelling