WebGL, mobile and product interaction
3D product configurator performance.
Plan loading, option response and stable 3D sessions around your complex products. Connect useful HTML, controls, rules, pricing, browser assets and graphics resources to measurable buyer actions.
One product change
- InputFinish, dimension or module selected
- DecideRules validate one accepted state
- Present3D frame shows the completed change
- PriceCommercial result reaches the same revision
- SustainResources remain stable after repeated edits
Eight milestones from HTML to a stable session.
Measure what the buyer can understand and do. Download completion alone does not establish a usable model, current price or responsive option change.
Useful HTMLCan the visitor understand the product and next action before 3D is ready?
- Measure
- Page content, layout stability, primary action and fallback state
- Failure to prevent
- A blank or shifting canvas blocks product meaning and conversion.
Controls operableCan the buyer inspect choices while richer scene resources continue loading?
- Measure
- Control-ready event, input delay and unavailable-state explanation
- Failure to prevent
- Controls look ready but queue, ignore or overwrite early input.
Rules and price readyIs the current configuration commercially meaningful?
- Measure
- Rule initialization, price-service response and revision identity
- Failure to prevent
- The scene appears complete while options or price are stale.
First useful product viewCan the customer recognize the configured product at a useful camera position?
- Measure
- Required model, material, camera and render completion—not only file download
- Failure to prevent
- A spinner disappears before the scene is intelligible or stable.
First camera interactionDoes the first orbit, pan or named-view action respond immediately?
- Measure
- Input, processing, presentation and frame continuity
- Failure to prevent
- Decode, shader or upload work collides with the buyer's first gesture.
First option responseDoes a finish, dimension or module change produce one coherent update?
- Measure
- Option input to visual, price and validation completion
- Failure to prevent
- The control, scene and total update at different times or in the wrong order.
Full-quality sceneHave deferred textures, effects and optional modules completed without disrupting use?
- Measure
- Deferred-resource completion, visual quality and post-load interaction
- Failure to prevent
- Late work causes layout movement, stutter or surprising network consumption.
Long-session stabilityCan users change products and options repeatedly without degradation?
- Measure
- Memory, GPU resources, frame time, context loss and event/listener growth
- Failure to prevent
- Each reconfiguration leaves resources behind until the tab slows or crashes.
Start with the product, device and delivery context.
Choose the setting that your customers actually use. The outline defines diagnostic work for a supplier brief; targets still require measured products, supported hardware and an agreed test matrix.
Choices update this outline on the page. They do not save a project or send an enquiry.
Diagnostic scope
Measure the actual sales environment.
Selected test context: Public product page. Mid-range mobile. Representative product
- Record LCP, INP and CLS at the 75th percentile, then add first useful product view, option response and frame-time evidence.
- Include acquisition content, consent, analytics, fonts and the public product page in the same loading and interaction budget.
- Use physical mid-range phones and test variable networks, touch, high-density rendering, memory pressure and sustained thermal load.
- Establish the representative product baseline before comparing the heaviest valid scene and optional features.
- Capture exact code, asset, product-data and pricing revisions so every regression or improvement can be reproduced.
- Delivery channel
- Public product page
- Primary device
- Mid-range mobile
- Scene under test
- Representative product
Find the stage that is actually slow.
Separate delivery, startup, decoding, scene construction, GPU work, configuration response and recovery. Attribute a delay to its stage before changing the architecture.
Network delivery
HTML, JavaScript, CSS, glTF/GLB, textures, decoders, fonts, product data and API calls
Evidence
Request waterfall, cache state, transferred and decoded sizes, priority and failure behavior
JavaScript startup
Download, parse, compile, evaluation, hydration, listeners and framework initialization
Evidence
Main-thread profile, long tasks, unused startup code and control-ready timing
3D parse and decode
Container parse, geometry decode, texture transcode, image decode and dependency resolution
Evidence
Per-stage duration, worker use, failure paths and representative-device traces
Scene construction
Nodes, materials, instances, rules, generated geometry, bounding data and camera framing
Evidence
Construction time for normal and largest valid configurations
GPU preparation
Texture upload, buffers, shader compilation, render targets and first-frame warm-up
Evidence
First-render trace, memory estimate, program count and visible first-interaction stutter
Continuous rendering
Draw calls, fill rate, pixel ratio, lighting, shadows, transparency, effects and animation
Evidence
Frame-time distribution during camera motion and demanding valid scenes
Configuration response
Rule evaluation, pricing, geometry changes, material changes, API work and state coordination
Evidence
Input-to-visual, input-to-price and complete-state timings with revision IDs
Cleanup and recovery
Disposed geometry, materials, textures, render targets, workers, events and WebGL context recovery
Evidence
Repeat-cycle memory profile, context-loss test and stable resumed configuration
Web standards and product-specific milestones.
Core Web Vitals describe page experience. Eligible image, text and video content can become LCP candidates; first useful 3D product view needs its own defined event. Add option completion, price revision and sustained-session measures. These reference targets are not measurements of your implementation.
Largest Contentful Paint (LCP)
Loading experience for the page's largest visible content element
Use the Core Web Vitals good threshold of 2.5 seconds or less at the 75th percentile, while verifying which element becomes LCP.
Interaction to Next Paint (INP)
Responsiveness across interactions during the page visit
Use the Core Web Vitals good threshold of 200 milliseconds or less at the 75th percentile and inspect input, processing and presentation delay.
Cumulative Layout Shift (CLS)
Visual stability while the page, viewer, controls and consent layers load
Use the Core Web Vitals good threshold of 0.1 or less at the 75th percentile and reserve viewer and control space deliberately.
First useful product view
When the customer can recognize the configured product in a useful view
Define the required model, material, camera and stable render conditions as a product-specific event.
Option-to-visual response
How quickly a choice becomes visibly complete
Measure input, rule decision, scene mutation and presented frame—not only the event handler duration.
Option-to-price response
How quickly the commercial consequence becomes current
Separate local calculation, network work, document rules and final displayed revision.
Frame time distribution
Camera and animation fluidity across ordinary and difficult states
Retain percentiles and dropped/slow-frame evidence; an average can hide severe stutter.
Memory and context stability
Whether repeated use remains reliable
Track heap trends, estimated GPU resources, context loss, recovery and resource counts over scripted cycles.
Budget by when a resource earns its place.
Set measured budgets for the route, device, network and accepted scenes. Separate what is needed for the first useful state from expected deferred work and features loaded after intent.
Initial and critical
The content, controls, rules, minimum code and product resources needed to understand the offer and reach the first useful product view.
Resources: HTML shell, critical styles, product metadata, essential runtime, base model and first-view materials
Deferred but expected
Resources that improve quality after the buyer can already use the experience and must not interrupt an active interaction.
Resources: Higher-detail textures, secondary viewpoints, optional modules, nonessential effects and export tooling
Conditional and optional
Resources loaded only after intent, visibility, feature use or a compatible product choice makes them necessary.
Resources: AR path, rare accessories, heavy document preview, alternative product families and diagnostic tools
Design for finite graphics resources.
Device and browser limits vary. Control texture memory, draw work, resolution and lifecycle as a runtime budget, then reduce visual cost deliberately while preserving the accepted configuration.
Texture memory
Record dimensions, channels, mipmaps and runtime format. A compact JPEG or PNG transfer can occupy far more memory after decoding; KTX 2.0 and supported GPU formats can reduce both delivery and runtime pressure.
Draw and material work
Measure draw calls, material programs, transparency, lights, shadows and post-processing. Geometry count alone does not explain render cost.
Resolution and fill rate
High device-pixel ratios multiply the pixels rendered. Define when the back buffer, shadow maps or effects can use a lower resolution without harming a buying decision.
Instancing, LOD and culling
Reuse repeated components, reduce distant detail and avoid drawing work outside the useful view. Validate that optimization never changes quantities, identity or visible commercial state.
Thermal and long-session behavior
Test sustained interaction on physical phones and showroom hardware. Short desktop profiles do not reveal throttling, accumulated resources or device-specific context loss.
Cleanup and context recovery
Dispose superseded geometry, materials, textures and render targets deliberately. Test a lost WebGL context and restore the accepted configuration without duplication or stale state.
Protect the next customer action.
Trace input delay, processing and presentation on the complete host page. Split startup code, schedule and yield appropriate work, and measure the result on the supported hardware.
Reduce startup JavaScript
Load the code required for the current product journey; defer AR, export, rare tools and alternate catalogues until intent.
Break long work apart
Split independent work and yield so the browser can present feedback and respond between chunks instead of monopolizing one task.
Move suitable work off-thread
Use workers for supported decode, parse or calculation paths when transfer and coordination cost produce a measured benefit.
Measure presentation delay
A quick event handler is not enough if scene mutation, style, layout or rendering delays the next visible frame.
Workers cannot access the DOM and do not support every browser API. Separate suitable calculations or decoding from UI responsibilities, and account for transfer, messaging, cancellation and state ownership.
Make progressive loading predictable.
Reserve stable viewer space and useful HTML. Prioritize the minimum accepted product, load secondary quality without interrupting use and keep rules, prices and authorization current. Recover with preserved valid choices when a dependency fails.
Critical delivery
Prioritize the page shell, essential runtime and first-view product assets. Prevent low-value requests from competing with the first useful state.
Revision-aware caching
Use immutable hashed assets and a content delivery network while keeping product rules, price and authorization freshness explicit.
Recovery contract
Name the failed stage, preserve valid choices, provide retry and retain a readable product, price or contact route when 3D is unavailable.
Twelve tests for performance acceptance.
Identify page, host environment, product revision, runtime build, asset revision, device, browser, network, cache state and expected outcome. Keep repeatable traces instead of accepting an impression of speed.
Cold-load the representative product on a target mobile device and captured network profile.
Cold-load the largest valid configuration with every required decoder and texture path uncached.
Repeat with a warm cache and prove immutable assets are reused while changed product data refreshes.
Interact at the moment the first useful view appears and inspect input, processing and presentation delay.
Change a finish, dimension, module and incompatible option while tracing visual, price and validation completion.
Orbit and zoom the normal and largest scenes while recording frame-time distribution rather than average FPS alone.
Run repeated product-switch and reconfiguration cycles while tracking heap, GPU-resource proxies and listener counts.
Background and restore the tab, rotate a phone and resize the viewer without losing the saved configuration.
Simulate a missing model, texture, decoder and price response; verify readable fallback, retry and preserved work.
Force WebGL context loss in a controlled test and confirm recovery or a useful non-3D completion route.
Measure the configurator inside the real host page with analytics, consent, chat, fonts and marketing scripts active.
Compare field data by release, route, device tier, product family and scene size before accepting an optimization.
Avoid changes that only move the delay.
Review these patterns during architecture, procurement and every major catalogue or runtime change.
Optimizing the file, not the journey
A compressed model can still require decoder code, expensive texture upload, shader work and a blocked main thread. Accept total time to useful interaction.
One device represents every buyer
A developer laptop hides mobile CPU, memory, GPU, network and thermal constraints. Define a maintained physical-device matrix.
Average FPS becomes the verdict
A comfortable average can coexist with repeated long frames during option changes. Use a frame-time distribution and interaction traces.
Useful content waits for the viewer
If the useful content waits for 3D or the poster is replaced poorly, the page can delay or shift its largest element. Design the HTML and viewer loading sequence together.
Every feature loads up front
AR, export, rare accessories and alternate catalogues consume startup budget before the buyer expresses intent. Split by actual journey and preserve predictable loading states.
A spinner hides missing contracts
One indefinite loading state cannot explain model, rule, price or service failure. Expose stages, timeout, retry and a useful completion route.
Resources disappear only from the scene
Removing an object from a scene graph does not necessarily release GPU buffers, textures or programs. Define and test lifecycle disposal.
Lab scores replace field evidence
A controlled run is repeatable but cannot represent every real device and network. Pair laboratory diagnostics with privacy-conscious real-user measurement.
Make performance a maintained process.
Connect product milestones, representative devices, layered budgets, regression checks and production evidence. Give each stage an owner and an accepted deliverable.
Define journeys and milestonesProduct + performance owner
Name the pages, products, first useful view, first interaction, option response and completion events that matter commercially.
Evidence: Measurement dictionary and event contract
Build the representative matrixQA + engineering
Select ordinary and largest valid scenes, devices, browsers, networks, cache states and embedded-host conditions.
Evidence: Versioned test matrix with physical device IDs
Profile before changingWeb + 3D engineering
Capture network, main-thread, decoder, scene, GPU and API work so the team fixes the actual limiting stage.
Evidence: Baseline traces and ranked bottlenecks
Set layered budgetsArchitecture + product
Allocate initial, deferred and conditional budgets for code, assets, memory, interactions and long-session stability.
Evidence: Accepted budget table linked to target journeys
Optimize the critical pathWeb + 3D engineering
Reduce or move startup work, prioritize useful content and deliver the minimum product representation before optional quality.
Evidence: Before-and-after stage timings and visual approval
Control runtime cost3D runtime owner
Tune materials, textures, resolution, visibility, repeated components, generated geometry and cleanup for real devices.
Evidence: Frame, memory, context and repeat-cycle results
Automate regressionsQA + platform
Fail releases when accepted asset, code, interaction or stability budgets regress beyond the agreed tolerance.
Evidence: CI reports tied to exact build and asset revisions
Observe and improve in productionProduct operations
Segment field signals by release, product, scene, device and route, then reproduce changes in the laboratory.
Evidence: Dashboards, alerts, release annotations and corrective actions
Explain what changed, where and for whom.
Segment field signals by route, release, device tier, product family and scene size, then reproduce the affected state in a controlled trace. Retain only necessary diagnostic data; customer choices and personal data require a defined purpose and governance.
Laboratory evidence
Repeatable device, network, cache and scene conditions expose stage-level regressions and support before-and-after comparison.
Field evidence
Percentiles and segmented custom events reveal actual audience conditions, affected releases and products that need reproduction.
Release identity
Record code, asset, product-data and pricing revisions so a slow or incorrect session can be tied to a reproducible system state.
Privacy-conscious telemetry
Collect timings, coarse device and scene attributes, errors and revision IDs without retaining unnecessary customer or configuration content.
Fifteen questions for your configurator supplier.
Ask for traces, named owners and accepted scenarios. Evaluate the full host page and product journey rather than a single fast demonstration.
What exact event defines first useful product view, and how is it verified?
Which Core Web Vitals and custom configurator metrics are captured in field and laboratory data?
Which physical mobile, desktop and showroom devices represent the supported audience?
What normal and largest valid product configurations form the acceptance matrix?
Which resources are initial, deferred, conditional and cached, and why?
How are glTF/GLB parse, geometry decode, texture transcode, image decode and GPU upload measured separately?
How are draw calls, materials, transparency, shadows, effects and device pixel ratio controlled?
How does the viewer remain usable while deferred resources load or fail?
How are option-to-visual, option-to-price and validation-complete timings correlated to one configuration revision?
Which work can move off the main thread, and which browser constraints remain?
How are superseded geometry, materials, textures, render targets, workers and events disposed?
What happens after WebGL context loss, memory pressure, offline transition or a failed asset request?
How is the complete host page measured when the configurator is embedded with third-party scripts?
Which automated budget checks block a release, and what evidence is retained?
How does real-user monitoring minimize personal data while retaining diagnostic value?
Need a complete evaluation pack?
Combine these questions with product, rule, integration, accessibility, security and release criteria before comparing configurator platforms.
Define your performance requirements3D product configurator performance questions
Primary technical references
These publishers define the browser metrics, runtime formats and lifecycle guidance. Product-specific targets still require measurement on the accepted implementation.
Google: Web Vitals
Official guidance for Core Web Vitals, field measurement and the distinction between user-centred page metrics.
Google: Core Web Vitals thresholds
The rationale and good thresholds for LCP, INP and CLS evaluated at the 75th percentile.
Google: Optimize INP
Official explanation of input delay, processing duration, presentation delay and iframe contribution to page responsiveness.
Google: Optimize long tasks
Guidance on identifying work over 50 milliseconds, yielding and breaking up main-thread tasks.
Google: Use web workers
Guidance for moving appropriate work away from the main thread to reduce contention and improve responsiveness.
MDN: WebGL best practices
Browser-platform guidance covering system limits, VRAM budgeting, draw batching, compressed textures, resolution, blocking calls and resource deletion.
Khronos: glTF runtime asset delivery
Official glTF resources for efficient runtime delivery, validation, KTX 2.0 textures and 3D commerce workflows.
Three.js: disposing of objects
Official lifecycle guidance for releasing geometries, materials, textures, render targets and related WebGL resources.
Google: Largest Contentful Paint
Official definition, eligible content elements, measurement conditions and interpretation of the LCP loading metric.
Custom software for manufacturers
A configurator up front. Your business connected behind it.
We specialize in complex, configurable and made-to-order products. We build custom software around your catalogue, calculations, permissions, sales process and factory workflows.
Custom software around your configuration workflow
Configurix specializes in complex products. We build custom configurators and business software around your catalogue, rules and sales or factory processes. Scope performance across CRM and qualification, calendars and appointments, pricing and quotes, materials and bills of materials, jobs, orders, invoicing and website or system integrations. Accepted product states, data revisions, supported devices and downstream outputs are defined and tested for your implementation.
CRM and qualified leads
Capture the selected product, dimensions and options with each enquiry. Qualify by product fit, project requirements and commercial readiness, then assign the next action to the right salesperson.
New enquiry
WebGL, mobile and product interaction
Product fitQualified
WebGL, mobile and product interaction
RequirementsProposal
WebGL, mobile and product interaction
Next actionCalendars and appointments
Let a configured project continue into a sales consultation, technical review, survey or installation appointment. Connect calendars, responsibilities and reminders to the same customer record.
- 09:00Project review
- 11:30Technical review
- 14:00Production planning
Bill of materials and factory data
Map product selections to component codes, quantities, materials and cut lengths. Build the sales or manufacturing BOM your team needs, with revisions and production review rules defined for your products.
| Component | Quantity |
|---|---|
| FRM-01Configured components | 1 |
| PNL-02Materials and quantities | 1 |
| KIT-03Agreed operations | 1 |
Mapped to your product codes
Live prices and branded quotes
Apply your own formulas, price lists, dealer margins and approval rules. Generate a quote containing the saved specification, product images, commercial terms and a clear customer approval step.
Quote revision
Orders, jobs and production
Carry accepted choices into order lines and assigned jobs. Keep product revisions, required approvals, documents and delivery tasks together so sales and the factory work from the same specification.
- Accepted quote01
- Configured order02
- Production job03
- Installation04
Invoicing and accounting
Connect accepted orders to deposits, invoice drafts, payment terms and your accounting workflow. Agree which system issues the invoice and how references and confirmed payment status return to the project.
WebGL, mobile and product interaction
Built for your website. Connected to your systems.
Launch a branded configurator in your existing website or a custom sales portal. Connect CRM, ERP, PIM, ecommerce, calendars and accounting through available APIs, webhooks or agreed imports. We define the data, permissions and responsibilities for each connection with your team.
- 01Your website
- 02Configurator
- 03CRM & calendar
- 04ERP & accounting
Choose the workflows your implementation needs. We build and validate them against your products, documents and target systems.
Define your performance requirementsDefine performance against your real catalogue.
Bring a representative product, the largest valid configuration, target devices and delivery channel. We can scope the configurator, operational software, measurements and acceptance evidence around your products.