R3f Shaders

For when you need to write custom GLSL shaders in React Three Fiber instead of using built-in materials. Covers the shaderMaterial helper from drei, which wraps your vertex and fragment shaders with uniform declarations, plus patterns for raw THREE.ShaderMaterial if you want full control. Good reference for uniform types, varyings, and updating shader values in useFrame. The HMR setup with the key prop is genuinely useful during development since you can edit shaders and see changes instantly. Most helpful when you're doing custom visual effects, vertex displacement, or anything where MeshStandardMaterial won't cut it.

skills.sh installs: 2.1K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-shaders --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber shaders

Select the shader path

Inspect installed Fiber, Drei, Three.js, and renderer versions first. The example uses Fiber 9 / React 19 and WebGL. Preserve an existing project's versions.

Use built-in materials when their properties express the effect. For custom WebGL shading, use Drei shaderMaterial or a native <shaderMaterial>.
WebGPU uses node materials and TSL; GLSL ShaderMaterial and onBeforeCompile are not portable to it. Read WebGPU and TSL only when that renderer is relevant.
A shader is not automatically lit, shadowed, fogged, instanced, or skinned. Choose the required features before replacing a built-in material.

Animated WebGL material

Mount beneath Canvas. Keep the material class and extend call outside render; the local component avoids global JSX augmentation.

import { useRef } from 'react'
import { extend, useFrame } from '@react-three/fiber'
import { shaderMaterial } from '@react-three/drei'
import { Color } from 'three'

SKILL.md on GitHub