threejs-shaders
This skill provides documentation and code patterns for implementing custom shaders in Three.js using ShaderMaterial and RawShaderMaterial. It covers GLSL syntax, uniform management, varying data, common visual effects, and performance optimization techniques.
Is threejs-shaders safe to install?
Safe to install: our audit of threejs-shaders's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides static documentation and code snippets for Three.js development. It does not execute code, perform network requests, or interact with the file system.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building 3D web applications with Three.js who need to create custom visual effects or modify existing material behavior.
What can you do with it?
- Creating custom visual effects using GLSL
- Modifying vertex positions for animations
- Writing custom fragment shaders
- Extending built-in Three.js materials via onBeforeCompile
- Implementing instanced rendering with custom shaders
How good is this skill?
Quality score: 5/10. The skill provides comprehensive, well-structured documentation and practical code examples for Three.js shader development.
What does the skill file contain?
# Three.js Shaders
## 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
### Shader...Frequently asked questions
What is the difference between ShaderMaterial and RawShaderMaterial?
ShaderMaterial automatically provides built-in uniforms and attributes like modelViewMatrix and position. RawShaderMaterial provides no built-in variables, requiring the developer to define all necessary uniforms and attributes manually.
How can I modify an existing Three.js material?
Use the onBeforeCompile method on the material to inject custom GLSL code into the existing shader chunks.
How do I pass data from the vertex shader to the fragment shader?
Declare a varying variable in both the vertex and fragment shaders. Assign the value in the vertex shader, and the GPU will interpolate it for the fragment shader.
What are some performance tips for writing shaders?
Minimize the number of uniforms, avoid conditional branching by using mix and step functions, precalculate values in JavaScript, and limit overdraw.
Related skills
guizang-ppt-skill
13.4KUsers who need to create professional, visually distinct, single-file web-based slide decks for presentations, demos, or industry sharing
The guizang-ppt-skill generates single-file HTML horizontal swipe presentations with two distinct visual styles: Magazine (serif, fluid WebGL backgrounds) and Swiss Internationalism (sans-serif, grid-based, high-contrast colors). It provides templates, layout structures, and theme configurations for creating slide decks for presentations, product launches, and data reports.
threejs-animation
8.5KDevelopers building 3D web applications using the Three
This skill provides a reference and code patterns for implementing animation in Three.js, covering keyframe systems, skeletal animation, morph targets, and procedural motion.
threejs-fundamentals
6.7KDevelopers building 3D web applications using the Three
This skill provides code patterns and configuration examples for Three.js, covering scene setup, camera management, renderer configuration, object hierarchies, and coordinate systems.
claude-skill-web-clone
Developers and researchers performing local website cloning for learning, study, or personal project development
A methodology and toolkit for cloning websites, ranging from static pages to complex WebGL-based frontends. It provides a structured workflow for reconnaissance, source code analysis, project scaffolding, and content replacement while emphasizing the use of original source code over AI-generated guesses.