Gemstone Material

Rendering gemstones in 3D can be a challenging task because of their unique properties. Gemstones have a high level of transparency and refract light in a way that makes them difficult to accurately represent in a 3D image. Additionally, gemstones have many facets and angles that must be accurately represented in the 3D rendering, which can require a high level of detail and precision. To achieve a high-quality 3D rendering of a gemstone, specialized software and techniques designed for rendering gemstones are often necessary. On the web, this task is even more challenging as resources are more limited.

As shown in the example below, we found a way to achieve great results with a specialized shader we created. This shader can visualize different types of gemstones (Presets options on the right) for different geometries (Diamond Shape options on the right). On the right, you can see the UI where you can select global options and change parameters. On the left side, you can adjust the specific settings of the gemstone material being used.

This shader works by taking into account the geometry of the gemstone. Therefore, the gemstone's geometry must be realistic to achieve the best results.

Developers Note: Here is a straightforward example without any user interface, only with the material change.

Material Properties

On the right side of the UI, you can see all the available material properties. We created a few different presets for various stone types, which you can select on the left. These presets adjust the UI on the left accordingly. We will now discuss all the available properties on the left and what kind of effect they have on the rendering of the gemstone.

Environment Map

The environment map plays an important role in gemstone rendering as it adds color, light, and an environment to reflect. Just try a few of the environment maps and see what kind of difference they make. In the example above, we always apply the environment to all materials in the scene, but it is possible to only apply it to materials individually, as you can see in the simple example here.

Refraction Index

The refractive index (RI) is a measure of the bending of light as it passes from one medium to another. Different gemstones have different refractive indices, which affect their appearance immensely. Below is a list of a few gemstones and their refractive indices, and here is a link for many more if you are interested.

Impurity Map

For some gemstones, perfection is the goal, and any kind of impurity would decrease its value. But this is not the case for all of them. In our Emerald example (Presets -> Emerald), we add impurities via the Impurity Map to add a more natural feeling to the stone.

Impurity Scale

The Impurity Scale is simply an option to adjust how much the Impurity Map affects the final result.

Color Transfer Begin & Color Transfer End

When light passes through a gemstone, it changes color the further it passes through the stone. To simulate this behavior, we provide two color values that are interpolated when tracing through the stone. You can see these values used best in the Blue Diamond preset. For testing, just select two completely different color values to see the effect.

Gamma, Contrast & Brightness

As the adjustments of the gemstone rendering is something that can be very subjective and requires a high degree of adaptability, we provide Gamma, Contrast, and Brightness values directly on the shader level to make these adjustments as easy as possible.

Dispersion

Dispersion is the property of a gemstone to separate white light into its individual colors, much like a rainbow. This is caused by the refractive index differences of the various wavelengths of light passing through the gemstone. The higher the dispersion, the greater the separation of colors, which can result in a more brilliant and sparkling appearance. In our shader, we make this adjustable by a single slider and add an effect to simulate dispersion.

Tracing Depth

Within our shader, we trace rays through the gemstone, and depending on the geometry, the next steps are determined. The depth to which we trace the rays through the stone can be determined with this slider. This setting has an immediate effect on performance, so please consider this when setting it.

Tracing Opacity

Every time a ray is traced through the stone, there is a chance for it to exit the stone again. This slider can be used to simulate this effect and increase or reduce the opacity of the next tracing steps.

Additional CodeSandBoxes

• Side Diamonds
  Example where not just the main stone has the gem stone material applied, but all of them.

• Changing of the Environment Map
  The environment map is changed just for this material.

• Animation of Diamonds
  An animation to the ring is applied.