Onboarding Guide

Assets & Materials

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

Graph editor | Modifiers

Supported File Formats

Resources | Supported file types