Multi Materials
In Babylon.js, multi materials allow you to assign multiple materials to a single mesh, enabling each part of the mesh to have different visual properties. This technique is particularly useful for creating complex objects where various surfaces require distinct appearances, such as characters, vehicles, or intricate architectural designs.
When using multi-materials, a mesh is typically divided into sub-meshes. Each sub-mesh can reference a different material, allowing for fine control over how materials are applied across the entire object. You have the flexibility to subdivide the mesh into sub-meshes, and it is the responsibility of Reactylon to assign each material to the corresponding sub-mesh.
In the following example you can see a sphere where are applied three diffrent materials.
<sphere name='sphere' options={{ segments: 16, diameter: 3 }} onCreate={(sphere) => {
sphere.subMeshes = [];
const verticesCount = sphere.getTotalVertices();
new SubMesh(0, 0, verticesCount, 0, 900, sphere);
new SubMesh(1, 0, verticesCount, 900, 900, sphere);
new SubMesh(2, 0, verticesCount, 1800, 2088, sphere);
}}>
<multiMaterial name='multi-material'>
<standardMaterial name='material-1' diffuseColor={Color3.Red()}>
<texture kind='bumpTexture' url={bumpWall.src} />
</standardMaterial>
<standardMaterial name='material-2' diffuseColor={Color3.Blue()} />
<standardMaterial name='material-3' emissiveColor={Color3.Yellow()} />
</multiMaterial>
</sphere>
Under the hood, Reactylon will automatically assign each child material to the corresponding parent multi material by parent.subMaterials.push(child).
Learn More
For additional info and advanced use cases, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/multiMaterials.
