git:20260912.c3d58ff to v3.0.0

+ ---

+ name: glsl-shader-expert

+ description: "Expert guide for modern web shaders: Three Shading Language (TSL), WebGPU WGSL, Compute Shaders, and WebGL GLSL in Three.js and Babylon.js. Covers procedural generation, compute kernels, and post-processing / Panduan ahli shader web modern: TSL, WGSL, Compute Shader, dan GLSL."

+ author: "vibes-plug-swarm"

+ version: "3.0.0"

+ ---

+

+ # Modern Web Shader Expert (TSL, WGSL, Compute Shaders & GLSL)

+

+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

+

+ ---

+

+ <a name="english"></a>

+ ## English

+

+ ### Orchestration & Integration

+ Connects and orchestrates with relevant domain skills:

+ - `web-3d-graphics-expert` — WebGPU/WebGL scene rendering and NodeMaterial binding.

+ - `web-game-engine-expert` — Physics simulations, particle systems, and VFX materials.

+ - `ui-ux-pro-max` — Modern visual effects, glassmorphism, and screen-space distortion.

+ - `performance-web-vitals` — GPU profiling, draw call reduction, and compute shader optimization.

+

+ ### Description

+ Production-grade guidance for authoring, compiling, and optimizing GPU shaders for modern web applications. Focuses on the cutting-edge **TSL (Three Shading Language)** node system which cross-compiles to both **WGSL (WebGPU)** and **GLSL (WebGL2)**, standalone **WGSL Compute Shaders** for parallel processing (particles, boids, simulation), and legacy **GLSL** optimization.

+

+ ### Trigger Conditions

+ Activate this skill when the user is:

+ - Writing custom shader materials in Three.js or Babylon.js.

+ - Refactoring legacy GLSL shaders to Three Shading Language (TSL) or WebGPU WGSL.

+ - Implementing WebGPU Compute Shaders (`@compute` workgroups, storage buffers).

+ - Creating procedural VFX: fluid simulations, volumetric clouds, noise-based terrain, or holographic shields.

+ - Designing post-processing screen passes (bloom, chromatic aberration, SSAO/GTAO, depth of field).

+ - Optimizing GPU bottlenecks, thread divergence, or ALU instruction counts.

+

+ ---

+

+ ### Modern Web Shader Paradigms (2026)

+

+ | Paradigm | Target API | Key Advantages | When to Use |

+ | :--- | :--- | :--- | :--- |

+ | **TSL (Three Shading Language)** | WebGPU + WebGL2 | Cross-compiles node trees to WGSL and GLSL; type-safe JavaScript/TypeScript syntax. | Default standard for modern Three.js (r170+) materials and post-processing. |

+ | **WGSL (WebGPU Shading Language)** | WebGPU native | Direct GPU memory access, structured storage buffers, atomic operations. | Raw WebGPU apps, Babylon.js WebGPU compute, custom WebGPU pipelines. |

+ | **Compute Shaders** | WebGPU | General-purpose GPU (GPGPU) computing; runs without rasterization or vertex buffers. | 100,000+ particle systems, cloth physics, fluid simulation, GPU boids. |

+ | **GLSL (ES 3.0)** | WebGL2 fallback | Universal device compatibility on legacy hardware. | Legacy Three.js/Babylon.js projects and fallback pipelines. |

+

+ ---

+

+ ### 1. Three Shading Language (TSL) Node System

+

+ TSL replaces string-concatenated GLSL with modular, type-safe node expressions that Three.js automatically compiles to WGSL on WebGPU and GLSL on WebGL2.

+

+ ```typescript

+ import * as THREE from 'three/webgpu';

+ import { Fn, float, vec3, color, uv, time, positionLocal, sin, uniform } from 'three/tsl';

+

+ // Define custom dynamic uniforms

+ const uFrequency = uniform(3.0);

+ const uSpeed = uniform(1.5);

+

+ // Reusable TSL shader function (Node-based)

+ const waterWave = Fn(([freq, spd]) => {

+ const coord = uv();

+ const wave = sin(coord.x.mul(freq).add(time.mul(spd)))

+ .add(sin(coord.y.mul(freq).add(time.mul(spd))))

+ .mul(0.5);

+ return wave;

+ });

+

+ // Vertex Position displacement in TSL

+ const displacedPosition = Fn(() => {

+ const wave = waterWave(uFrequency, uSpeed);

+ const newPos = positionLocal.add(vec3(0.0, wave.mul(0.2), 0.0));

+ return newPos;

+ });

+

+ // Create Node Material

+ const oceanMaterial = new THREE.MeshStandardNodeMaterial();

+ oceanMaterial.positionNode = displacedPosition();

+ oceanMaterial.colorNode = Fn(() => {

+ const wave = waterWave(uFrequency, uSpeed);

+ const baseColor = color(0x004488);

+ const foamColor = color(0x88eeff);

+ return baseColor.mix(foamColor, wave.add(0.5));

+ })();

+ ```

+

+ ---

+

+ ### 2. WebGPU Compute Shaders (GPGPU Parallel Processing)

+

+ Compute shaders run arbitrary mathematical workloads across thousands of GPU threads simultaneously:

+

+ ```typescript

+ import * as THREE from 'three/webgpu';

+ import { Fn, float, vec3, uniform, storage, instanceIndex } from 'three/tsl';

+

+ const PARTICLE_COUNT = 65536;

+

+ // Create GPU Storage Buffers

+ const positionBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);

+ const velocityBuffer = new THREE.StorageBufferAttribute(new Float32Array(PARTICLE_COUNT * 3), 3);

+

+ const posStorage = storage(positionBuffer, 'vec3', PARTICLE_COUNT);

+ const velStorage = storage(velocityBuffer, 'vec3', PARTICLE_COUNT);

+

+ // TSL Compute Kernel (executes per particle on GPU)

+ const computeParticles = Fn(() => {

+ const index = instanceIndex;

+ const pos = posStorage.element(index);

+ const vel = velStorage.element(index);

+

+ // Update position based on velocity

+ pos.addAssign(vel.mul(0.016));

+

+ // Bounce off boundaries [-5, 5]

+ vel.y.assign(pos.y.lessThan(-5.0).select(vel.y.abs(), vel.y));

+ vel.y.assign(pos.y.greaterThan(5.0).select(vel.y.abs().negate(), vel.y));

+ })().compute(PARTICLE_COUNT);

+

+ // In the render loop:

+ // renderer.compute(computeParticles);

+ // renderer.render(scene, camera);

+ ```

+

+ ---

+

+ ### 3. High-Performance Shader Rules (GPU Architecture)

+

+ 1. **Eliminate Branching Divergence:**

+ - GPU threads execute in lockstep warps (NVIDIA: 32 threads, AMD/Apple: 32-64 threads).

+ - If threads inside the same warp take different branches in an `if/else`, both paths are evaluated serially, destroying throughput.

+ - **Use Math Primitives:** Replace branches with `step()`, `smoothstep()`, `mix()`, `clamp()`, or `select()`.

+ ```glsl

+ // BAD: Divergent GPU branch

+ if (vDepth > 0.5) { color = vec3(1.0); } else { color = vec3(0.0); }

+

+ // GOOD: Branchless step function

+ color = vec3(step(0.5, vDepth));

+ ```

+

+ 2. **Precision Management:**

+ - Always specify precision for mobile GPUs.

+ - Use `mediump` (16-bit float) for colors, normal vectors, and UVs to gain 2x arithmetic throughput and save bandwidth.

+ - Reserve `highp` (32-bit float) for world-space coordinates and depth calculations.

+

+ 3. **Precompute on CPU or Vertex Shader:**

+ - Never compute values in the fragment shader (millions of pixels) that are constant across the mesh or linear across vertices.

+ - Move matrix inversions, static lighting directions, or uniform transformations to the CPU or Vertex stage.

+

+ ---

+

+ <a name="bahasa-indonesia"></a>

+ ## Bahasa Indonesia

+

+ ### Integrasi Orkestrasi

+ Terhubung dan mengorkestrasi skill domain yang relevan:

+ - `web-3d-graphics-expert` — Rendering scene WebGPU/WebGL dan integrasi NodeMaterial.

+ - `web-game-engine-expert` — Simulasi fisika, sistem partikel, dan material efek game.

+ - `ui-ux-pro-max` — Efek visual modern, glassmorphism, dan distorsi screen-space.

+ - `performance-web-vitals` — Profiling GPU, optimasi draw call, dan compute shader.

+

+ ### Deskripsi

+ Panduan produksi untuk menulis, mengompilasi, dan mengoptimalkan shader GPU untuk aplikasi web modern. Fokus pada sistem node **TSL (Three Shading Language)** yang dapat dikompilasi silang menjadi **WGSL (WebGPU)** dan **GLSL (WebGL2)**, **Compute Shader WGSL** mandiri untuk pemrosesan paralel GPU skala masif (partikel, boids, simulasi cairan), dan optimasi **GLSL**.

+

+ ### Kondisi Pemicu

+ Aktifkan skill ini ketika pengguna:

+ - Menulis *custom shader material* pada Three.js atau Babylon.js.

+ - Merefaktor shader GLSL lama menjadi Three Shading Language (TSL) atau WebGPU WGSL.

+ - Mengimplementasikan WebGPU Compute Shader (`@compute` workgroups, storage buffers).

+ - Membuat efek visual prosedural (simulasi air, awan volumetrik, medan prosedural, perisai hologram).

+ - Merancang *post-processing passes* (bloom, chromatic aberration, SSAO, depth of field).

+ - Mengatasi bottleneck GPU, *thread divergence*, atau instruksi ALU berlebih.

+

+ ---

+

+ ### Prinsip Utama Shader Modern

+

+ 1. **Adopsi TSL (Three Shading Language)**:

+ - Hindari menulis shader dalam bentuk *string concatenation* GLSL mentah pada proyek modern. Gunakan TSL (`Fn`, `color`, `uv`, `positionLocal`). TSL menjaga keamanan tipe (type-safety) dan otomatis menghasilkan WGSL atau GLSL sesuai runtime.

+

+ 2. **GPGPU dengan Compute Shader**:

+ - Manfaatkan WebGPU Compute Shader untuk kalkulasi ribuan partikel atau simulasi matematika tanpa melalui tahap rasterisasi atau vertex buffer tradisional.

+

+ 3. **Aturan Anti-Branching (Branchless Shader)**:

+ - GPU mengeksekusi instruksi dalam kelompok thread (*warp/wavefront*). Percabangan `if/else` yang tidak seragam akan memaksa GPU mengeksekusi kedua cabang secara berurutan (*branch penalty*).

+ - Gunakan fungsi matematika seperti `step()`, `smoothstep()`, dan `mix()` alih-alih percabangan logika kondisional.

+

+ 4. **Manajemen Presisi**:

+ - Gunakan `mediump` (16-bit float) untuk warna, koordinat UV, dan vektor normal untuk melipatgandakan kecepatan komputasi pada GPU smartphone.