How to Create Custom Shaders for a diamond in Three Js

Published On: 16 September 2024.By Hemant Singh.

General

How to Create Custom Shaders for a diamond in Three Js

Three.js is a powerful 3D library that makes Web GL easier to use. You can create complex 3D scenes, objects, and even custom shaders with it. If you’re working on a diamond object and want to give it a unique look with custom shaders, this tutorial will help you do it with the three-mesh-bvh library. You will be able to use a custom shader that turns a regular diamond into a sparkling one. Before reading this guide, you need to read the article about custom shaders in Three JS and having a “Magic only” diamond model. Useful links will be provided later. You also need to install three js and three-mesh-bvh in the Three.js applications on your computer.

What is Three.js?

Three.js is a JavaScript library that simplifies the creation of 3D graphics on the web. It provides a wide range of features for rendering 3D scenes, including geometry, lighting, materials, and camera controls. You can load objects using different formats, create dynamic lighting, and apply shaders to enhance visual effects.

What are Shaders?

Shaders are small programs that run on the GPU and dictate how objects are drawn on the screen. In Three.js, shaders are typically written in GLSL (OpenGL Shading Language) and are divided into two main types:

Vertex Shader: Processes each vertex of a 3D object and determines its position on the screen.
Fragment Shader: Calculates the color of each pixel that makes up the 3D object.

Custom shaders give you complete control over the appearance of your objects, allowing for effects that go beyond the standard materials provided by Three.js.

Setting Up Three.js

Before diving into custom shaders, you need to set up a basic Three.js scene. Install the necessary dependencies:

npm install three
npm install three-mesh-bvh

1 2	npm install three npm install three-mesh-bvh

This will install Three.js and the three-mesh-bvh library, which is used for handling efficient raycasting and other geometry operations.

The first step is create a scene, set up a camera, and render it all using the WebGL renderer.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Set up camera position
camera.position.set(0, 1, 5);

// Basic render loop
function animate() {
&nbsp; &nbsp; requestAnimationFrame(animate);
&nbsp; &nbsp; renderer.render(scene, camera);
}
animate();

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// Set up camera position

camera.position.set(0, 1, 5);

// Basic render loop

function animate() {

    requestAnimationFrame(animate);

    renderer.render(scene, camera);

}

animate();

Now load your diamond object. The object should be in a format that Three.js supports, such as OBJ, GLTF, or JSON. Below is a code snippet that loads a diamond object and traverses through its children to apply different materials. Here we are using OBJ format.

loader.load(
    'path/to/diamond.obj', // Replace with your actual path
    function (loadedObject) {
        loadedObject.traverse(child => {
            if (child instanceof THREE.Mesh) {
                // Apply custom shader material to diamond mesh
                child.material = diamondMaterial;
            }
        });
        scene.add(loadedObject);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        console.error('An error happened', error);
    }
);

loader.load(

'path/to/diamond.obj', // Replace with your actual path

function (loadedObject) {

loadedObject.traverse(child => {

if (child instanceof THREE.Mesh) {

// Apply custom shader material to diamond mesh

child.material = diamondMaterial;

}

});

scene.add(loadedObject);

function (xhr) {

console.log((xhr.loaded / xhr.total * 100) + '% loaded');

function (error) {

console.error('An error happened', error);

}

);

This code loads the diamond object and traverses through its mesh components to apply the custom diamond shader if the mesh name contains “diamond.”

Creating Custom Shaders

Next, let’s create a custom shader to simulate internal reflections and refractions within the diamond. We’ll use the ShaderMaterial class to integrate these shaders into Three.js. Additionally, we will utilize the three-mesh-bvh library to optimize ray tracing for our diamond.

import {
    MeshBVH,
    MeshBVHUniformStruct,
    BVHShaderGLSL,
    SAH
} from '../../vendor/three-mesh-bvh';  // Replace with your actual library path

const params = {
    color: '#ffffff',
    bounces: 1.0,
    ior: 2.4,  // Index of Refraction for diamond
    aberrationStrength: 0.01,
    fastChroma: false,
    animate: true,
};

const environmentPromise = getRGBELoader().load('/img/env-gem-2.hdr'); // Replace environment image path according to your uses. 

let environment = environmentPromise;
environment.mapping = THREE.EquirectangularReflectionMapping;
environment.generateMipmaps = true;
environment.minFilter = THREE.LinearMipmapLinearFilter;
environment.magFilter = THREE.LinearFilter;

const diamondMaterial = new THREE.ShaderMaterial({
    uniforms: {
        envMap: { value: environment },
        bvh: { value: new MeshBVHUniformStruct() },
        projectionMatrixInv: { value: camera.projectionMatrixInverse },
        viewMatrixInv: { value: camera.matrixWorld },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
        bounces: { value: params.bounces },
        ior: { value: params.ior },
        color: { value: new THREE.Color(params.color) },
        fastChroma: { value: params.fastChroma },
        aberrationStrength: { value: params.aberrationStrength },
    },
    vertexShader: `
        varying vec3 vWorldPosition;
        varying vec3 vNormal;
        uniform mat4 viewMatrixInv;
        void main() {
            vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
            vNormal = (viewMatrixInv * vec4(normalMatrix * normal, 0.0)).xyz;
            gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        #define RAY_OFFSET 0.001
        precision highp float;
        ${BVHShaderGLSL.common_functions}
        ${BVHShaderGLSL.bvh_struct_definitions}
        ${BVHShaderGLSL.bvh_ray_functions}

        varying vec3 vWorldPosition;
        varying vec3 vNormal;

        uniform sampler2D envMap;
        uniform float bounces;
        uniform BVH bvh;
        uniform float ior;
        uniform vec3 color;
        uniform bool fastChroma;
        uniform mat4 projectionMatrixInv;
        uniform mat4 viewMatrixInv;
        uniform mat4 modelMatrix;
        uniform vec2 resolution;
        uniform float aberrationStrength;

        vec3 totalInternalReflection(vec3 incomingOrigin, vec3 incomingDirection, vec3 normal, float ior, mat4 modelMatrixInverse) {
            vec3 rayOrigin = incomingOrigin;
            vec3 rayDirection = refract(incomingDirection, normal, 1.0 / ior);
            rayOrigin = vWorldPosition + rayDirection * RAY_OFFSET;
            rayOrigin = (modelMatrixInverse * vec4(rayOrigin, 1.0)).xyz;
            rayDirection = normalize((modelMatrixInverse * vec4(rayDirection, 0.0)).xyz);

            for (float i = 0.0; i < bounces; i++) {
                uvec4 faceIndices = uvec4(0u);
                vec3 faceNormal = vec3(0.0, 0.0, 1.0);
                vec3 barycoord = vec3(0.0);
                float side = 1.0;
                float dist = 0.0;

                bvhIntersectFirstHit(bvh, rayOrigin, rayDirection, faceIndices, faceNormal, barycoord, side, dist);
                vec3 hitPos = rayOrigin + rayDirection * dist;
                vec3 refractedDirection = refract(rayDirection, faceNormal, ior);

                if (length(refractedDirection) != 0.0) {
                    rayDirection = refractedDirection;
                    break;
                }

                rayDirection = reflect(rayDirection, faceNormal);
                rayOrigin = hitPos + rayDirection * RAY_OFFSET;
            }

            return normalize((modelMatrix * vec4(rayDirection, 0.0)).xyz);
        }

        vec4 envSample(sampler2D envMap, vec3 rayDirection) {
            vec2 uvv = equirectUv(rayDirection);
            return texture(envMap, uvv);
        }

        void main() {
            mat4 modelMatrixInverse = inverse(modelMatrix);
            vec3 normal = vNormal;
            vec3 rayOrigin = cameraPosition;
            vec3 rayDirection = normalize(vWorldPosition - cameraPosition);

            if (aberrationStrength != 0.0) {
                vec3 rayDirectionG = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);
                vec3 rayDirectionR, rayDirectionB;

                if (fastChroma) {
                    rayDirectionR = normalize(rayDirectionG + 1.0 * vec3(aberrationStrength / 2.0));
                    rayDirectionB = normalize(rayDirectionG - 1.0 * vec3(aberrationStrength / 2.0));
                } else {
                    float iorR = max(ior * (1.0 - aberrationStrength), 1.0);
                    float iorB = max(ior * (1.0 + aberrationStrength), 1.0);
                    rayDirectionR = totalInternalReflection(rayOrigin, rayDirection, normal, iorR, modelMatrixInverse);
                    rayDirectionB = totalInternalReflection(rayOrigin, rayDirection, normal, iorB, modelMatrixInverse);
                }

                float r = envSample(envMap, rayDirectionR).r;
                float g = envSample(envMap, rayDirectionG).g;
                float b = envSample(envMap, rayDirectionB).b;
                gl_FragColor.rgb = vec3(r, g, b) * color;
            } else {
                rayDirection = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);
                gl_FragColor.rgb = envSample(envMap, rayDirection).rgb * color;
            }

            gl_FragColor.a = 1.0;
            #include <tonemapping_fragment>
            #include <colorspace_fragment>
        }
    `,
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

import {

MeshBVH,

MeshBVHUniformStruct,

BVHShaderGLSL,

SAH

} from '../../vendor/three-mesh-bvh'; // Replace with your actual library path

const params = {

color: '#ffffff',

bounces: 1.0,

ior: 2.4, // Index of Refraction for diamond

aberrationStrength: 0.01,

fastChroma: false,

animate: true,

};

const environmentPromise = getRGBELoader().load('/img/env-gem-2.hdr'); // Replace environment image path according to your uses.

let environment = environmentPromise;

environment.mapping = THREE.EquirectangularReflectionMapping;

environment.generateMipmaps = true;

environment.minFilter = THREE.LinearMipmapLinearFilter;

environment.magFilter = THREE.LinearFilter;

const diamondMaterial = new THREE.ShaderMaterial({

uniforms: {

envMap: { value: environment },

bvh: { value: new MeshBVHUniformStruct() },

projectionMatrixInv: { value: camera.projectionMatrixInverse },

viewMatrixInv: { value: camera.matrixWorld },

resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },

bounces: { value: params.bounces },

ior: { value: params.ior },

color: { value: new THREE.Color(params.color) },

fastChroma: { value: params.fastChroma },

aberrationStrength: { value: params.aberrationStrength },

vertexShader: `

varying vec3 vWorldPosition;

varying vec3 vNormal;

uniform mat4 viewMatrixInv;

void main() {

vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;

vNormal = (viewMatrixInv * vec4(normalMatrix * normal, 0.0)).xyz;

gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

}

fragmentShader: `

#define RAY_OFFSET 0.001

precision highp float;

${BVHShaderGLSL.common_functions}

${BVHShaderGLSL.bvh_struct_definitions}

${BVHShaderGLSL.bvh_ray_functions}

varying vec3 vWorldPosition;

varying vec3 vNormal;

uniform sampler2D envMap;

uniform float bounces;

uniform BVH bvh;

uniform float ior;

uniform vec3 color;

uniform bool fastChroma;

uniform mat4 projectionMatrixInv;

uniform mat4 viewMatrixInv;

uniform mat4 modelMatrix;

uniform vec2 resolution;

uniform float aberrationStrength;

vec3 totalInternalReflection(vec3 incomingOrigin, vec3 incomingDirection, vec3 normal, float ior, mat4 modelMatrixInverse) {

vec3 rayOrigin = incomingOrigin;

vec3 rayDirection = refract(incomingDirection, normal, 1.0 / ior);

rayOrigin = vWorldPosition + rayDirection * RAY_OFFSET;

rayOrigin = (modelMatrixInverse * vec4(rayOrigin, 1.0)).xyz;

rayDirection = normalize((modelMatrixInverse * vec4(rayDirection, 0.0)).xyz);

for (float i = 0.0; i < bounces; i++) {

uvec4 faceIndices = uvec4(0u);

vec3 faceNormal = vec3(0.0, 0.0, 1.0);

vec3 barycoord = vec3(0.0);

float side = 1.0;

float dist = 0.0;

bvhIntersectFirstHit(bvh, rayOrigin, rayDirection, faceIndices, faceNormal, barycoord, side, dist);

vec3 hitPos = rayOrigin + rayDirection * dist;

vec3 refractedDirection = refract(rayDirection, faceNormal, ior);

if (length(refractedDirection) != 0.0) {

rayDirection = refractedDirection;

break;

}

rayDirection = reflect(rayDirection, faceNormal);

rayOrigin = hitPos + rayDirection * RAY_OFFSET;

}

return normalize((modelMatrix * vec4(rayDirection, 0.0)).xyz);

}

vec4 envSample(sampler2D envMap, vec3 rayDirection) {

vec2 uvv = equirectUv(rayDirection);

return texture(envMap, uvv);

}

void main() {

mat4 modelMatrixInverse = inverse(modelMatrix);

vec3 normal = vNormal;

vec3 rayOrigin = cameraPosition;

vec3 rayDirection = normalize(vWorldPosition - cameraPosition);

if (aberrationStrength != 0.0) {

vec3 rayDirectionG = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);

vec3 rayDirectionR, rayDirectionB;

if (fastChroma) {

rayDirectionR = normalize(rayDirectionG + 1.0 * vec3(aberrationStrength / 2.0));

rayDirectionB = normalize(rayDirectionG - 1.0 * vec3(aberrationStrength / 2.0));

} else {

float iorR = max(ior * (1.0 - aberrationStrength), 1.0);

float iorB = max(ior * (1.0 + aberrationStrength), 1.0);

rayDirectionR = totalInternalReflection(rayOrigin, rayDirection, normal, iorR, modelMatrixInverse);

rayDirectionB = totalInternalReflection(rayOrigin, rayDirection, normal, iorB, modelMatrixInverse);

}

float r = envSample(envMap, rayDirectionR).r;

float g = envSample(envMap, rayDirectionG).g;

float b = envSample(envMap, rayDirectionB).b;

gl_FragColor.rgb = vec3(r, g, b) * color;

} else {

rayDirection = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);

gl_FragColor.rgb = envSample(envMap, rayDirection).rgb * color;

}

gl_FragColor.a = 1.0;

#include <tonemapping_fragment>

#include <colorspace_fragment>

}

});

This shader code implements internal reflection and refraction, giving the diamond a realistic appearance. It uses the three-mesh-bvh library to handle raycasting, making the rendering efficient even for complex models like diamonds.

Key Parameters Explained:

bvh: The bounding volume hierarchy used for efficient raycasting.
ior: Index of Refraction, set to 2.4 for diamonds.
bounces: Number of internal reflections before the light exits the diamond.
aberrationStrength: Controls the strength of chromatic aberration.
envMap: The environment map used for reflections.

Advanced Shader Techniques for Diamonds.

To make your diamond shader look even more realistic, consider adding these effects:

Total Internal Reflection: This makes light reflect inside the diamond instead of escaping, and it’s already handled by the fragment shader.
Chromatic Aberration: This splits light into different colors, creating a rainbow effect.
Multiple Bounces: Simulating several light bounces inside the diamond can enhance more realistic, but it may affect performance. Balance quality and performance based on your needs.

Optimizing Shader Performance

When dealing with complex shaders, especially those involving ray tracing, performance is always a concern. Here are some optimization tips:

Use MeshBVH: The three-mesh-bvh library significantly improves ray tracing performance by reducing the number of intersection tests needed.
Reduce Ray Bounces: While more bounces can improve realism, they also add computational cost. Adjust the bounces uniform to find a good balance.
Lower Resolution: For lower-end devices, you can render the scene at a lower resolution and upscale it.

Adding Post-Processing Effects

To make your diamond shader stand out even more, consider adding post-processing effects like bloom or tone mapping. Three.js provides several built-in post-processing shaders that can enhance the final render.

const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(new THREE.BloomPass());

function animate() {
    requestAnimationFrame(animate);
    composer.render();
}
animate();

const composer = new THREE.EffectComposer(renderer);

composer.addPass(new THREE.RenderPass(scene, camera));

composer.addPass(new THREE.BloomPass());

function animate() {

requestAnimationFrame(animate);

composer.render();

}

animate();

Debugging and Troubleshooting Shaders

Debugging shaders can be challenging, especially with complex effects like ray tracing. Here are some tips:

Visualize Intermediate Results: Start by outputting simple colors or vectors to the screen to ensure your calculations are correct.
Use WebGL Debugging Tools: Tools like the WebGL Inspector or Three.js editor can help you inspect the state of your shaders.
Check Performance: Monitor your frame rates and GPU usage to ensure your shader isn’t causing performance issues.

Final Touches and Enhancements:

Now that your diamond shader is complete, consider adding finishing touches like animation or interaction. For example, you could rotate the diamond or change the light source dynamically to showcase the effects of your shader.

Conclusion:

Creating custom shaders in Three.js offers endless possibilities for achieving unique visual effects. In this tutorial, we explored how to build a complex diamond shader that simulates internal reflections, refractions, and chromatic aberration. By leveraging the power of Three.js and the three-mesh-bvh library, you can create stunning 3D visuals that push the boundaries of what’s possible in a web browser.

Ref:

https://github.com/gkjohnson/three-mesh-bvh