Asuka Studio
3D Product Visualization
Place artwork on real product surfaces while keeping geometry, occlusion, and performance under control.
The Babylon.js renderer turns product meshes into constrained, interactive customization surfaces. Customers can inspect designs from every angle while artwork stays attached to the intended geometry.
Babylon.js
WebGL renderer isolated in its own lazy bundle
Surface aware
Text and images follow mesh tangents and normals
GLB
Optimized scenes, materials, parts, and camera presets
Scene preparation
Turn a GLB into a product, not just a model.
Map meshes to product elements, define variations and materials, then save camera presets that frame the product and its editable parts.
Scene configuration
- Mesh-to-element mapping
- Material and color variations
- Global and part-focused camera presets
- Scene scale, orientation, and interaction settings
- Optional premium GLB optimization
Surface placement
Project artwork onto the selected surface.
Surface patches reconstruct the relevant triangles and UVs so artwork follows the mesh instead of the current camera plane.
Placement controls
- Surface-normal alignment during insert and drag
- Mesh-only drawing areas
- Live movement constrained to allowed geometry
- Correct front-face winding and image orientation
- Occlusion by product parts outside the selected mesh
Performance
Keep complex products responsive.
Renderer loading, surface queries, patch rebuilds, and drag previews are separated so expensive geometry work is performed only when necessary.
Runtime safeguards
- Babylon bundle loaded on the first 3D view
- Cached mesh acceleration data
- Live drag preview with stable commit on release
- Camera-state persistence in product configuration
- Consistent renderer API shared with 2D
Place
Markers
Define meaningful insertion points and attach replacement behavior to the real clicked surface.
Constrain
Mesh drawing areas
Limit a layer to a selected mesh or to a user-drawn region on that mesh.
Inspect
Camera intelligence
Focus variations without moving the product and return to a centered root view.
Next step
Prepare your first 3D product.
Use the product configuration guide to map meshes, views, cameras, and editable surfaces.