WebGL in a Product Configurator: When 3D in the Browser Pays Off
WebGL shows interactive 3D graphics in the browser without a plugin, but uses the graphics power of the customer's device. Whether 3D in the browser pays off depends on the number of combinations, on whether the shape changes with the options, and on what happens on weak devices. The model is the bottleneck, not the code.
WebGL shows interactive 3D graphics in the browser without a plugin, but uses the graphics power of the customer's device. 3D in the browser pays off when the shape of the product changes with the options, the product has to be inspected from all sides, or the number of combinations is too large for pre-rendered images. With a manageable number of combinations, images or image layers are simpler, faster and more accessible. According to caniuse (September 2026), about 97.13% of browser users support WebGL 2; that is a share of browsers, not a guarantee that your scene runs on every device.
Quick answer
WebGL shows interactive 3D graphics in the browser without a plugin, but uses the graphics power of the customer's device. 3D in the browser pays off when the shape of the product changes with the options, the product has to be inspected from all sides, or the number of combinations is too large for pre-rendered images. With a manageable number of combinations, images or image layers are simpler, faster and more accessible. According to caniuse (September 2026), about 97.13% of browser users support WebGL 2; that is a share of browsers, not a guarantee that your scene runs on every device.
What WebGL is and what it is not
According to MDN, WebGL is a JavaScript API for interactive 2D and 3D graphics in the browser, without plugins, drawn in a canvas element. WebGL 1 corresponds to OpenGL ES 2.0 at its core, WebGL 2 offers a large part of OpenGL ES 3.0; the Khronos Group describes it as an open standard without licence fees. What WebGL is not: a configurator. It is the graphics interface. Options, rules, price and the handover to the order have to be built on top (see our article on the product configurator). And WebGL needs suitable hardware: MDN points out, for example, that a texture compression format such as S3TC is not available on every graphics card.
Do you need 3D at all? Images per combination as an alternative
Images per combination
The number of combinations is the product of the values of all options. With a manageable number, every combination can be pre-rendered as an image. That loads predictably, runs on every device and can carry alt text.
Image layers
If every option only changes the colour or material of its own area, layers can be stacked. The number of images then grows with the sum of the values instead of the product: four options with five values each give 20 layers instead of 625 combinations. This holds only while the options are independent of each other and the shape stays the same.
Real 3D
If the shape changes or the customer should rotate the product and inspect it from all sides, layers are no longer enough. That is where the decision for 3D begins, with all consequences for model, load time and devices.
Worked example: images, layers or 3D
Three options
5 colours × 4 materials × 3 sizes = 60 combinations. 60 pre-rendered images are manageable.
Four options
4 options with 5 values each give 625 combinations. As independent layers, 20 images are enough; as individual images it would be 625.
The shape changes
If an option changes the silhouette, for example through dimensions or accessories, layers stop working. This is where the question of 3D begins.
When real 3D pays off (our assessment)
The shape depends on the options
Dimensions, accessories or components change the silhouette; one photo per state is not possible.
Too many combinations for images
The number grows by multiplication faster than you can produce and maintain images, and layers do not apply.
The customer must inspect from all sides
Details on the back, inner sides or the fit decide the purchase.
There are no photos yet
Made-to-order products exist only after the order. A preview is then the only picture.
What we do not claim
This is an assessment from the logic of the product, not a measurement. We have no evidence that 3D raises the purchase rate or lowers returns; the statements on this in vendor blogs name no source.
What has to happen in the customer's browser
According to caniuse, about 97.13% of browser users worldwide support WebGL 2 (StatCounter data, September 2026). That is a share of browsers, not a promise that your scene runs on every device.
Request the context
When requesting the WebGL context via getContext, the browser returns null if the context type is not supported (MDN). You have to handle this case.
Check performance
The option failIfMajorPerformanceCaveat determines whether a context is created even with low performance or without a hardware GPU (MDN). It lets you detect weak devices before the page stutters.
Load resources
Model and textures arrive compressed and in stages. MDN advises not to rely on extensions and limits and to use compressed textures.
Keep a fallback ready
Without a context, with weak performance or after a context loss (possible according to MDN), the customer needs an equivalent route to the order: images and the normal option selection.
The fallback is not an edge case but part of the configurator. Option selection must work without 3D.
Decision path: images, layers or 3D
How many combinations? (multiply the values of all options) manageable → pre-rendered images too many ↓ Does each option only change colour or material, independently of the others? yes → image layers no (shape changes or view from all sides needed) ↓ 3D in the browser (WebGL) with device check and fallback to images
The model is the bottleneck, not the code
File format
According to Khronos, glTF 2.0 is an ISO/IEC standard (12113:2022); the scene is described as JSON and packed into a single binary file (.glb). For textures there is KTX 2.0, a container for GPU textures with Basis Universal compression via the KHR_texture_basisu extension.
File size
Jason Grigsby of Cloud Four measured four models on 6 February 2024: with Draco compression the files were smaller than 10% of the originals (GLB and USDZ). That is one author's measurement on four models, not a general law, but it shows where weight can be saved.
Who supplies the model?
Does it come from your CAD data, from a service provider or from the manufacturer? Each source delivers different file sizes and rights. Clarify who prepares the model for the browser and who repeats that for every new product.
Augmented reality
For AR on the iPhone, Apple's Quick Look requires the USDZ format according to Cloud Four. If AR is to be added, that is another file type.
Mobile, load time, battery: measure instead of promise
Set a budget
Set a size budget for model, textures and script and measure it on the real page. Target values from vendor blogs are targets without a measurement method.
Test on real devices
Test on a mid-range Android device, an older iPhone and a throttled network, not only on the development machine. Battery use and heating show up there.
Draw less
MDN lists these measures: fewer draw calls, compressed textures, a smaller canvas at the same display size on the page and a cautious guideline for the maximum texture size (4096).
Plan for context loss
The browser can lose the WebGL context. The page must then rebuild or switch to the fallback.
Visibility and usability: search, keyboard, screen reader
Search
A Stuttgart agency for WebGL names it as a limitation itself: search engines do not read the content of a canvas, so product text and metadata must sit next to it as HTML. We think that is the right consequence: product name, description, options and price belong in the page, not in the scene.
Keyboard
Rotating by mouse or swipe must never be the only way. Every gesture needs a button (rotate left and right, zoom, reset view), reachable by keyboard.
Screen reader
Options are real form elements with labels; the chosen configuration is also present as text. The canvas gets a text alternative.
3D viewer for your website: embed ready-made or build it yourself?
A viewer is not a configurator
A 3D viewer shows a model for rotating and zooming. A configurator changes the model by rules, calculates the price and hands over the selection. If customers should only look at the product, the viewer is enough; configurable products need more.
Embed ready-made
The model-viewer web component is under the Apache 2.0 licence and, according to modelviewer.dev, supports the two latest major versions of auto-updating browsers and the two latest Safari versions on macOS and iOS. According to Cloud Four it weighs about 245 KB of JavaScript. A hosting platform for 3D models is also possible; we have not checked tariffs and terms, read them on the vendor's page.
Build it yourself
A custom scene (for example with a framework such as Three.js) is needed when rules, price or accessories change the scene. That is the part that costs development; the viewer alone is not.
What does a configurator with 3D in the browser cost?
We name no sums
The prices we have seen are estimates by individual vendors or authors without a source and mix the items. We therefore name no sums.
Renderings
Finished images or animations of a product. That is a different service from interactive 3D in the browser; in our research, searches for 3D product visualisation turned up mostly prices for renderings.
3D model
Every product needs a model prepared for the browser. The number of products and variants drives this item, and it repeats for every new product.
Logic and price
Options, rules, price calculation, handover to the order: the same effort as for any configurator, with or without 3D.
Integration, operation and fallback
Shop, ERP, hosting, maintenance, tests on devices and the 2D fallback.
Next step: three questions for your product
1. How many combinations result when you multiply the values of all options? 2. Does each option only change colour or material, or does the shape change? 3. What does a customer with an older smartphone see when 3D does not start? If the answers are “few”, “colour only” and “images are enough”, you do not need 3D. If they are “many”, “shape” and “we have a fallback”, WebGL is worth a look, ideally first as a small prototype with one product and measurement on real devices.
Key takeaways
- WebGL is the graphics interface in the browser, not a configurator. Options, price and ordering have to be built on top.
- Check images and image layers first: the number of combinations is a product, the number of layers a sum.
- 97.13% WebGL 2 support (caniuse, September 2026) is a share of browsers, not a guarantee for your scene on every device.
- The model is the bottleneck: format, compression and the source of the models decide the load time.
- Plan the fallback, keyboard operation and HTML content from the start.
FAQ
What is the difference between a 3D viewer and a configurator?
How many users can run WebGL?
Do I need a plugin for a 3D viewer on my website?
When are images enough instead of 3D?
What does a configurator with 3D in the browser cost?
How do I keep the page fast with 3D?
Does Google see the content of a 3D configurator?
First check whether images are enough. Then build 3D.
We go through with you how many combinations your product has, whether images are enough and what a prototype with a fallback would have to deliver.
Start the process check