Three.js materials and shaders
Explains incorrect colors, lighting and transparency using the project’s actual renderer. It distinguishes color textures from numerical maps and checks shader compatibility before changing the visual effect.
threejs-materials-shaders
See how it helpsWhen is it useful?
Use when materials look wrong despite changing light intensity.
What does it help you do?
- Distinguishes color textures from normal and data maps.
- Checks tone mapping, transparency and depth behavior independently.
- Keeps shader changes compatible with the installed rendering backend.
Try asking this
Our racing game’s car paint is washed out, and tire smoke hides the road incorrectly. Check color-space handling, tone mapping, depth and transparency separately. Produce matching before-and-after views in daylight and night without switching the project to another renderer.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Three.js — materials shaders
Use when implementing Three.js materials, lighting, color management or shader extensions.
Version and project gate
Inspect Three.js revision, renderer/backend, addons import style, bundler, color-management conventions, animation loop owner, scene scale, glTF/decoder versions and existing physics wrapper. Never turn a task into an engine upgrade without the user’s intent. Read the version-matching official reference when an API decision depends on it.
Work
Identify the renderer and installed shader/material API before copying examples. Classify color versus non-color textures, environment lighting and tone mapping. Verify normal/tangent assumptions and transparency/depth behavior. Keep shader modifications isolated and versioned with their compilation assumptions.
Deliver
A material contract with representative images and a scoped implementation for the actual renderer. Keep the change in the existing project structure; separate actual observations from the proposed acceptance scenario below.
Failure to prevent
Do not mix WebGL shader chunks with incompatible WebGPU/TSL examples or fix incorrect color handling through arbitrary light intensity.
Acceptance scenario
Compare a known reference material, normal map and transparent overlap under intended lighting and output settings. Follow the project’s execution and verification permissions. If execution or a target device is unavailable, provide the reproduction steps and name the remaining uncertainty; do not mark it passed.
Scope and sources
This skill belongs to Vex. Agent selection is restricted by Orqestria’s assigned-agent policy, including forced skill selection; instruction text alone is not an access control. These are original task workflows researched from official documentation, not a copied or endorsed vendor skill.
Included files 1
SKILL.md