skills.rest
yogaprasetya22
yogaprasetya22COMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-shaders

Create custom Three.js ShaderMaterial effects with GLSL vertex and fragment programs.

Updated May 18, 2026
Search Tags:#glsl#visual effects#threejs#fragment shader#shadermaterial#uniforms#vertex displacement
One-click install
npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-shaders-yogaprasetya22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/yogaprasetya22/mmorpg/tree/main/frontend/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-shaders-yogaprasetya22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you author custom Three.js ShaderMaterial and GLSL fragment/vertex effects instead of being limited to built-in materials.

Core Features & Use Cases

  • Write custom vertex/fragment shaders (GLSL): Implement effects like vertex displacement, rim lighting, dissolve transitions, and procedural gradients.
  • Manage uniforms and varyings: Pass dynamic values (e.g., time, colors, textures, arrays) from JavaScript into shaders and move data between vertex and fragment stages via varyings.
  • Extend or modify existing materials: Inject custom shader logic using onBeforeCompile to add uniforms and transform built-in shader chunks.

Quick Start

Use the threejs-shaders skill to create a ShaderMaterial that animates a vertex displacement using a time uniform and a fragment shader that renders a gradient.

Frequently Asked Questions about threejs-shaders

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

FAQPage Schema
How do I write custom GLSL shaders for Three.js visual effects?▼

You can write custom GLSL shaders for Three.js visual effects by implementing vertex and fragment programs within a ShaderMaterial, passing dynamic values into the shader via uniforms and wiring data between stages using varyings.

Can I add vertex displacement and dissolve transitions using a ShaderMaterial?▼

Yes, ShaderMaterial supports creating vertex displacement and dissolve transitions by manipulating vertex positions and using texture sampling or procedural gradients directly inside your GLSL code.

What is the best way to extend built-in Three.js materials with custom shader logic?▼

The best way to extend built-in materials is using the onBeforeCompile function to inject custom GLSL shader logic, add new uniforms, and transform existing shader chunks without replacing the entire material.

How do I pass dynamic values like time and colors into a Three.js fragment shader?▼

You pass dynamic values like time and colors into a fragment shader by declaring uniforms in your ShaderMaterial and continuously updating their values from your JavaScript application loop.

Does creating Three.js visual effects require specific GLSL version considerations?▼

Creating Three.js visual effects does require optional GLSL version considerations to ensure correct uniform declaration and update patterns render the intended procedural gradients and rim lighting visuals properly.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

threejs-materials

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

Community
Intermediate
NebulavenusNebulavenus
36

forge-compute-shaders

Create SDL3 GPU compute pipelines with storage textures and render passes.

Community
Advanced
MonichreMonichre

threejs-shaders

Integrate custom GLSL shaders into Three.js using ShaderMaterial and RawShaderMaterial.

Community
Intermediate
jacobcyjacobcy
6

openspec-apply-change

Apply OpenSpec change tasks by reading context files and updating task artifacts.

Community
Advanced