gemrenderer · MIT · framework-free

Real gemstone cuts,
ray-traced in the browser

From trilliant and baguette to pear, emerald cut, heart, cabochon and more — each stone shows off a different cut. Under the hood, each pixel traces a light path through the stone, giving realistic reflection, refraction and dispersion. Drag any stone to spin it.

Options

Rendering

Mode

Clarity 9

Custom stone

Colour

Cut

Optics ray-traced only

Fire (dispersion) 1.0×

Light paths by clarity

Glint 0.40×

Stage

Brightness 1.0×

Studio floor

Featured size 330px

Turntable keep the featured stone spinning

Every baked stone is cached by stone and clarity, and the whole page shares one WebGL context. README →

Diamond

Round brilliant · clarity 9

Sample gems

Click a stone to feature it.

npm install gemrenderer three

import { GemView } from 'gemrenderer'
import { gemSpec } from 'gemrenderer/presets'

new GemView('#mount', { ...gemSpec('ruby'), clarity: 8 })

gemrenderer is MIT licensed. The per-pixel hull tracer is a derivative work of ehsanwwe/diamond-shader-lab by Ehsan Moradi (MIT); see third-party notices for what came from where. Cut geometry follows the diagrams at facetdiagrams.net.