Shader Materials

The materials inside of the materials folder outline a best practice for how to setup a custom shader material for react-three-fiber.

We start by using the shaderMaterial helper from react-spring/drei to create a new ShaderMaterial with pre-configured get and set methods for each of our uniforms.

The glsl files will be compiled by glslify, resolving any require statement in your shader code.

import vertex from './vertex.glsl
import fragment from './fragment.glsl

const DeformMaterial = shaderMaterial({ time: 0, magnitude: 5. }, vertex, fragment);

Then, we use react-three-fiber's extend to add this new material to the available components in r3f. This component will be available with the same name, lowercase initial:

// in our material file
extend({ DeformMaterial });

// in our components, anywhere in the app
<shaderMaterial time={0.1} magnitude={5} />;

The shader code is in the fragment.glsl and vertex.glsl files.