skills.rest
fanguyun
fanguyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-shaders

Creates custom ShaderMaterials and RawShaderMaterials for Three.js 3D scenes using GLSL.

Updated May 31, 2026
Search Tags:#shaders#Three.js#3D rendering#GLSL#ShaderMaterial#custom effects#RawShaderMaterial
One-click install
npx skills add https://github.com/fanguyun/SkillManager --skill threejs-shaders-fanguyun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/fanguyun/SkillManager/tree/main/threejs-shaders
Command: npx skills add https://github.com/fanguyun/SkillManager --skill threejs-shaders-fanguyun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes scripts (resource) components.

What problem does it solve?

This Skill enables users to create and apply custom visual effects in 3D scenes using Three.js shaders, offering advanced control over rendering and visual output.

Core Features & Use Cases

  • ShaderMaterial Creation: Provides instructions on creating ShaderMaterials and RawShaderMaterials for custom effects.
  • Uniforms Management: Details the usage of uniforms to control various aspects of the shader.
  • Varying Usage: Demonstrates passing data from vertex to fragment shader for more complex rendering.
  • Common Shader Patterns: Offers examples for texture sampling, vertex displacement, fresnel effects, and noise-based effects.
  • Extending Built-in Materials: Shows how to modify existing materials and inject custom shaders.
  • Shader Includes: Explains how to use Three.js shader chunks and external shader files.
  • Instanced Shaders: Discusses the use of instanced attributes for more efficient rendering.
  • Debugging Shaders: Provides tips for debugging shader code.
  • Performance Tips: Offers best practices for optimizing shader performance.
  • See Also: Links to additional resources on Three.js materials, postprocessing, and textures.

Quick Start

Import * as THREE from "three"; and use the following code snippet to create a basic ShaderMaterial:

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);
    }
  `,
});

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 visual effects in Three.js using GLSL shaders?▼

To create custom visual effects in Three.js using GLSL shaders, instantiate a ShaderMaterial or RawShaderMaterial, define uniforms to control variables, and write vertex and fragment shaders to manipulate rendering output directly.

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

ShaderMaterial in Three.js automatically injects built-in uniforms and attributes, whereas RawShaderMaterial provides a blank canvas requiring you to manually declare all GLSL variables for maximum control over the 3D rendering pipeline.

Do I need to know GLSL to use custom shaders in Three.js?▼

Yes, using custom shaders in Three.js requires knowledge of GLSL because you must write the vertex and fragment shader code manually to define the rendering logic, vertex displacement, and texture sampling behaviors.

How do I pass data from a vertex shader to a fragment shader in Three.js?▼

You pass data from a vertex shader to a fragment shader in Three.js by declaring varying variables in both shaders, assigning values in the vertex shader, and interpolating them in the fragment shader for complex rendering effects.

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

Yes, you can modify built-in Three.js materials by extending them to inject custom shader code, or by using Three.js shader chunks and includes to alter specific rendering stages without rewriting the entire material.

How do I debug and optimize shader performance for Three.js 3D rendering?▼

To debug and optimize shader performance in Three.js 3D rendering, apply best practices for performance tuning, utilize instanced attributes for efficient rendering, and follow specific debugging tips to identify issues within GLSL shader code.

Related Skills

Explore More Software Engineering Skills→
adryanmoldokkr32-pixeladryanmoldokkr32-pixel
2

threejs-syntax-shaders

Create custom ShaderMaterials with GLSL vertex and fragment shaders in Three.js.

Community
Advanced
sbalagan22sbalagan22

r3f-postprocessing

Apply Bloom, Depth of Field, and color grading via EffectComposer in React Three Fiber scenes.

Community
Advanced
soeiroosoeiroo

threejs-materials

Select and tune Three.js materials for real-time 3D scenes.

Community
Intermediate
mitgar14mitgar14

threejs-shaders

Build custom Three.js GLSL vertex and fragment shaders with ShaderMaterial.

Community
Advanced