skills.rest
CarlosQ96
CarlosQ96COMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Create custom Three.js shaders for vertex manipulation and fragment coloring.

Updated Apr 9, 2026
Search Tags:#glsl#shaders#webgl#threejs#fragment#shadermaterial#vertex
One-click install
npx skills add https://github.com/CarlosQ96/robot-crawler --skill threejs-shaders-carlosq96
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/CarlosQ96/robot-crawler/tree/main/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/CarlosQ96/robot-crawler --skill threejs-shaders-carlosq96

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often struggle to create bespoke visual effects in Three.js because writing GLSL shaders, managing uniforms, and integrating them with existing materials can be complex and error‑prone.

Core Features & Use Cases

  • ShaderMaterial & RawShaderMaterial: Choose between high‑level convenience or low‑level full control for custom vertex and fragment programs.
  • Uniform Management: Define numbers, vectors, colors, matrices, textures, and arrays; update them efficiently from JavaScript.
  • Varyings & Varyings: Pass data from vertex to fragment shaders for effects like normal‑based coloring or UV mapping.
  • Common Shader Patterns: Ready‑to‑use snippets for texture sampling, vertex displacement, Fresnel, noise, gradients, rim lighting, and dissolve effects.
  • Extending Built‑in Materials: Use onBeforeCompile to inject custom code into standard materials such as MeshStandardMaterial.
  • Performance Tips: Guidance on minimizing uniforms, avoiding conditionals, pre‑calculating values, and limiting overdraw.

Quick Start

Use the threejs-shaders skill to add a custom wave displacement shader to a mesh in your Three.js scene.

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 visual effects with Three.js shaders?▼

To create custom visual effects with Three.js shaders, you can use ShaderMaterial or RawShaderMaterial to write custom GLSL vertex and fragment programs, and manage uniforms to dynamically update visual properties from JavaScript.

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

ShaderMaterial provides high-level convenience by automatically injecting built-in Three.js variables, whereas RawShaderMaterial offers low-level full control over custom vertex and fragment programs without any automatic prefixing.

How do I inject custom shader code into MeshStandardMaterial?▼

You can inject custom shader code into MeshStandardMaterial using the onBeforeCompile method, allowing you to extend built-in materials with custom GLSL logic while retaining standard lighting and uniform management.

How do I pass data from a vertex shader to a fragment shader in Three.js?▼

You pass data from a vertex shader to a fragment shader in Three.js by declaring varyings, which allow you to transfer interpolated values like normal-based coloring or UV mapping coordinates between the two shader stages.

What are common GLSL shader patterns for Three.js web graphics?▼

Common GLSL shader patterns for Three.js include ready-to-use snippets for texture sampling, vertex displacement, Fresnel effects, noise generation, gradients, rim lighting, and dissolve effects to enhance web-based 3D graphics.

How can I optimize Three.js shader performance and avoid conditionals?▼

To optimize Three.js shader performance, minimize the number of uniforms, avoid conditional statements in GLSL, pre-calculate values in JavaScript, and limit overdraw to reduce rendering overhead and improve frame rates.

Related Skills

Explore More Software Engineering Skills→
soeiroosoeiroo

threejs-materials

Select and tune Three.js materials for real-time 3D scenes.

Community
Intermediate
HsnSaboorHsnSaboor

3d-graphics

Develop interactive 3D web graphics with Three.js, WebGL, and WebGPU.

Community
Advanced
lengo0951lengo0951

threejs

Create interactive 3D scenes with Three.js using WebGL and WebGPU.

Community
Advanced
het8802het8802
3

threejs-shaders

Create custom Three.js visual effects with GLSL shaders and uniforms.

Community
Advanced