Updating Material Properties in VU OS

The visual "look and feel" of a 3D product is controlled through Material Properties within the Template Editor. The platform utilizes the 3JS (Three.js) engine, specifically leveraging MeshStandardMaterial and MeshPhysicalMaterial to achieve high-fidelity, physically-based rendering (PBR).

How to Access Material Settings

To update these properties, navigate to Customizer>Materials, select your desired Material, and click EDIT. Properties are defined within the materialParameters object for each specific material.

Core Material Properties Definitions

Admin can tune the following parameters to ensure the digital model accurately represents the physical product:

• Color: Defines the base surface color (albedo). This sets a solid color across the entire mesh.

• Roughness: Controls surface smoothness. A value of 0 results in a perfectly shiny, mirror-like surface, while a value of 1 results in a fully matte/rough surface.

• Metalness: Defines the metallic quality of the material. A value of 0 is non-metal (like plastic or wood), and 1 is fully metallic.

• Map: The diffuse (color/albedo) texture file. This image provides the base patterns or gradients for the surface.

• NormalMap: Adds surface detail and grain (such as leather texture or woven patterns) by simulating how light hits the surface, without actually changing the underlying geometry.

• RoughnessMap: A texture that allows for non-uniform roughness. This controls smoothness on a per-pixel basis, allowing for designs with both shiny and matte areas on a single part.

• metalnessMap: A texture file that controls metalness on a per-pixel basis, specifying which exact parts of a surface should appear metallic.

• aoMap (Ambient Occlusion): A texture used to add shadows in crevices and contact points, significantly enhancing the realism and depth of the model.

• displacementMap: Physically modifies the actual geometry of the model to create effects like metal stamping or deep indentations. This property requires a high-poly mesh to function correctly.• opacity: Controls material transparency. This determines how much of the underlying object or background can be seen through the material.

• transparent: A boolean setting that enables material transparency. For the opacity property to function, transparent must be set to true.

Best Practices for Material Updates

1. Utilizing Inheritance

To maintain consistency and reduce repetitive work, you can use Material Inheritance. You can define a "base" mesh material that contains universal maps (like normalMap or aoMap) and then have specific color variants inherit those properties while only changing the color parameter.

1. Automatic Application via Elements

Material properties can be updated dynamically by the end-user through List elements. Within the element configuration, you can assign a Materials array that tells the system to apply a specific material to a specific mesh when a user selects an option (e.g., selecting "Matte Black" applies the matte material to the helmet shell mesh).

1. Texture Optimization

When uploading image files for properties like map or normalMap, VU OS utilizes a pipeline that automatically converts and compresses them into WEBP files. This ensures high fidelity while optimizing performance for mobile devices.

1. Validating Color Accuracy

Always check the Texture Color Space in the General tab of your template. It is recommended to use sRGB for most projects to ensure that raw colors remain consistent and do not "bleed" from underlying layers.