Live material switching in a HiveCPQ configurator

A shopper picks anthracite instead of white, or stainless instead of powder coat, and the product on screen changes in the same breath. No spinner, no reload. Here is the rule that makes that possible, and why it holds up on a phone.

The web-safe rule: bake, do not compute

It is tempting to build materials that generate their detail live: procedural noise, patterns computed every frame. It looks great on a workstation and falls over on the mid-range phone a customer is actually holding in a showroom.

So the rule for every material in the library is simple: all the expensive detail is baked into textures at build time. At runtime the material is cheap, just a base colour, a packed occlusion-roughness-metallic texture and a normal map. The browser never rebuilds a shader. It just draws.

Anything clever happens before export. Runtime only ever draws finished materials.

One structure, many materials

Because every material in the library follows the exact same node structure, they are interchangeable. Powder coat, brushed aluminium and stainless are different pixels but the same shape of material. That is what makes swapping trivial: the configurator does not care what the material is, only that it fits the same socket.

Driving it from the configuration

In a HiveCPQ configurator, the shopper's choices are exposed to the 3D scene as selector variables. The runtime listens for those values and reacts:

• A colour selector swaps the base colour texture on the body material, so RAL 7016 becomes RAL 9010 instantly.
• A finish dropdown assigns a different library material to the same part, turning painted steel into brushed aluminium.
• A checkbox toggles an emissive indicator, or shows and hides a warning decal.

Each of these is a small, cheap operation: point an existing material at a different texture, or assign a different prebuilt material to a mesh. Nothing is compiled in the browser.

Why swapping beats rebuilding

Rebuilding a shader for every choice means jank, dropped frames and a hot phone. Swapping a prebuilt material means the change is effectively instant and the frame rate never dips. For a configurator that has to feel immediate while someone is deciding whether to spend real money, that responsiveness is not a nicety. It is the experience.

What it looks like in practice

On the library home page, the hero does exactly this: pick a sample and the same coupon re-skins live. A production HiveCPQ configurator is the same idea wired to real selectors, on a real product, at a scale a sales team can rely on. The materials were built for it from the first bake.