Overview
3D assets and materials are the visual foundation of every TwikBot configurator. The quality, structure, and optimisation of these assets directly determines the rendering performance and visual quality of the end user experience. As a partner or agency, preparing and managing assets correctly is one of the most important responsibilities in a TwikBot implementation.
Assets and materials are imported and managed within the Graph Editor, where they are linked to parameters and geometry nodes to drive the real-time visual output.
Asset Types
TwikBot works with the following types of assets:
|
Asset Type |
Description |
|---|---|
|
3D Mesh |
The geometric shape of a product component. Imported from CAD or modelling tools. |
|
Texture |
Image files applied to geometry to define surface appearance (colour maps, normal maps, roughness maps, etc.) |
|
Material |
A combination of textures and rendering properties that define how a surface looks under lighting |
|
SVG / Vector |
Vector graphics used for custom shape or pattern inputs (e.g. custom engravings, logos) |
Preparing Assets for TwikBot
Assets created for high-quality offline rendering or CAD production are typically not suitable for direct use in TwikBot without preparation. Real-time browser-based rendering has significantly different requirements to offline or print-quality output.
Geometry Optimisation
-
Reduce polygon count — High-polygon meshes must be retopologised or decimated before import. Aim for the lowest polygon count that maintains acceptable visual quality at the expected viewing distance and zoom level
-
Clean topology — Meshes should have clean, manifold geometry without duplicate vertices, non-manifold edges, or inverted normals
-
Separate by material — Geometry should be separated into discrete meshes per material slot, making it easier to link materials to parameters in the Graph Editor
PBR Material Setup
TwikBot uses a PBR (Physically Based Rendering) material model. All materials should be prepared with the following texture maps:
|
Map |
Description |
|---|---|
|
Base Colour |
The surface colour or albedo of the material |
|
Roughness |
Controls how rough or smooth the surface appears (affects light scattering) |
|
Metalness |
Defines whether the surface behaves as a metal or non-metal |
|
Normal |
Adds surface detail and micro-geometry without increasing polygon count |
|
Ambient Occlusion (optional) |
Adds subtle shadowing in crevices and contact areas |
Texture Optimisation
-
Use power-of-two texture dimensions (e.g. 512×512, 1024×1024, 2048×2048)
-
Size textures appropriately for the target viewing context — avoid unnecessarily large textures for small or distant components
-
Use texture atlasing where possible to reduce the number of draw calls per scene
Mobile & Performance Considerations
If the configurator will be used on mobile devices, asset optimisation becomes even more critical. Mobile GPUs have significantly less processing power than desktop GPUs, and heavy assets will result in poor rendering performance.
As a general rule:
-
Target a lower polygon budget per product for mobile deployments
-
Reduce texture resolutions compared to desktop equivalents
-
Test on representative low-end mobile devices early in the implementation — not only at go-live
Linking Assets to Parameters
Once assets are imported into the Graph Editor, they are connected to the product graph using geometry and material nodes. The link between a parameter value and its corresponding asset is what drives the real-time visual update when a user makes a selection.
For example:
-
A colour parameter with values Red, Blue, and Black would be linked to three corresponding material nodes, each with its own base colour texture
-
A component variant parameter with values Standard and Premium would be linked to two different geometry nodes, each referencing the appropriate mesh
CAD Integration
For products with parametric or dimension-driven geometry — such as doors, windows, or structural components — TwikBot supports integration with CAD tools such as Rhino Grasshopper. This allows geometry to be generated or adapted dynamically based on configuration parameters, rather than relying on a fixed library of pre-modelled variants.
This approach is particularly relevant for manufacturing-focused deployments where the 3D geometry needs to accurately reflect real production dimensions and specifications.
Developer Resources
|
Resource |
Location |
|---|---|
|
Graph Editor Node Reference |
|
|
Supported File Formats |