skills.rest
afovea
afoveaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

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
One-click install
npx skills add https://github.com/afovea/game-dev-skills --skill threejs-shaders-afovea
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
CesarG503CesarG503

threejs-geometry

Generate and manipulate 3D geometric shapes for Three.js applications.

Community
Intermediate
Dominik-SteinwegDominik-Steinweg

filters-and-postfx

Apply GPU-based post-processing effects and visual filters to Phaser 4 game objects and cameras.

Community
Intermediate
MonichreMonichre

threejs-shaders

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

Community
Intermediate
zocomputerzocomputer
45

threejs-shaders

Create and implement custom GLSL shaders in Three.js applications.

Official
Intermediate