webgpu-threejs-tsl

Name: webgpu-threejs-tsl
Author: managedcode

461stars35forks

How to install webgpu-threejs-tsl?

managedcode/dotnet-skills/webgpu-threejs-tsl

$npx -y skills add managedcode/dotnet-skills --skill webgpu-threejs-tsl

Installs into the current project.

Summary

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 We

Files · 1

View on GitHub

SKILL.md

1	# WebGPU Three.js with TSL
2
3	TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.
4
5	## Quick Start
6
7	```javascript
8	import * as THREE from 'three/webgpu';
9	import { color, time, oscSine } from 'three/tsl';
10
11	const renderer = new THREE.WebGPURenderer();
12	await renderer.init();
13
14	const material = new THREE.MeshStandardNodeMaterial();
15	material.colorNode = color(0xff0000).mul(oscSine(time));
16	```
17
18	## Skill Contents
19
20	### Documentation
21	- `docs/core-concepts.md` - Types, operators, uniforms, control flow
22	- `docs/materials.md` - Node materials and all properties
23	- `docs/compute-shaders.md` - GPU compute with instanced arrays
24	- `docs/post-processing.md` - Built-in and custom effects
25	- `docs/wgsl-integration.md` - Custom WGSL functions
26	- `docs/device-loss.md` - Handling GPU device loss and recovery
27	- `docs/limits-and-features.md` - WebGPU device limits and optional features
28
29	### Examples
30	- `examples/basic-setup.js` - Minimal WebGPU project
31	- `examples/custom-material.js` - Custom shader material
32	- `examples/particle-system.js` - GPU compute particles
33	- `examples/post-processing.js` - Effect pipeline
34	- `examples/earth-shader.js` - Complete Earth with atmosphere
35
36	### Templates
37	- `templates/webgpu-project.js` - Starter project template
38	- `templates/compute-shader.js` - Compute shader template
39
40	### Reference
41	- `REFERENCE.md` - Quick reference cheatsheet
42
43	## Key Concepts
44
45	### Import Pattern
46	```javascript
47	// Always use the WebGPU entry point
48	import * as THREE from 'three/webgpu';
49	import { /* TSL functions */ } from 'three/tsl';
50	```
51
52	### Node Materials
53	Replace standard material properties with TSL nodes:
54	```javascript
55	material.colorNode = texture(map); // instead of material.map
56	material.roughnessNode = float(0.5); // instead of material.roughness
57	material.positionNode = displaced; // vertex displacement
58	```
59
60	### Method Chaining
61	TSL uses method chaining for operations:
62	```javascript
63	// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
64	time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)
65	```
66
67	### Custom Functions
68	Use `Fn()` for reusable shader logic:
69	```javascript
70	const fresnel = Fn(([power = 2.0]) => {
71	const nDotV = normalWorld.dot(viewDir).saturate();
72	return float(1.0).sub(nDotV).pow(power);
73	});
74	```
75
76	## When to Use This Skill
77
78	- Setting up Three.js with WebGPU renderer
79	- Creating custom shader materials with TSL
80	- Writing GPU compute shaders
81	- Building post-processing pipelines
82	- Migrating from GLSL to TSL
83	- Implementing visual effects (particles, water, terrain, etc.)
84
85	## Resources
86
87	- [Three.js TSL Wiki](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)
88	- [WebGPU Examples](https://github.com/mrdoob/three.js/tree/master/examples) (files prefixed with `webgpu_`)

People who liked this also viewed

6 picks

Type

webgpu-threejs-tsl

461stars35forks

View on GitHub

How to install webgpu-threejs-tsl?

managedcode/dotnet-skills/webgpu-threejs-tsl

$npx -y skills add managedcode/dotnet-skills --skill webgpu-threejs-tsl

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# WebGPU Three.js with TSL
2
3	TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.
4
5	## Quick Start
6
7	```javascript
8	import * as THREE from 'three/webgpu';
9	import { color, time, oscSine } from 'three/tsl';
10
11	const renderer = new THREE.WebGPURenderer();
12	await renderer.init();
13
14	const material = new THREE.MeshStandardNodeMaterial();
15	material.colorNode = color(0xff0000).mul(oscSine(time));
16	```
17
18	## Skill Contents
19
20	### Documentation
21	- `docs/core-concepts.md` - Types, operators, uniforms, control flow
22	- `docs/materials.md` - Node materials and all properties
23	- `docs/compute-shaders.md` - GPU compute with instanced arrays
24	- `docs/post-processing.md` - Built-in and custom effects
25	- `docs/wgsl-integration.md` - Custom WGSL functions
26	- `docs/device-loss.md` - Handling GPU device loss and recovery
27	- `docs/limits-and-features.md` - WebGPU device limits and optional features
28
29	### Examples
30	- `examples/basic-setup.js` - Minimal WebGPU project
31	- `examples/custom-material.js` - Custom shader material
32	- `examples/particle-system.js` - GPU compute particles
33	- `examples/post-processing.js` - Effect pipeline
34	- `examples/earth-shader.js` - Complete Earth with atmosphere
35
36	### Templates
37	- `templates/webgpu-project.js` - Starter project template
38	- `templates/compute-shader.js` - Compute shader template
39
40	### Reference
41	- `REFERENCE.md` - Quick reference cheatsheet
42
43	## Key Concepts
44
45	### Import Pattern
46	```javascript
47	// Always use the WebGPU entry point
48	import * as THREE from 'three/webgpu';
49	import { /* TSL functions */ } from 'three/tsl';
50	```
51
52	### Node Materials
53	Replace standard material properties with TSL nodes:
54	```javascript
55	material.colorNode = texture(map); // instead of material.map
56	material.roughnessNode = float(0.5); // instead of material.roughness
57	material.positionNode = displaced; // vertex displacement
58	```
59
60	### Method Chaining
61	TSL uses method chaining for operations:
62	```javascript
63	// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
64	time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)
65	```
66
67	### Custom Functions
68	Use `Fn()` for reusable shader logic:
69	```javascript
70	const fresnel = Fn(([power = 2.0]) => {
71	const nDotV = normalWorld.dot(viewDir).saturate();
72	return float(1.0).sub(nDotV).pow(power);
73	});
74	```
75
76	## When to Use This Skill
77
78	- Setting up Three.js with WebGPU renderer
79	- Creating custom shader materials with TSL
80	- Writing GPU compute shaders
81	- Building post-processing pipelines
82	- Migrating from GLSL to TSL
83	- Implementing visual effects (particles, water, terrain, etc.)
84
85	## Resources
86
87	- [Three.js TSL Wiki](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)
88	- [WebGPU Examples](https://github.com/mrdoob/three.js/tree/master/examples) (files prefixed with `webgpu_`)

People who liked this also viewed

6 picks

Type