skills.rest
jtgiron
jtgironCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Create and edit Three.js shader logic for custom visual effects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create and modify custom Three.js shader effects without having to memorize GLSL patterns, material setup details, or uniform update workflows.

Core Features & Use Cases

  • Shader Material Setup: Build visuals with ShaderMaterial or RawShaderMaterial for precise control over rendering.
  • Uniforms and Varyings: Pass time, colors, textures, and interpolated data between vertex and fragment stages.
  • Custom Effects: Implement texture sampling, vertex displacement, fresnel lighting, rim glow, gradients, dissolve effects, and noise-based motion.
  • Material Extension: Use onBeforeCompile to inject shader logic into built-in Three.js materials.
  • Use Case: Add an animated wave distortion, a glowing edge effect, or a texture-driven dissolve to an interactive 3D scene.

Quick Start

Ask for a Three.js shader that adds the effect you want, and specify the material type, uniforms, and whether the logic should live in the vertex or fragment shader.

Frequently Asked Questions about threejs-shaders

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

FAQPage Schema
How do I create a custom Three.js shader for vertex displacement and fragment coloring?▼

To create a custom Three.js shader, you set up a ShaderMaterial or RawShaderMaterial, define uniforms to pass data like time and textures, and write GLSL syntax for vertex displacement and fragment coloring within the rendering pipeline.

How do I use onBeforeCompile to inject shader logic into built-in Three.js materials?▼

Using onBeforeCompile allows you to inject custom GLSL shader logic into built-in Three.js materials, enabling modifications like animated wave distortion or glowing edge effects without replacing the entire material setup.

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

ShaderMaterial automatically injects built-in Three.js uniforms and attributes, while RawShaderMaterial gives you complete control over the rendering pipeline by requiring you to manually define all GLSL uniforms and attributes yourself.

How do I pass data between vertex and fragment shaders in Three.js?▼

You pass data between vertex and fragment shaders in Three.js by defining varyings, which interpolate values like colors or texture coordinates across the rendering pipeline, alongside using uniforms for global scene data.

Can I add texture-driven dissolve and fresnel lighting effects to an interactive 3D scene?▼

Yes, you can implement texture sampling, fresnel lighting, rim glow, and noise-based dissolve effects in an interactive 3D scene by writing custom GLSL logic inside a ShaderMaterial and updating uniforms dynamically.

Do I need to manually update uniforms for Three.js shader animations?▼

Yes, animating Three.js shader effects requires manually updating uniforms like time or color values in your JavaScript render loop to ensure the GLSL vertex and fragment stages receive the correct dynamic data.

Related Skills

Explore More Software Engineering Skills→
TenBeltzTenBeltz

threejs-webgl

Create interactive 3D scenes with Three.js using WebGL rendering.

Official
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
alexzhang1030alexzhang1030

threejs-shaders

Create custom Three.js shaders for ShaderMaterial and RawShaderMaterial workflows.

Community
Intermediate
video-production-buddyvideo-production-buddy
602

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate