{"enrichment":{"faq":[{"a":"r3f-materials teaches that MeshBasicMaterial renders unlit geometry with flat colors, ideal for simple UI or non-photorealistic styles. MeshStandardMaterial implements physically-based rendering (PBR), responding to lights and environment maps for realistic surfaces. Choose MeshBasicMaterial for performance-critical scenes or stylized looks; use MeshStandardMaterial when you need believable material behavior under varied lighting.","q":"What are the main differences between MeshBasicMaterial and MeshStandardMaterial in r3f-materials?"},{"a":"r3f-materials covers writing vertex and fragment shaders in GLSL, then passing them to ShaderMaterial or RawShaderMaterial. Define uniforms (like time, color, or texture) as JavaScript objects, then animate them using useFrame or useEffect. Update uniform values each frame to drive animations\u2014for example, incrementing a time uniform to create wave or distortion effects dynamically.","q":"How do you create custom shader effects with GLSL and animate uniforms in r3f?"},{"a":"r3f-materials emphasizes adjusting metalness (0\u20131 scale for metal reflectivity), roughness (0\u20131 for surface smoothness), and map textures (color, normal, roughness, metallic) on MeshStandardMaterial or MeshPhysicalMaterial. For realistic results, set metalness near 1 for metals and 0 for non-metals, roughness between 0.3\u20130.8 for most surfaces, and pair with environment maps for proper reflections.","q":"What does r3f-materials guide recommend for configuring PBR material properties?"},{"a":"r3f-materials shows using useTexture hook to load image files, then assigning them to material map properties (map, normalMap, roughnessMap, metalnessMap). Ensure textures have proper UV coordinates on your geometry. Control texture appearance with repeat, offset, and wrapS/wrapT settings to tile or clamp edges as needed for your design.","q":"How does r3f-materials explain texture loading and application to materials?"},{"a":"r3f-materials advises reusing material instances across multiple meshes rather than creating new ones per geometry. Disable unused features (fog, lights, shadows) on materials that don't need them. Use simpler materials like MeshBasicMaterial when photorealism isn't required. Profile shader complexity and reduce uniform updates to only when values actually change.","q":"What optimization strategies does r3f-materials recommend for material performance?"},{"a":"r3f-materials covers toon materials through custom shaders or ToneMapping adjustments. Implement cel shading by writing GLSL that quantizes lighting into discrete bands, or use MeshToonMaterial with gradient textures. Combine with outlines (rendered as inverted hull or post-processing) to achieve the classic cartoon look in your React Three Fiber scene.","q":"Can r3f-materials help with cel shading or toon material effects?"}],"shadow_tags":["pbr-rendering","glsl-shaders","texture-mapping","material-effects","gpu-optimization","real-time-animation","3d-graphics","surface-properties"],"summary_rewrite":"r3f-materials equips you with practical knowledge of Three.js material systems within React Three Fiber workflows. Discover how to select, configure, and optimize materials for different rendering scenarios, from basic geometries to complex shader-driven effects."},"files":[{"bytes":11409,"path":"skills/r3f-materials/SKILL.md","sha256":"f6551a877c09c81dc07b271fed2ca785369b14b7e3574fc89bc894d8fc76f3c7","url":"https://skillfed.io/files/Bbeierle12/Skill-MCP-Claude/r3f-materials/c8f22ded/SKILL.md"}],"id":"Bbeierle12/Skill-MCP-Claude/r3f-materials","links":{"html":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/r3f-materials","md":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/r3f-materials.md","repo":"https://github.com/Bbeierle12/Skill-MCP-Claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":3,"language":"JavaScript","last_updated":"2026-07-27","license":"MIT","name":"r3f-materials","publisher":"Bbeierle12","stars":8},"relations":{"similar":[{"id":"EnzeD/r3f-skills/r3f-shaders"},{"id":"calesthio/OpenMontage/threejs-shaders"},{"id":"CloudAI-X/threejs-skills/threejs-shaders"},{"id":"calesthio/OpenMontage/threejs-materials"},{"id":"CloudAI-X/threejs-skills/threejs-materials"},{"id":"secondsky/claude-skills/threejs"},{"id":"Bbeierle12/Skill-MCP-Claude/particles-gpu"},{"id":"Bbeierle12/Skill-MCP-Claude/postfx-bloom"},{"id":"EnzeD/r3f-skills/r3f-materials"},{"id":"organvm/a-i--skills/react-three-fiber-patterns"}]},"slug":{"owner":"Bbeierle12","repo":"Skill-MCP-Claude","skill":"r3f-materials"},"version":"c8f22ded"}