Gem Material


The Gem material allows for a semi-realistic representation of gem materials in real-time WebGL only. It uses a simplified ray-tracing method for calculating the refractions, and thus it produces results very similar to the way the gemstones would look in real life, or rendered with a ray-tracing engine like Vray.

The Gem Material is not exportable to GLTF or AR.



Defines the color of the gem’s refraction. This color works in conjunction with the attenuation value described below - the darker the color, the stronger the attenuation effect.

Attenuation Distance

This property represents how easily the gem material can be penetrated by light. The larger the distance, the more transparent the gemstone would be. The shorter the distance, the more opaque the gemstone would be. The size of the gemstone mesh has a direct relationship to the usable range of attenuation. The larger the mesh, the larger the attenuation values will need to be.

The value is expressed in terms of meters. The range of 0.001 to 0.1 may prove the most useful for small, regular sized gemstones.

A value of 0 attenuation represents a backwards compatible representation of attenuation, to support shaders that were created prior to this property being added. To have a more realistic 0 value for attenuation, you can use very small values above 0.


This property represents how rough the reflections are on the surface of the gemstone. You can use the Roughness Factor in conjunction with the Roughness Image Asset to represent either a very clean and shiny surface, or a dirty surface with fingerprints. Breaking up the specular this way can produce a more realistic result, as long as the effect is kept subtle.

Index of Refraction

The index of refraction or IOR describes the way the material refracts light. A higher IOR looks like a more intense reflection. It is a standard property in PBR materials. Lists of accurate IOR values can be found online. The Gem operator’s default values are equivalent to a basic diamond: Default Value: 2.417, representing Diamonds

GemstoneRefractive Index

















Abbe Number

This property becomes available when the Dispersion option is checked ON.

Increases or decreases the dispersion effect of light in the refractions.

This can be adjusted for visual effect in order to create rainbows of color, or to reproduce the realistic dispersion of light through this medium.

High values represent low dispersion, while low values represent high dispersion.

Default Abbe Number: 55


In order for the gem shader to work correctly and efficiently, there are a few requirements that need to be met by each gemstone mesh.

  1. The geometry MUST be a single convex hull. This means that you cannot apply the Gem material to a mesh that represents a set of combined gemstones.

  2. The gemstone meshes need to have uniform scale. Stretching the geometry non-uniformly will produce visual artifacts.

  3. In order to conserve memory and increase performance, each similar gemstone should be instanced. This means that for the duplicated gemstones around a band, each gemstone should have its transform relative to the 0,0,0 location. This will allow ThreeKit to detect each of these stones as instances, and use a single stone to represent all of them, instead of detecting them as separately unique stones. Failure to do this can have a very significant impact on performance.

The number of unique stones in a selection is visible in the stats panel. Deselect everything in order to see the total number of unique stones in the current asset.

Last updated