Skip to content
cccskills
FreePublished on GitHub

webgpu-threejs-tsl

Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills
See how to install

Files included (17)

  • SKILL.md3.1 KB
  • docs/compute-shaders.md15.3 KB
  • docs/core-concepts.md10.7 KB
  • docs/device-loss.md9.0 KB
  • docs/limits-and-features.md4.9 KB
  • docs/materials.md8.6 KB
  • docs/post-processing.md13.0 KB
  • docs/wgsl-integration.md6.4 KB
  • examples/basic-setup.js2.2 KB
  • examples/custom-material.js4.2 KB
  • examples/earth-shader.js8.4 KB
  • examples/particle-system.js7.2 KB
  • examples/post-processing.js5.1 KB
  • manifest.json206 B
  • REFERENCE.md8.8 KB
  • templates/compute-shader.js9.3 KB
  • templates/webgpu-project.js6.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

WebGPU Three.js with TSL

TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.

Quick Start

import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));

Skill Contents

Documentation

  • docs/core-concepts.md - Types, operators, uniforms, control flow
  • docs/materials.md - Node materials and all properties
  • docs/compute-shaders.md - GPU compute with instanced arrays
  • docs/post-processing.md - Built-in and custom effects
  • docs/wgsl-integration.md - Custom WGSL functions
  • docs/device-loss.md - Handling GPU device loss and recovery
  • docs/limits-and-features.md - WebGPU device limits and optional features

Examples

  • examples/basic-setup.js - Minimal WebGPU project
  • examples/custom-material.js - Custom shader material
  • examples/particle-system.js - GPU compute particles
  • examples/post-processing.js - Effect pipeline
  • examples/earth-shader.js - Complete Earth with atmosphere

Templates

  • templates/webgpu-project.js - Starter project template
  • templates/compute-shader.js - Compute shader template

Reference

  • REFERENCE.md - Quick reference cheatsheet

Key Concepts

Import Pattern

// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';

Node Materials

Replace standard material properties with TSL nodes:

material.colorNode = texture(map);        // instead of material.map
material.roughnessNode = float(0.5);      // instead of material.roughness
material.positionNode = displaced;         // vertex displacement

Method Chaining

TSL uses method chaining for operations:

// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)

Custom Functions

Use Fn() for reusable shader logic:

const fresnel = Fn(([power = 2.0]) => {
  const nDotV = normalWorld.dot(viewDir).saturate();
  return float(1.0).sub(nDotV).pow(power);
});

When to Use This Skill

  • Setting up Three.js with WebGPU renderer
  • Creating custom shader materials with TSL
  • Writing GPU compute shaders
  • Building post-processing pipelines
  • Migrating from GLSL to TSL
  • Implementing visual effects (particles, water, terrain, etc.)

Resources

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agentic-workflows

Free

Route gh-aw workflow design/create/debug/upgrade requests to the right prompts.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills490Updated Oct 17, 2026

analyzer-config

Free

Use a repo-root `.editorconfig` to configure free .NET analyzer and style rules. Use when a .NET repo needs rule severity, code-style options, section layout, or analyzer ownership made explicit. USE FOR: the repo needs a root .editorconfig; analyzer severity and style ownership are unclear; the team wants one source of truth for rule configuration. DO NOT USE FOR: choosing analyzers with no config change; formatting-only execution with no config ownership question. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills490Updated Oct 17, 2026

analyzing-dotnet-performance

Free

Scans .NET code for ~50 performance anti-patterns across async, memory, strings, collections, LINQ, regex, serialization, and I/O with tiered severity classification. Use when analyzing .NET code for optimization opportunities, reviewing hot paths, or auditing allocation-heavy patterns.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills490Updated Oct 17, 2026

android-tombstone-symbolication

Free

Symbolicate the .NET runtime frames in an Android tombstone file. Extracts BuildIds and PC offsets from the native backtrace, downloads debug symbols from the Microsoft symbol server, and runs llvm-symbolizer to produce function names with source file and line numbers. USE FOR triaging a .NET MAUI or Mono Android app crash from a tombstone, resolving native backtrace frames in libmonosgen-2.0.so or libcoreclr.so to .NET runtime source code, or investigating SIGABRT, SIGSEGV, or other native signals originating from the .NET runtime on Android. DO NOT USE FOR pure Java/Kotlin crashes, managed .NET exceptions that are already captured in logcat, or iOS crash logs. INVOKES Symbolicate-Tombstone.ps1 script, llvm-symbolizer, Microsoft symbol server.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills490Updated Oct 17, 2026

apple-crash-symbolication

Free

Symbolicate .NET runtime frames in Apple platform .ips crash logs (iOS, tvOS, Mac Catalyst, macOS). Extracts UUIDs and addresses from the native backtrace, locates dSYM debug symbols, and runs atos to produce function names with source file and line numbers. Automatically downloads .dwarf symbols from the Microsoft symbol server using Mach-O UUIDs. USE FOR triaging a .NET MAUI or Mono app crash from an .ips file on any Apple platform, resolving native backtrace frames in libcoreclr or libmonosgen-2.0 to .NET runtime source code, retrieving .ips crash logs from a connected iOS device or iPhone, or investigating EXC_CRASH, EXC_BAD_ACCESS, SIGABRT, or SIGSEGV originating from the .NET runtime. DO NOT USE FOR pure Swift/Objective-C crashes with no .NET components, or Android tombstone files. INVOKES Symbolicate-Crash.ps1 script, atos, dwarfdump, idevicecrashreport.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills490Updated Oct 17, 2026

architecture

Free

Design or review .NET solution architecture across modular monoliths, clean architecture, vertical slices, microservices, DDD, CQRS, and cloud-native boundaries without over-engineering. USE FOR: .NET architecture choices; layer and domain boundary review; service decomposition; clean architecture, vertical slice, DDD, CQRS, and modular monolith decisions. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.

The English summary is being prepared. Showing the original description.

managedcode/dotnet-skills490Updated Oct 17, 2026

See all skills by managedcode

Report a problem with this skill