What is the difference between ShaderMaterial and RawShaderMaterial?

ShaderMaterial provides built-in attributes and uniforms like projectionMatrix and modelViewMatrix automatically, while RawShaderMaterial gives you full control, requiring you to define all attributes and uniforms yourself.

How do I update shader uniforms in an animation loop?

The skill provides patterns for direct assignment, such as material.uniforms.time.value = clock.getElapsedTime(), allowing for real-time visual updates.

Can I use this skill to modify built-in Three.js materials?

Yes, the skill includes patterns for using onBeforeCompile to inject custom GLSL code into existing materials like MeshStandardMaterial without rewriting the entire shader.

Does it support WebGL2 features?

Yes, it provides guidance on using glslVersion: THREE.GLSL3 to access WebGL2 features, including modern texture sampling and out-variables.

Three.js Shader Development

Name: Three.js Shader Development
Author: Microck

byMicrock

•

게임 개발

Implements high-performance custom visual effects and GLSL shaders within the Three.js ecosystem.

This Claude Code Skill provides comprehensive guidance and boilerplate for creating sophisticated WebGL shaders using Three.js. It facilitates the development of custom ShaderMaterials and RawShaderMaterials, enabling developers to handle complex uniforms, vertex displacements, and fragment-based effects like Fresnel lighting and procedural noise. Whether you are building immersive 3D environments or modifying existing material pipelines via onBeforeCompile, this skill streamlines the process of writing, debugging, and integrating GLSL code directly into your Three.js projects.

주요 기능

012 GitHub stars

02Custom ShaderMaterial and RawShaderMaterial implementation

03Comprehensive GLSL uniform and varying management

04Vertex displacement and procedural texture sampling

05Pre-built patterns for Fresnel, rim lighting, and noise effects

06Advanced material modification using onBeforeCompile

사용 사례

01Creating interactive 3D web experiences with custom post-processing or material effects

02Optimizing existing Three.js materials by injecting custom GLSL logic into shader chunks

03Building procedurally generated terrains or liquid simulations using vertex shaders

주요 기능

012 GitHub stars

02Custom ShaderMaterial and RawShaderMaterial implementation

03Comprehensive GLSL uniform and varying management

04Vertex displacement and procedural texture sampling

05Pre-built patterns for Fresnel, rim lighting, and noise effects

06Advanced material modification using onBeforeCompile

사용 사례

01Creating interactive 3D web experiences with custom post-processing or material effects

02Optimizing existing Three.js materials by injecting custom GLSL logic into shader chunks

03Building procedurally generated terrains or liquid simulations using vertex shaders