skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

r3f-shaders

Create custom GLSL shader materials and effects in React Three Fiber applications.

1|Updated Aug 20, 2023
Search Tags:#glsl#shaders#webgl#three.js#react-three-fiber#shadermaterial#uniforms
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-shaders-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r3f-shaders
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-shaders
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-shaders-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, three.

What problem does it solve? Writing custom GLSL shaders in React Three Fiber requires juggling uniforms, varyings, material extension, and TypeScript declarations, which is error-prone without a clear reference. ## Core Features & Use Cases - shaderMaterial Pattern: Create custom materials with Drei's shaderMaterial helper, including uniforms, HMR via the key prop, and TypeScript declarations. - Common Shader Effects: Ready-to-adapt patterns for vertex displacement, Fresnel, dissolve, noise/FBM, gradients, and texture sampling. - Built-in Material Extension: Modify meshStandardMaterial and other built-ins using onBeforeCompile with documented injection points. - Use Case: Build an animated wave plane by defining a vertex displacement shader with time and amplitude uniforms, then updating them each frame with useFrame. ## Quick Start Ask the AI to create a custom animated shader material for a React Three Fiber mesh using shaderMaterial from drei.

Frequently Asked Questions about r3f-shaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom shader material in React Three Fiber?▼

Use the shaderMaterial helper from @react-three/drei, passing a uniforms object, vertex shader, and fragment shader. Then call extend() to register it and use it as a JSX element like <myShaderMaterial /> with a ref for updating uniforms.

How to update shader uniforms every frame in R3F?▼

Store the material in a ref and update uniforms inside useFrame, for example materialRef.current.time = clock.elapsedTime. For raw THREE.ShaderMaterial, update via material.uniforms.time.value instead.

Does shaderMaterial support hot module replacement?▼

Yes, pass key={MyMaterial.key} to the JSX material element. The key changes when shader code changes, forcing React to remount the material so edits appear without a full page refresh.

How do I modify a built-in Three.js material shader?▼

Use the onBeforeCompile callback on materials like meshStandardMaterial. Add custom uniforms to shader.uniforms and inject GLSL by replacing chunks such as #include <begin_vertex> in the vertex or fragment shader strings.

Why is my custom shader material not rendering in R3F?▼

Common causes are forgetting to call extend() before using the material in JSX, GLSL compile errors in the shader strings, or missing varying declarations shared between vertex and fragment shaders. Log materialRef.current.vertexShader to debug compiled output.

Related Skills

Explore More Software Engineering Skills→
jtgironjtgiron

react-three-fiber

Generate React Three Fiber scenes from JSON render specifications.

Community
Intermediate
yogaprasetya22yogaprasetya22

threejs-postprocessing

Create post-processing effect pipelines for Three.js scenes with EffectComposer.

Community
Intermediate
EnzeDEnzeD
108

r3f-textures

Load and configure textures in React Three Fiber projects.

Community
Advanced
ayofemiadeayofemiade

threejs-materials

Configure Three.js materials including PBR, phong, toon, and custom GLSL shaders.

Community
Intermediate