skills.rest
mmdonohue
mmdonohueCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

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

1|Updated Apr 7, 2025
Search Tags:#graphics#glsl#webgl#threejs#shader#ShaderMaterial#custom-material
One-click install
npx skills add https://github.com/mmdonohue/zuzu --skill threejs-shaders-mmdonohue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/mmdonohue/zuzu/tree/main/.claude/skills/threejs-shaders
Command: npx skills add https://github.com/mmdonohue/zuzu --skill threejs-shaders-mmdonohue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js shader work often requires crafting ShaderMaterial or RawShaderMaterial pipelines, custom uniforms, and shader glue code. This Skill provides practical guidance to design and implement GLSL shaders within Three.js, enabling custom visual effects.

Core Features & Use Cases

  • Create ShaderMaterial or RawShaderMaterial with custom vertexShader and fragmentShader.
  • Manage uniforms, varyings, and onBeforeCompile to extend existing materials.
  • Use GLSL pattern combinations (noise, Fresnel, displacement) to craft visuals in interactive 3D scenes.
  • Use case: build custom materials for web-based 3D apps, games, or product visualizations.

Quick Start

Create a Three.js scene and replace a material with ShaderMaterial using the sample vertexShader and fragmentShader strings; define uniforms and update them in the animation loop.

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

To create a custom ShaderMaterial in Three.js, define your GLSL vertexShader and fragmentShader strings, configure uniforms, and pass them to a ShaderMaterial or RawShaderMaterial instance to render custom visual effects in your 3D scene.

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

ShaderMaterial automatically injects built-in Three.js uniforms and attributes, while RawShaderMaterial provides a blank canvas for pure WebGL GLSL code. Choose ShaderMaterial to integrate with Three.js lighting, or RawShaderMaterial for fully custom pipelines.

How do I use onBeforeCompile to extend a built-in Three.js material with custom GLSL?▼

Use the onBeforeCompile property on a standard Three.js material to inject custom GLSL shader snippets before compilation. This allows you to add effects like displacement and Fresnel without writing a complete ShaderMaterial from scratch.

How do I update shader uniforms in a Three.js animation loop?▼

To update shader uniforms in a Three.js animation loop, reference the uniform variable in your render function and assign a new value. Uniforms pass dynamic data like time or mouse position into the GLSL vertex and fragment shaders for interactive visuals.

Do I need to know WebGL to write shaders for Three.js?▼

Writing shaders for Three.js requires understanding standard WebGL concepts and GLSL syntax. You need to manage varyings, uniforms, and vertex/fragment shader integration to successfully craft custom visual effects in interactive 3D scenes.

Related Skills

Explore More Software Engineering Skills→
mashharukimashharuki

threejs-shaders

Develop custom Three.js shaders with GLSL and ShaderMaterial.

Community
Advanced
hexianWebhexianWeb
175

vtj-shader-development

Integrates and debugs GLSL shaders in Three.js and Vue 3 projects.

Community
Intermediate
dogmandcldogmandcl

threejs-shaders

Implement custom GLSL shader effects in Three.js using ShaderMaterial and RawShaderMaterial.

Community
Advanced
jtgironjtgiron

threejs-shaders

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

Community
Advanced