threejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
Profile →npx skills add sickn33/agentic-awesome-skills --skill threejs-shaders --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Three.js Shaders ## When to Use - You need custom shader logic in Three.js. - The task involves `ShaderMaterial`, uniforms, GLSL, vertex deformation, or fragment-based effects. - You are extending material behavior beyond what built-in materials provide. ## Quick Start ```javascript import * as THREE from "three"; const material = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color: { value: new THREE.Color(0xff0000) }, }, vertexShader: ` void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 color; void main() { gl_FragColor = vec4(color, 1.0); } `, }); // Update in animation loop material.uniforms.time.value = clock.getElapsedTime(); ``` ## ShaderMaterial vs RawShaderMaterial ### ShaderMaterial Three.js provides built-in uniforms and attributes. ```javascript const material = new THREE.ShaderMaterial({ vertexShader: ` // Built-in uniforms available: // uniform mat4 modelMatrix; // uniform mat4 modelViewMatrix; // uniform mat4 projectionMatrix; // uniform mat4 viewMatrix; // uniform mat3 normalMatrix; // uniform vec3 cameraPosition; // Built-in attributes available: // attribute vec3 position; // att
- When to Use
- Quick Start
- ShaderMaterial vs RawShaderMaterial
- ShaderMaterial
- RawShaderMaterial
- Uniforms
- Uniform Types
- GLSL Declarations
- Updating Uniforms
- Varyings
- Common Shader Patterns
- Texture Sampling
- Vertex Displacement
- Fresnel Effect
What does the threejs-shaders skill do?
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill threejs-shaders --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.