Introduction 00:00

Until now, we were creating brand new shader materials. But what if we only want to modify one of the Three.js built-in materials? Maybe we are happy with the result of the MeshStandardMaterial, but we want to add vertex animations to it. If we were to rewrite the whole MeshStandardMaterial, it would take too much time to handle the lights, the environment maps, physically based rendering, all the types of textures, etc.

Instead, we will start from the MeshStandardMaterial and try to integrate our code in its shaders.

There are two ways of doing it:

• By using a Three.js hook triggered before the shader is compiled that let us play with the shaders and inject our code.
• By recreating the material as a brand new one, but following what is done in Three.js code and then using the same parameters, plus the ones that we want to add.

While the second option is perfectly acceptable, we would need to spend a lot of time in the Three.js source code to understand how to set everything right.

Instead, we will use the first technique. We still will spend some time in the Three.js code, but it will be much easier.

In this lesson, we will make the model vertices twist in a funny way but with all the base features of the material still working like shadows, texture, normal map, etc.

Setup 02:53

We will use the same setup as the Realistic Model Render lesson but with the famous Lee Perry-Smith head model. It's just a popular model with only one mesh and realistic textures that should go well with our twist animation.

Both the loading and base material setup is already done. A MeshStandardMaterial with a map and a normalMap are created before loading the model. This material is then used on the only Mesh of the model. This Mesh is finally added to the scene.

Most of the following code will concern the material.

Hooking the material 03:16

We have our MeshStandardMaterial, but we want to modify its shader.

To modify a material, we first need access to its original shaders. To do that, we can use the onBeforeCompile property on the material.

If we assign a function to it, this function will be called with the shader options as the first parameter right before being compiled:

material.onBeforeCompile = (shader) =>
{
    console.log(shader)
}

We now have access to the vertexShader, the fragmentShader, and the uniforms and we can modify these and see the result.