skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Create custom Three.js shader effects with ShaderMaterial and RawShaderMaterial.

Updated Apr 2, 2026
Search Tags:#glsl#shaders#webgl#three.js#visual-effects#shadermaterial#rawshadermaterial
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill threejs-shaders-gyalamanch001a
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill threejs-shaders-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create and modify custom visual effects in Three.js when built-in materials are not flexible enough for the look or motion you need.

Core Features & Use Cases

  • Shader authoring: Write vertex and fragment shaders for color, lighting, noise, gradients, rim effects, dissolve effects, and other procedural visuals.
  • Material customization: Choose between ShaderMaterial and RawShaderMaterial, update uniforms over time, and extend built-in materials with onBeforeCompile.
  • Practical use case: Use it to animate a pulsing hologram, displace a mesh with waves, or add a stylized glow effect to a product visualization.

Quick Start

Ask for a Three.js shader setup that adds a time-based vertex wave and a fragment color gradient using ShaderMaterial.

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 when built-in materials are not flexible enough?▼

To create custom Three.js visual effects, author GLSL vertex and fragment shaders using ShaderMaterial or RawShaderMaterial. This enables procedural color, lighting, noise, and gradient effects that built-in materials cannot achieve.

What is the best way to animate a pulsing hologram or wave displacement in Three.js?▼

Animating a pulsing hologram or wave displacement in Three.js requires updating shader uniforms over time. Pass a time uniform into your GLSL vertex and fragment shaders to drive continuous procedural motion and vertex displacement.

Can I extend built-in Three.js materials with custom GLSL without writing a full ShaderMaterial?▼

You can extend built-in Three.js materials with custom GLSL using the onBeforeCompile function. This injects custom shader logic into the existing rendering pipeline without replacing the entire material with a full ShaderMaterial.

Does Three.js RawShaderMaterial support GLSL3 features and built-in uniforms?▼

RawShaderMaterial in Three.js supports GLSL3 features but omits built-in uniform injections. You must manually declare and manage all attributes, varyings, and uniforms yourself, unlike the automated ShaderMaterial workflow.

Why do I need custom shaders for texture sampling and fragment color logic in WebGL?▼

Custom shaders are needed for texture sampling and fragment color logic in WebGL when standard materials fail to produce the desired look. Writing GLSL grants direct control over pixel colors, procedural gradients, and rim lighting effects.

Related Skills

Explore More Software Engineering Skills→
jtgironjtgiron

threejs-geometry

Create Three.js geometry with built-in shapes, BufferGeometry, and instanced meshes.

Community
Intermediate
ethereumethereum
6.0k

data-layer

Create uniform cached getters for diverse data sources.

Official
Intermediate
huangzidahuangzida
2

threejs-postprocessing

Configure an EffectComposer pipeline with post-processing passes for Three.js scenes.

Community
Advanced
UniquecreteUniquecrete

threejs-shaders

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

Community
Intermediate