無料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.

managedcode/dotnet-skills

インストール方法を見る

含まれるファイル（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.json176 B
REFERENCE.md8.8 KB
templates/compute-shader.js9.3 KB
templates/webgpu-project.js6.2 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

Three.js TSL Wiki
WebGPU Examples (files prefixed with webgpu_)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ