Jewellery and Diamonds

Plugins, notes and guidelines for diamond and jewellery rendering for e-commerce websites.

Model preparation

Before moving to the rendering part, there are a few things to note white preparing the 3D models for jewellery.
We recommend using blender for importing, assigning materials, configuring diamond geometries, and optimisation.

Some key points to consider are:

Configuring diamond geometries

Diamonds can be marked in the sandbox editor with a cacheKey. Material Library support(coming soon) will make this easier.

For more granular control it is possible to mark the diamond materials in the GLTF with a custom extension.
For blender we have an open source add-on to add details while exporting GLTF files. It can be downloaded separately from:

The below tutorial explains how to use blender to prepare 3d models and configure diamonds for best visual results and performance using this addon.

Diamond Rendering

DiamondPlugin adds the functionality for importing, rendering, managing and exporting diamond materials in the viewer.
DiamondMaterial is designed for high quality diamond stone rendering but it is also used to render a variety of gem stones and glass objects with realtime simulation of light rays optimised for total internal reflection and refraction. While being very versatile, at the moment it is limited to convex shaped geometries for accurate results.

To use this add the plugin after viewer initialisation:

import { 
	DiamondPlugin, //...
} from "webgi";
... // your code
const viewer = ...
... // viewer setup and other plugins.
const diamondPlugin = await viewer.addPlugin(DiamondPlugin);

Environment Map

All diamond materials can use a separate environment map than the rest of the scene. This is a recommended option as diamonds generally need a more vibrant environment to have the shine than metals.
To set an environment map only for diamonds in the scene:

// First import the env map
const diamondEnvMap = await viewer.getManager().importer.importSinglePath<ITexture>('')
diamondPlugin.envMap = diamondEnvMap

// if a separate envMap is specified it is also possible to set the envMapRotation
diamondPlugin.envMapRotation = Math.PI / 2.0

Environment map intensity

Since its possible(and recommended) to load a separate environment map, the envMapIntensity is tracked(and serialised) separately for each material. The scene setting will not work for diamonds, and must be set separately for each instance of DiamondMaterial.

Material Properties

cacheKey and normalMapRes

DiamondMaterial internally uses some acceleration data structures for high performance. With this, it is possible to render 100s of objects at once without losing any performance, given that the number of unique model shapes is small.
It is recommended to use instanced geometries in the model so that similar diamonds are grouped, which also reduces the model size.
But, sometimes it is not possible to use the same instance, even though the diamond shape is same. For this, it is required to set a unique cacheKey value for the material or the object. The same value must be used on all objects with the same shape, this groups the objects and the resources are shared.
It is possible to set the normalMapRes parameter to control the quality of the simulation and therefore the cuts. 512 is generally a good value, but can be set to 1024 if the number of gemstones are limited or 256 for a lot of small gemstones.

Metallic Rendering

All metals in a jewellery model must use a Standard or Physical material. This is called Principled BSDF in Blender or more generally PBR (Physically based rendering).
For metallic objects, the metalness property must be set to 1.0 to get the correct rendering.

All Physical materials use the scene environment map, rotation and intensity values. While possible, it is not recommended to set the envMap property separately for metallic objects and the same global is used.

Metals look good with Screen Space Reflection turned ON, with which we can see self reflections and showing indirect light from nearby objects.

Anisotropic Metals.

Documentation coming soon.

Jewellery engraving

Coming soon.

Back to home