skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Write custom GLSL shaders for Three.js ShaderMaterial and built-in material extensions.

1|Updated Aug 20, 2023
Search Tags:#glsl#shaders#webgl#three.js#vertex shader#fragment shader#shadermaterial
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-shaders-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-shaders
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-shaders-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom visual effects in Three.js requires deep knowledge of GLSL syntax, uniform management, and shader injection points, which is error-prone and hard to debug without a structured reference. ## Core Features & Use Cases - ShaderMaterial and RawShaderMaterial Setup: Provides ready-to-use templates for vertex and fragment shaders with correct uniform declarations and built-in attribute handling. - Common Effect Patterns: Includes implementations for vertex displacement, Fresnel effects, rim lighting, dissolve transitions, noise functions, and gradients. - Built-in Material Extension: Shows how to use onBeforeCompile to inject custom GLSL into MeshStandardMaterial and other built-in materials at known shader chunk points. - Use Case: You want an animated wave effect on a plane mesh. Use the vertex displacement pattern with a time uniform updated in the animation loop to produce continuous motion. ## Quick Start Create a Three.js ShaderMaterial with an animated wave vertex displacement and a solid color fragment shader.

Frequently Asked Questions about threejs-shaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom shader in Three.js?▼

Create a THREE.ShaderMaterial with uniforms, a vertexShader, and a fragmentShader written in GLSL. ShaderMaterial automatically provides built-in uniforms like projectionMatrix and attributes like position, normal, and uv.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial automatically injects built-in uniforms and attributes such as modelViewMatrix and position. RawShaderMaterial gives full control, requiring you to declare precision, attributes, and all matrices manually.

How do I modify a built-in Three.js material with custom GLSL?▼

Use the material's onBeforeCompile callback to access the shader object, add custom uniforms, and replace shader chunks like #include <begin_vertex> with your injected GLSL code.

How do I update shader uniforms every frame in Three.js?▼

Assign new values directly to material.uniforms, for example material.uniforms.time.value = clock.getElapsedTime() inside the animation loop. For vectors and colors, use methods like set() or copy() on the uniform value.

Why is my Three.js shader not compiling or showing a black screen?▼

Enable renderer.debug.checkShaderErrors to log GLSL compile errors, and print the final shader source inside onBeforeCompile. Common causes include missing precision declarations, undeclared uniforms, or mismatched varying names between vertex and fragment shaders.

Can I use GLSL 3.0 features in Three.js shaders?▼

Yes, set glslVersion: THREE.GLSL3 on the material when targeting WebGL2. Then use texture() instead of texture2D and declare an out vec4 output variable instead of writing to gl_FragColor.

Related Skills

Explore More Software Engineering Skills→
cvenwucvenwu

three

Synchronize Three.js scenes with HyperFrames seek events for deterministic renders.

Community
Advanced
mrgooniemrgoonie
2.2k

threejs

Build 3D web applications with Three.js scenes, materials, animations, and WebGL rendering.

Community
Advanced
wimbleroboticswimblerobotics
18

mppi-trajectory-visualization

Visualize MPPI trajectory rollouts as color-coded markers in RViz.

Community
Intermediate
calesthiocalesthio
55.1k

threejs-materials

Configure Three.js materials including PBR, toon, and custom GLSL shaders for mesh styling.

Community
Intermediate