R3f Shaders
Author GLSL vertex and fragment shaders in React Three Fiber with shaderMaterial, uniforms, and animated effects.
Overview
r3f-shaders is an agent skill for the Build phase that creates custom GLSL effects in React Three Fiber using shaderMaterial, uniforms, extend, and useFrame.
Install
npx skills add https://github.com/enzed/r3f-skills --skill r3f-shadersWhat is this skill?
- shaderMaterial from @react-three/drei with separate uniforms, vertex, and fragment GLSL blocks
- extend() pattern so custom materials render as JSX elements inside R3F trees
- useFrame clock.elapsedTime driving uniform animation each frame
- key={Material.key} on materials for HMR-friendly shader iteration
- Quick Start planeGeometry example for immediate visual feedback
Adoption & trust: 668 installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Built-in R3F materials cannot express the custom vertex or fragment behavior your 3D scene needs.
Who is it for?
Indie devs building WebGL experiences in R3F who need procedural colors, UV-driven effects, or vertex tweaks without a separate shader build pipeline.
Skip if: Projects with no Three.js stack, team workflows that mandate only declarative materials, or artists who require Blender-to-glTF-only pipelines with zero GLSL.
When should I use this skill?
Creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials in React Three Fiber.
What do I get? / Deliverables
You ship a working custom shaderMaterial component with animated uniforms and JSX-friendly extend registration inside a Canvas scene.
- Custom shaderMaterial module
- R3F mesh component with animated uniforms
Recommended Skills
Journey fit
How it compares
Skill for hand-written GLSL in R3F—not configuring baked PBR textures alone or backend rendering farms.
Common Questions / FAQ
Who is r3f-shaders for?
Solo builders shipping React Three Fiber apps who want custom visual effects via GLSL rather than only built-in drei/three materials.
When should I use r3f-shaders?
In the Build frontend phase when creating custom visual effects, modifying vertices, writing fragment shaders, or extending materials beyond defaults.
Is r3f-shaders safe to install?
Check the Security Audits panel on this Prism page; the skill only guides client-side shader code—review any generated GLSL before shipping to users.
SKILL.md
READMESKILL.md - R3f Shaders
# React Three Fiber Shaders ## Quick Start ```tsx import { Canvas, useFrame, extend } from '@react-three/fiber' import { shaderMaterial } from '@react-three/drei' import { useRef } from 'react' import * as THREE from 'three' // Create custom shader material const ColorShiftMaterial = shaderMaterial( // Uniforms { time: 0, color: new THREE.Color(0.2, 0.0, 0.1) }, // Vertex shader ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, // Fragment shader ` uniform float time; uniform vec3 color; varying vec2 vUv; void main() { gl_FragColor = vec4(vUv.x + sin(time), vUv.y + cos(time), color.b, 1.0); } ` ) // Extend so it can be used as JSX extend({ ColorShiftMaterial }) function ShaderMesh() { const materialRef = useRef() useFrame(({ clock }) => { materialRef.current.time = clock.elapsedTime }) return ( <mesh> <planeGeometry args={[2, 2]} /> {/* key={Material.key} enables HMR for shader development */} <colorShiftMaterial ref={materialRef} key={ColorShiftMaterial.key} /> </mesh> ) } export default function App() { return ( <Canvas> <ShaderMesh /> </Canvas> ) } ``` ## shaderMaterial (Drei) The recommended way to create shader materials in R3F. ### Basic Pattern ```tsx import { shaderMaterial } from '@react-three/drei' import { extend } from '@react-three/fiber' import * as THREE from 'three' // 1. Define the material const MyShaderMaterial = shaderMaterial( // Uniforms object { time: 0, color: new THREE.Color(1, 0, 0), opacity: 1, map: null, }, // Vertex shader (GLSL) ` varying vec2 vUv; varying vec3 vPosition; void main() { vUv = uv; vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, // Fragment shader (GLSL) ` uniform float time; uniform vec3 color; uniform float opacity; uniform sampler2D map; varying vec2 vUv; void main() { vec4 texColor = texture2D(map, vUv); gl_FragColor = vec4(color * texColor.rgb, opacity); } ` ) // 2. Extend R3F extend({ MyShaderMaterial }) // 3. Use in component function MyMesh() { const materialRef = useRef() useFrame(({ clock }) => { materialRef.current.time = clock.elapsedTime }) return ( <mesh> <boxGeometry /> {/* key prop enables Hot Module Replacement during development */} <myShaderMaterial ref={materialRef} key={MyShaderMaterial.key} color="hotpink" transparent opacity={0.8} /> </mesh> ) } ``` ### Hot Module Replacement (HMR) The `key` prop on shaderMaterial enables live shader editing without page refresh: ```tsx const MyMaterial = shaderMaterial( { time: 0 }, vertexShader, fragmentShader ) extend({ MyMaterial }) // MyMaterial.key changes when shader code changes <myMaterial key={MyMaterial.key} /> ``` When you edit shader code, the material automatically updates. Without `key`, you'd need to refresh the page to see changes. ### TypeScript Support ```tsx import { shaderMaterial } from '@react-three/drei' import { extend, Object3DNode } from '@react-three/fiber' import * as THREE from 'three' // Define uniform types type WaveMaterialUniforms = { time: number amplitude: number color: THREE.Color } const WaveMaterial = shaderMaterial( { time: 0, amplitude: 0.5, color: new THREE.Color('hotpink'), } as WaveMaterialUniforms, // vertex shader `...`, // fragment shader `...` ) // Extend with proper types extend({ WaveMaterial }) // Declare for TypeScript declare module '@react-three/