skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

threejs-shaders

Write custom GLSL shaders and ShaderMaterials for Three.js visual effects.

Updated Sep 1, 2026
Search Tags:#glsl#webgl#three.js#shader#vertex shader#shadermaterial#uniforms
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-shaders-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-shaders
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-shaders
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-shaders-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Writing custom WebGL shaders in Three.js requires juggling GLSL syntax, uniform declarations, varying interpolation, and material extension hooks, which is error-prone without a structured reference. ## Core Features & Use Cases - ShaderMaterial and RawShaderMaterial Setup: Create custom materials with uniforms, vertex shaders, and fragment shaders using built-in or fully manual declarations. - Common Effect Patterns: Implement vertex displacement, Fresnel lighting, rim lighting, dissolve effects, noise functions, and gradients with ready GLSL snippets. - Extending Built-in Materials: Use onBeforeCompile to inject custom logic into MeshStandardMaterial and other built-in materials at known shader chunk injection points. - Use Case: You want an animated wave surface in a Three.js scene. Use the vertex displacement pattern with a time uniform updated in the animation loop to produce continuous motion. ## Quick Start Ask the AI to create a Three.js ShaderMaterial with a wave vertex displacement effect and a time uniform updated each frame.

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 string, and a fragmentShader string. ShaderMaterial provides built-in uniforms like projectionMatrix and attributes like position, so you only write the main function logic.

What is the difference between ShaderMaterial and RawShaderMaterial?▼

ShaderMaterial automatically injects built-in uniforms and attributes such as modelViewMatrix and position. RawShaderMaterial gives full control, requiring you to declare precision, attributes, and uniforms manually in the GLSL code.

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

Assign new values through material.uniforms, for example material.uniforms.time.value = clock.getElapsedTime() inside the animation loop. Vectors and colors are updated with methods like set() or setHSL() on the uniform value.

Can I modify built-in Three.js materials with custom GLSL?▼

Yes, use material.onBeforeCompile to access and modify the shader object before compilation. Replace shader chunks like #include <begin_vertex> with custom code and add uniforms through shader.uniforms.

Why is my Three.js shader not rendering or showing errors?▼

Enable renderer.debug.checkShaderErrors to surface GLSL compile errors in the console. Common causes include missing varying declarations in one shader stage, undeclared uniforms, or using texture2D with GLSL3 where texture() is required.

How do I pass data from vertex shader to fragment shader in GLSL?▼

Declare a varying with the same name and type in both shaders, such as varying vec2 vUv. Assign it in the vertex shader, and the GPU interpolates the value across fragments for use in the fragment shader.

Related Skills

Explore More Software Engineering Skills→
jtgironjtgiron

threejs-geometry

Create Three.js geometry with built-in shapes, BufferGeometry, and instanced meshes.

Community
Intermediate
adm-humanerdadm-humanerd

ascii-video

Render input media into colored ASCII video output.

Community
Advanced
OmerZeyveliOmerZeyveli
3

shader-graph

Guide Unity ShaderGraph material design and optimization for URP and HDRP workflows.

Community
Intermediate
het8802het8802
3

threejs-shaders

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

Community
Advanced