Hi everyone,
I have been working on a real-time diamond rendering experiment using Three.js and custom GLSL shaders.
Live demo:
Source code:
The project includes two different diamond rendering methods.
The first diamond is fully procedural. Its shape is created inside the shader with an SDF. It uses RGB dispersion, Fresnel reflections, and repeated internal light reflections.
The second diamond uses a GLTF mesh. It has a separate pass for back-face normals, which helps create the refraction and internal reflections.
Both diamonds are rendered inside a 360° HDR environment. The bright windows and architecture help show the facets, reflections, refraction, and rainbow colors.
My main goal was to learn more about real-time gemstone rendering and test different ways to create a bright and colorful diamond.
The project is built with Three.js, custom GLSL, React, and Next.js. It also supports touch interaction on mobile devices.
I would be happy to hear your feedback, especially about the refraction, dispersion, visual quality, and performance.