Rendering Layer

Overview

The rendering layer is responsible for the real-time 3D visualisation of product configurations. It translates the current configuration state — as determined by the configuration engine — into a visual output that updates instantly as an end user makes selections.

TwikBot's rendering layer is built on Three.js and WebGL, industry-standard web-based 3D technologies that run natively in the browser without requiring plugins, downloads, or dedicated hardware. This ensures broad device compatibility and a consistent experience across deployment contexts.

Rendering Modes

Web Browser (Desktop)

The primary rendering context for TwikBot is the desktop web browser. Configurations are rendered in real time within a 3D viewport, with support for multiple camera angles, lighting setups, and material representations. Desktop rendering offers the highest visual fidelity within the browser-based environment, taking advantage of the available GPU and screen resolution.

Mobile Browser

TwikBot's rendering layer is optimised for mobile browsers, allowing end users to interact with and visualise configurations on smartphones and tablets. Mobile rendering adapts to the constraints of the device — screen size, touch interaction, and GPU capability — while maintaining an acceptable level of visual quality.

Performance considerations are particularly important for mobile deployments. Asset optimisation during implementation (polygon count, texture resolution, material complexity) has a direct impact on rendering performance on lower-powered devices.

Augmented Reality (AR)

TwikBot supports AR experiences directly from the configurator, allowing end users to place and view their configured product in their physical environment using their device's camera. AR availability is device-dependent and is queried at runtime via the Web SDK using the .getAvailableARModes() method.

AR is particularly valuable in deployments where spatial context enhances the configuration experience — for example, visualising a configured bicycle, a door or window in a room setting, or an automotive accessory on a vehicle in a real environment.

Unreal Engine (Advanced)

For deployments requiring photorealistic rendering quality beyond what browser-based WebGL can deliver, TwikBot offers an Unreal Engine plugin. This allows the TwikBot configuration engine to drive a full Unreal Engine scene, combining TwikBot's product logic and parameter system with Unreal's high-fidelity rendering capabilities.

The Unreal Engine plugin is particularly suited for:

• Showroom and POS (point-of-sale) experiences requiring cinematic visual quality

• VR deployments (e.g. Meta Quest) where immersive presentation is a key requirement

• In-store kiosk installations on dedicated high-end hardware

• Streaming experiences where Unreal output is embedded in a webpage via Unreal Pixel Streaming

The plugin connects to the TwikBot Platform via a WebSocket, allowing the web-based platform UI or a custom interface to drive the Unreal scene remotely — including loading products, getting parameter data, and setting parameter values in real time.

Note: The Unreal Engine plugin is an advanced integration that requires Unreal Engine expertise. Partners and agencies implementing this path should contact Twikit support for access to the latest plugin version. Full technical documentation is available in Twikit Docs.

How the Rendering Layer Works

The rendering layer operates in close coordination with the TwikBot Platform. When a user changes a parameter value, the configuration engine evaluates the new state and instructs the rendering layer to update the visual output accordingly. This happens in real time, with no page reload or manual refresh required.

User selects option
        ↓
Configuration Engine evaluates state
        ↓
Rendering Layer receives updated state
        ↓
Three.js / WebGL updates 3D viewport
        ↓
Updated visual displayed to user

The rendering layer does not independently manage configuration logic — it is a presentation layer that responds to instructions from the TwikBot Platform.

Asset Requirements

The quality and performance of the rendering output is directly dependent on the 3D assets provided during implementation. Partners and agencies are responsible for preparing assets that meet TwikBot's requirements and are optimised for real-time browser-based rendering.

Key considerations:

• Polygon count — Assets should be optimised for real-time rendering. High-polygon models suitable for offline rendering will need to be retopologised or decimated for use in TwikBot

• Texture resolution — Textures should be sized appropriately for the target rendering context, balancing visual quality with load time and GPU memory usage

• Material setup — TwikBot uses a PBR (Physically Based Rendering) material model. Assets should be prepared with PBR-compatible material definitions (base colour, roughness, metalness, normal maps)

• File formats — Refer to Twikit Docs for supported 3D file formats and import specifications

Asset preparation is one of the most significant factors in the success of a TwikBot implementation. Poorly optimised assets are the most common cause of rendering performance issues, particularly on mobile devices.

Performance Considerations

Real-time 3D rendering in the browser is resource-intensive. The following factors should be considered during implementation to ensure acceptable performance across the target device range:

• Minimise the total number of draw calls per scene

• Use level-of-detail (LOD) techniques for complex products with many components

• Optimise texture atlasing to reduce the number of texture lookups per frame

• Test rendering performance on representative low-end devices early in the implementation process, not only at go-live

Developer Resources