r3f-learning-01

LESSON 09

Custom Shaders

Drei's shaderMaterial factory builds a typed material class from a uniform map and two GLSL strings. The vertex shader displaces along the normal by sin(position.x · freq + time); the fragment shader mixes two colours by displacement.

Shaders run per-vertex / per-fragment on the GPU — animation lives in the uTime uniform, advanced in useFrame. The material is registered once via extend so JSX can use it as a lowercase intrinsic. Module augmentation gives TypeScript visibility into the new element.