Introduction 00:00

In this lesson, we are going to create a wobbly sphere:

To create an animation that feels this organic, we need to animate the vertices in a vertex shader, but as you can see, all the properties of the MeshPhysicalMaterial are still supported.

We can play with the metalness, roughness, transmission, and IOR. Even the shadow is supported and it still looks just like a classic MeshPhysicalMaterial.

To make this possible we need to start from the built-in MeshPhysicalMaterial as we did in the Modified Material lesson, and improve it. But this time, we are going to use a different approach and rely on the Custom Shader Material library.

This library injects shader code directly in the Three.js built-in material, but without us having to dig into the Three.js shaders to understand where and how to inject the code, thus making it beginner-friendly.

Setup 02:10

The starter already contains the following:

• A IcosahedronGeometry sphere, a MeshPhysicalMaterial applied to it and a bunch of associated tweaks
• A plane to test the shadow
• An HDR environment map is used as background but also to light up the scene
• A DirectionalLight to light up the sphere even more and cast a shadow on the plane
• The vite-plugin-glsl dependency to handle GLSL files
• A shaders/ folder with a simplexNoise4d.glsl file ready to be included
• A GLTFLoader instance with a DracoLoader instance associated with it so that we can test our wobbly animation on models
• Suzanne model as suzanne.glb in the static/ folder
• OrbitControls to rotate around

Custom Shader Material 03:33

For this effect, we are going to enhance the MeshPhysicalMaterial and make the surface wobble.

For now, we just want to implement Custom Shader Material and, later, we are going to create the wobble animation.

Dependency

Custom Shader Material is available on NPM: https://www.npmjs.com/package/three-custom-shader-material

Install the library using npm install and force the version to 5.4:

npm install three-custom-shader-material@5.4

We force the version to make sure it works with the lesson.

In script.js, import CustomShaderMaterial from 'three-custom-shader-material/vanilla':

import CustomShaderMaterial from 'three-custom-shader-material/vanilla'

vanilla indicates that it’s the classic implementation of the library without using any third-party library like React Three Fiber (which you’ll discover later in the course).

Using CustomShaderMaterial, we can create our new material based on a built-in material.

Replace the THREE.MeshPhysicalMaterial by CustomShaderMaterial and add the baseMaterial property to THREE.MeshPhysicalMaterial. Next, we are going to separate the Custom Shader Material and the base material properties using comments:

// Material
const material = new CustomShaderMaterial({
    // CSM
    baseMaterial: THREE.MeshPhysicalMaterial,

    // MeshPhysicalMaterial
    metalness: 0,
    roughness: 0.5,
    color: '#ffffff',
    transmission: 0,
    ior: 1.5,
    thickness: 1.5,
    transparent: true,
    wireframe: false
})

As you can see, the material is still working. Even though it’s now an instance of CustomShaderMaterial, it’s using THREE.MeshPhysicalMaterial as the base material and all previously supported properties are still working.