glsl-shader-expert

GLSL Shader Expert (WebGL 3D Graphics)

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-grade guidance for writing and integrating custom GLSL (OpenGL Shading Language) shaders into web applications using Three.js (ShaderMaterial / RawShaderMaterial) or Babylon.js (ShaderMaterial). Focuses on creating advanced visual effects, custom lighting models, procedural textures (noise), and post-processing passes.

Trigger Conditions

Activate this skill when the user is:

• Asking to create custom materials that standard PBR materials cannot achieve.
• Writing Vertex or Fragment shaders in GLSL.
• Implementing procedural generation (e.g., Perlin noise, Simplex noise) on the GPU.
• Creating post-processing effects or screen-space shaders.
• Optimizing GPU performance by moving CPU calculations to vertex shaders.

Core Concepts

1. The Graphics Pipeline

Understand the flow:

1. Vertex Shader: Runs for every vertex. Used to manipulate geometry (position) and pass data (varyings) to the fragment shader. Must set gl_Position.
2. Fragment Shader: Runs for every pixel (fragment). Used to determine color. Must set gl_FragColor.

2. Three.js ShaderMaterial Example

import * as THREE from 'three';

const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    // Standard projection
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  uniform float uTime;
  varying vec2 vUv;
  void main() {
    // Simple animated color based on UV coordinates and time
    vec3 color = vec3(vUv.x, vUv.y, sin(uTime) * 0.5 + 0.5);
    gl_FragColor = vec4(color, 1.0);
  }
`;

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms: {
    uTime: { value: 0 }
  }
});

Note: In the render loop, you must update material.uniforms.uTime.value += delta;