Threejs Shaders
Author custom GLSL vertex and fragment shaders in Three.js with ShaderMaterial, uniforms, and animation-loop updates for distinctive 3D visuals.
Overview
threejs-shaders is an agent skill for the Build phase that helps you create Three.js custom visual effects with GLSL ShaderMaterial, uniforms, and vertex or fragment programs.
Install
npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-shadersWhat is this skill?
- Quick-start ShaderMaterial with uniforms (time, color) and an animation-loop update pattern
- Compares ShaderMaterial vs RawShaderMaterial and documents built-in Three.js uniforms and attributes
- Shows vertex and fragment shader skeletons wired to projection and modelView matrices
- Use when extending built-in materials or writing custom visual effects on meshes
- GLSL-focused guidance for modifying vertices and fragment coloring in Three.js
Adoption & trust: 4.5k installs on skills.sh; 2.3k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a unique 3D look in Three.js but only know built-in materials and get lost wiring GLSL uniforms and matrices correctly.
Who is it for?
Indie devs building Three.js landing pages, demos, or lightweight games who want agent-guided shader scaffolding.
Skip if: Projects on Unity/Unreal only, or teams that need a full node-based shader editor instead of hand-written GLSL strings.
When should I use this skill?
Creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in Three.js materials.
What do I get? / Deliverables
You get a ShaderMaterial setup with documented uniforms, vertex and fragment shaders, and loop updates ready to extend for your effect.
- ShaderMaterial definition with uniforms
- Vertex and fragment shader source wired to a mesh
Recommended Skills
Journey fit
Build → Frontend is the canonical shelf because the skill is entirely about implementing GPU-side rendering effects in a Three.js scene. Frontend subphase matches custom materials and visual effects that ship in the browser/WebGL client, not backend APIs.
How it compares
Use for in-scene GLSL in Three.js, not for a 2D CSS animation skill or a backend rendering farm.
Common Questions / FAQ
Who is threejs-shaders for?
Solo frontend and creative-coding builders using Three.js who want procedural or custom GPU effects without guessing ShaderMaterial conventions.
When should I use threejs-shaders?
Use it in Build → frontend when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in Three.js materials—as stated in the skill description.
Is threejs-shaders safe to install?
Check the Security Audits panel on this Prism page for verified install and audit metadata; the skill is documentation-only GLSL patterns with no mandatory shell or secrets access.
SKILL.md
READMESKILL.md - Threejs Shaders
# 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 ### 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; // attribute vec3 normal; // attribute vec2 uv; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `, }); ``` ### RawShaderMaterial Full control - you define everything. ```javascript const material = new THREE.RawShaderMaterial({ uniforms: { projectionMatrix: { value: camera.projectionMatrix }, modelViewMatrix: { value: new THREE.Matrix4() }, }, vertexShader: ` precision highp float; attribute vec3 position; uniform mat4 projectionMatrix; uniform mat4 modelViewMatrix; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` precision highp float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `, }); ``` ## Uniforms ### Uniform Types ```javascript const material = new THREE.ShaderMaterial({ uniforms: { // Numbers floatValue: { value: 1.5 }, intValue: { value: 1 }, // Vectors vec2Value: { value: new THREE.Vector2(1, 2) }, vec3Value: { value: new THREE.Vector3(1, 2, 3) }, vec4Value: { value: new THREE.Vector4(1, 2, 3, 4) }, // Colors (converted to vec3) colorValue: { value: new THREE.Color(0xff0000) }, // Matrices mat3Value: { value: new THREE.Matrix3() }, mat4Value: { value: new THREE.Matrix4() }, // Textures textureValue: { value: texture }, cubeTextureValue: { value: cubeTexture }, // Arrays floatArray: { value: [1.0, 2.0, 3.0] }, vec3Array: { value: [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0)], }, }, }); ``` ### GLSL Declarations ```glsl // In shader uniform float floatValue; uniform int intValue; uniform vec2 vec2Value; uniform vec3 vec3Value; uniform vec3 colorValue; // Color becomes vec3 uniform vec4 vec4Value; uniform mat3 mat3Value; uniform mat4 mat4Value; uniform sampler2D textureValue; uniform samplerCube cubeTextureValue; uniform float floatArray[3]; uniform vec3 vec3Array[2]; ``` ### Updating Uniforms ```javascript // Direct assignment material.uniforms.time.value = clock.getElapsedTime(); // Vector/Color updates material.uniforms.position.value.set(x, y, z); material.uniforms.color.value.setHSL(hue, 1, 0.5); // Matrix updates material.uniforms.matrix.value.copy(mesh.matrixWorld); ``` ## Varyings Pass data from vertex to fragment shader. ```javascript const material = new THREE.ShaderMaterial({ vertexShader: ` varying vec2 vUv; varying vec3 vNormal; varying vec3 vPosition; void main() { vUv = uv; vNormal = normalize(nor