skills.rest
Asylcreek
AsylcreekCOMMUNITY
Explore all skills by this author →
𝕏@acrysleekGitHub

threejs-shaders

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

Updated Sep 7, 2024
Search Tags:#glsl#shaders#webgl#threejs#shadermaterial#real-time-graphics#procedural-textures
One-click install
npx skills add https://github.com/Asylcreek/home-manager --skill threejs-shaders-asylcreek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/Asylcreek/home-manager/tree/main/dots/agents/skills/threejs-shaders
Command: npx skills add https://github.com/Asylcreek/home-manager --skill threejs-shaders-asylcreek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js shader development can be challenging; this Skill provides guided examples, patterns, and explanations to accelerate creating GLSL shaders for ShaderMaterial and RawShaderMaterial.

Core Features & Use Cases

  • ShaderMaterial and RawShaderMaterial usage: create and customize materials with vertex/fragment shaders.
  • GLSL basics and data flow: uniforms, varyings, attributes, and built-in functions.
  • Use Case: implement vertex displacement, custom lighting, post-processing effects, and procedural textures in Three.js projects.

Quick Start

Create a ShaderMaterial in Three.js using a simple fragment shader to render a red triangle.

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 for Three.js materials?▼

To create custom GLSL shaders for Three.js, you use ShaderMaterial or RawShaderMaterial, supplying your own vertex and fragment shader code to control rendering. This approach enables procedural textures, custom lighting, and post-processing effects in real-time 3D web apps.

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

ShaderMaterial automatically injects Three.js built-in uniforms, attributes, and GLSL shader chunks, while RawShaderMaterial provides a completely blank canvas requiring you to define all GLSL code manually. RawShaderMaterial is best when you need strict control over GLSL version compatibility and shader includes.

How do I pass data between vertex and fragment shaders in WebGL?▼

You pass data between vertex and fragment shaders in WebGL using varyings. You declare a varying in both the vertex and fragment shaders, assign its value in the vertex shader, and the GPU interpolates it for the fragment shader.

Can I modify Three.js built-in materials with custom GLSL code?▼

Yes, you can modify Three.js built-in materials with custom GLSL code using the onBeforeCompile method. This allows you to inject custom shader chunks into existing materials, enabling vertex displacement and Fresnel effects without rewriting the entire shader pipeline.

How do I implement vertex displacement and procedural textures in Three.js?▼

You implement vertex displacement and procedural textures by writing custom vertex and fragment shaders within a ShaderMaterial, manipulating geometry positions and sampling texture data mathematically. This allows real-time generation of visual effects without external image files.

What GLSL version compatibility issues affect Three.js shader development?▼

GLSL version compatibility in Three.js shader development affects syntax and available built-in functions, especially when using RawShaderMaterial or custom shader includes. Ensuring your GLSL code matches the target WebGL version prevents compilation errors and rendering failures.

Related Skills

Explore More Software Engineering Skills→
ElementTechElementTech
2

threejs-shaders

Create custom GLSL shaders for Three.js visual effects.

Community
Intermediate
ClinscottClinscott

threejs-shaders

Implement custom GLSL shaders in Three.js with ShaderMaterial and RawShaderMaterial.

Community
Advanced
huangzidahuangzida
2

threejs-shaders

Create and integrate custom GLSL shaders into Three.js scenes.

Community
Advanced
jtgironjtgiron

threejs-shaders

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

Community
Advanced