skills.rest
jay6697117
jay6697117COMMUNITY
Explore all skills by this author →
Website𝕏@nullGitHub

threejs-shaders

Create and integrate GLSL shaders with Three.js ShaderMaterial and RawShaderMaterial.

Updated Mar 18, 2026
Search Tags:#graphics#glsl#webgl#threejs#shader#uniforms
One-click install
npx skills add https://github.com/jay6697117/jet-battle --skill threejs-shaders-jay6697117
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/jay6697117/jet-battle/tree/main/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/jay6697117/jet-battle --skill threejs-shaders-jay6697117

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js developers often need to push beyond built-in materials to create unique visual effects using custom GLSL shaders. This Skill provides practical guidance for writing vertex and fragment shaders, managing uniforms, and extending ShaderMaterial workflows to unlock bespoke graphics.

Core Features & Use Cases

  • Learn to use THREE.ShaderMaterial and THREE.RawShaderMaterial for full control over shaders.
  • Define and update uniforms, varyings, and custom shader logic to create dynamic effects such as displacement, Fresnel, and noise-based textures.
  • Extend existing materials with onBeforeCompile and inject custom shader code for advanced visuals in real-world apps.

Quick Start

Create a ShaderMaterial with a simple vertex/fragment shader and apply it to a mesh to render a custom shader effect.

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 GLSL shaders in Three.js?▼

Create custom GLSL shaders in Three.js by defining vertex and fragment shader logic within THREE.ShaderMaterial or THREE.RawShaderMaterial, then applying the material to a mesh to render bespoke visual effects.

How do I extend built-in Three.js materials with custom shader code?▼

Extend built-in Three.js materials by using the onBeforeCompile method to inject custom GLSL shader code at runtime, allowing you to modify existing material behavior without writing an entirely new ShaderMaterial.

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

ShaderMaterial in Three.js automatically injects built-in uniforms and attributes, while RawShaderMaterial provides a completely blank slate, requiring you to manually define all GLSL uniforms, varyings, and attributes for full control.

How do I pass data to a Three.js shader for dynamic effects?▼

Pass data to Three.js shaders for dynamic effects by defining uniforms in your ShaderMaterial, then updating their values in the render loop to drive real-time vertex displacement, Fresnel effects, or texture sampling.

Can I modify Three.js shader chunks to customize real-time graphics?▼

Yes, you can modify Three.js shader chunks by extending built-in materials with onBeforeCompile, ensuring compatibility with the specific GLSL versions and chunk structures required for your real-time graphics tasks.

Why do my custom Three.js shaders break when extending built-in materials?▼

Custom Three.js shaders break when extending built-in materials due to GLSL version mismatches or incorrect shader chunk integration, requiring clear shader structure and compatibility with Three.js chunk syntax during onBeforeCompile injection.

Related Skills

Explore More Software Engineering Skills→
mashharukimashharuki

threejs-shaders

Develop custom Three.js shaders with GLSL and ShaderMaterial.

Community
Advanced
tanepipertanepiper
27

webgl-expert

Design and implement WebGL applications with GLSL shaders and rendering pipelines.

Community
Advanced
yogaprasetya22yogaprasetya22

threejs-shaders

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

Community
Basic
MonichreMonichre

threejs-shaders

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

Community
Intermediate