skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Write custom GLSL shaders for Three.js ShaderMaterial and extend built-in materials.

Updated Aug 12, 2026
Search Tags:#glsl#shaders#webgl#three.js#shadermaterial#uniforms#vertex displacement
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-shaders-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/threejs-shaders
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-shaders-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom visual effects in Three.js requires deep knowledge of GLSL, uniforms, varyings, and material internals, and small mistakes produce silent black screens. This Skill provides working patterns for ShaderMaterial, RawShaderMaterial, and onBeforeCompile so effects compile and render correctly. ## Core Features & Use Cases - Custom ShaderMaterial Setup: Create vertex and fragment shaders with uniforms, varyings, textures, and instanced attributes wired correctly. - Common Effect Patterns: Ready-made implementations of vertex displacement, Fresnel, rim lighting, dissolve, gradients, and noise-based effects. - Extending Built-in Materials: Use onBeforeCompile to inject custom logic into MeshStandardMaterial and other built-in shaders at known chunk injection points. - Use Case: You want a wave-displaced plane with a Fresnel glow for a hero section. Use this Skill to build the ShaderMaterial, animate the time uniform, and debug the output. ## Quick Start Write a Three.js ShaderMaterial that displaces vertices with a sine wave animated by a time uniform and colors the surface with a Fresnel 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 a custom shader in Three.js?▼

Create a THREE.ShaderMaterial with uniforms, a vertexShader, and a fragmentShader written in GLSL. ShaderMaterial provides built-in uniforms like projectionMatrix and attributes like position and uv, so you only write the main function logic.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial automatically injects built-in uniforms, attributes, and precision headers, while RawShaderMaterial requires you to declare everything yourself including precision, attributes, and matrices. Use RawShaderMaterial only when you need full control over the shader source.

How do I modify a built-in Three.js material with custom GLSL?▼

Use material.onBeforeCompile to access and edit the shader object before compilation. Replace chunk includes like #include <begin_vertex> with your injected code, add custom uniforms to shader.uniforms, and store the shader reference for per-frame updates.

Why is my Three.js shader rendering black or not compiling?▼

Black output usually means a GLSL compile error, undeclared uniform, or wrong varying name between vertex and fragment shaders. Enable renderer.debug.checkShaderErrors and log the shader source in onBeforeCompile, then visualize vUv or vNormal to isolate the failing stage.

How do I pass textures and update uniforms in a Three.js shader?▼

Add the texture to uniforms as { value: texture } and declare it as uniform sampler2D in GLSL, sampling with texture2D. Update values per frame by assigning material.uniforms.name.value, using .set() for vectors and .copy() for matrices.

Related Skills

Explore More Design & Creative Skills→
norrbackanorrbacka

threejs-fundamentals

Set up and repair Three.js scene infrastructure with cameras, renderers, and animation loops.

Community
Intermediate
openharmonyinsightopenharmonyinsight
31

ohos-dev-graphics3d-combined-postprocess

Implement single-pass Combined post-process effects in OpenHarmony Graphics3D.

Official
Advanced
XyrcesXyrces
2

gpu_rendering_optimization

Optimize Godot GPU rendering by reducing draw calls, overdraw, shader cost, and texture memory pressure.

Community
Advanced
calesthiocalesthio
55.1k

threejs-materials

Configure Three.js materials including PBR, toon, and custom GLSL shaders for mesh styling.

Community
Intermediate