skills.rest
Uniquecrete
UniquecreteCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Develop custom Three.js GLSL shaders for ShaderMaterial and RawShaderMaterial workflows.

Updated May 6, 2026
Search Tags:#glsl#webgl#threejs#fragment shader#vertex displacement#shaderuniforms#material extension
One-click install
npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-shaders-uniquecrete
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/Uniquecrete/ThinkFasterv1/tree/main/Skills/threejs-shaders
Command: npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-shaders-uniquecrete

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Custom visual effects in Three.js often stall because you need to correctly wire GLSL shaders, uniforms, varyings, and material configuration to get predictable rendering results.

Core Features & Use Cases

  • ShaderMaterial & RawShaderMaterial Patterns: Choose the right material type depending on whether you want Three.js-provided uniforms/attributes or full GLSL control.
  • Uniforms, Varyings, and GLSL Patterns: Implement time-based animation, texture sampling, vertex displacement, gradients, noise functions, and lighting/edge effects using consistent shader structure.
  • Extending and Debugging Materials: Inject shader code via onBeforeCompile for built-in materials and debug rendering by inspecting compiled shader source or visualizing intermediate values.

Use Case: You are creating an interactive product visualization with animated dissolves and rim lighting, and you need a reliable way to define uniforms, pass data between vertex and fragment shaders, and update values every frame.

Quick Start

Use the threejs-shaders skill to implement a basic animated fragment shader by setting a time uniform and updating it in your render loop.

Frequently Asked Questions about threejs-shaders

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

FAQPage Schema
How do I create custom Three.js shaders for visual effects not supported by built-in materials?▼

To create custom Three.js shaders, you use ShaderMaterial or RawShaderMaterial to program vertex and fragment shaders directly with GLSL. This allows you to implement specific effects like displacement, Fresnel, and dissolve by managing custom uniforms and varyings.

What is the difference between ShaderMaterial and RawShaderMaterial in Three.js?▼

ShaderMaterial provides Three.js-provided uniforms and attributes like projection matrices, while RawShaderMaterial gives you full GLSL control without Three.js injecting built-in variables. Choosing between them depends on whether you want framework assistance or complete shader control.

How do I pass data between vertex and fragment shaders in Three.js GLSL?▼

You pass data between vertex and fragment shaders in Three.js using varyings. You declare a varying in both shaders, assign the interpolated value after computing gl_Position in the vertex shader, and read it in the fragment shader for rendering.

Can I extend built-in Three.js materials with custom GLSL shader code?▼

Yes, you can extend built-in Three.js materials by using the onBeforeCompile function to inject custom GLSL shader code. This approach allows you to add custom effects while retaining the existing uniform declarations and lighting calculations of the material.

How do I update time-based animations in a Three.js fragment shader?▼

To update time-based animations in a Three.js fragment shader, you declare a time uniform in your ShaderMaterial and update its value every frame inside your render loop. This continuously passes the elapsed time into your GLSL program for dynamic effects.

Why are my custom Three.js shader uniforms not working correctly?▼

Custom Three.js shader uniforms fail when they lack correct declarations or are not updated properly in the render loop. You must ensure proper uniform management and can debug rendering by inspecting the compiled shader source or visualizing intermediate values.

Related Skills

Explore More Software Engineering Skills→
47thtechcorner47thtechcorner
21

threejs-materials

Configure Three.js material properties for PBR, Phong, and GLSL shaders.

Community
Intermediate
atro2829-hubatro2829-hub

web-shader-extractor

Extract WebGL, shader, and Canvas effects into standalone JavaScript implementations.

Community
Advanced
ethereumethereum
6.0k

data-layer

Create uniform cached getters for diverse data sources.

Official
Intermediate
het8802het8802
3

threejs-shaders

Create custom Three.js visual effects with GLSL shaders and uniforms.

Community
Advanced