threejs-shaders

Name: threejs-shaders
Availability: InStock
Author: Afovea

Create and optimize custom GLSL shaders for Three.js applications.

Updated May 18, 2026

Search Tags:#glsl #shaders #three-js #shadermaterial #uniforms #vertex-shader #fragment-shader

Ready to run

npx skills add https://github.com/afovea/game-dev-skills --skill threejs-shaders-afovea

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/afovea/game-dev-skills/tree/main/plugins/game-tech/skills/threejs-shaders
Command: npx skills add https://github.com/afovea/game-dev-skills --skill threejs-shaders-afovea

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the complexity of writing and integrating custom GPU shaders in Three.js, providing a structured reference for GLSL patterns and material extension techniques.

Core Features & Use Cases

Shader Authoring: Provides templates for ShaderMaterial and RawShaderMaterial, including uniform management and GLSL patterns like vertex displacement, Fresnel, and noise.
Material Extension: Offers guidance on using onBeforeCompile to inject custom logic into standard Three.js materials without rewriting them.
Performance Optimization: Includes best practices for branchless GLSL, precision management, and efficient texture sampling.

Quick Start

Use the threejs-shaders skill to generate a vertex displacement shader for a custom MeshStandardMaterial using onBeforeCompile.

Frequently Asked Questions about threejs-shaders

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

FAQPage Schema

How do I inject custom GLSL shaders into Three.js standard materials?▼

You can inject custom GLSL shaders into Three.js standard materials by using the onBeforeCompile method to modify existing shaders without rewriting them, alongside ShaderMaterial for fully custom vertex and fragment programs.

What's the best way to structure uniforms for a Three.js ShaderMaterial?▼

Structuring uniforms for a Three.js ShaderMaterial requires defining uniform variables to pass data from JavaScript to the GPU, enabling dynamic control over visual effects like vertex displacement and procedural noise patterns.

How do I optimize GLSL fragment shaders for better GPU performance in Three.js?▼

Optimize GLSL fragment shaders by applying best practices for branchless programming, managing precision qualifiers, and executing efficient texture sampling to improve GPU performance in Three.js applications.

Can I create procedural noise patterns and vertex displacement using Three.js shaders?▼

Yes, you can create procedural noise patterns and vertex displacement by authoring custom GLSL code within Three.js ShaderMaterials, leveraging provided templates for complex visual effect development.

Does Three.js RawShaderMaterial offer more control than standard ShaderMaterial for custom effects?▼

Three.js RawShaderMaterial provides lower-level control over the shader pipeline by omitting built-in Three.js definitions, whereas standard ShaderMaterial automatically injects common uniforms and attributes for easier custom effect creation.