threejs-shaders

Item: threejs-shaders
Rating: 5.8
Author: Implexa

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or…

view source

installs

stars

karma

SkillRank score ↗

5.8/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-05-26

threejs-shaders covers custom glsl shader authoring via shadermaterial and rawshadermaterial, uniform management, six reusable shader patterns (displacement, fresnel, rim lighting, dissolve), and material injection via onbeforecompile for extending built-in materials.

structure

4.0

trigger phrases

6.0

procedure

5.0

edge cases

3.0

documentation

6.0

strengths

SKILL.md

Three.js Shaders

Quick Start

import * as THREE from "three";

const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) },
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 color;

related skills

semantically similar in the cross-vendor index

skills.sh

76% match

r3f-shaders

React Three Fiber shaders - GLSL, shaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment…

don't have the plugin yet? install it then click "run inline in claude" again.