TSL(Three.js 셰이딩 언어)을 사용하여 WebGPU 지원 Three.js 애플리케이션을 개발하는 에이전트 스킬입니다.

마지막 업데이트일: 2026년 4월 1일 — r183+ API 변경 Three.js 부합.

개요

이 기술은 클로드에게 다음과 같은 포괄적인 지식을 제공합니다:

• WebGPU 렌더러로 Three.js 설정
• TSL(Three.js 셰이딩 언어)을 사용한 셰이더 작성
• 노드 기반 재료 생성
• GPU 컴퓨트 셰이더 구축
• 후처리 효과 구현
• 맞춤형 WGSL 코드 통합

설치

이 저장소는 동일한 콘텐츠를 두 가지 형식으로 배포하므로, Claude Code(에이전트 스킬로서)와 커서(프로젝트 규칙으로서) 모두에서 작동합니다. skills/ 아래의 Claude 스킬이 진실의 출처이며; .cursor/rules/의 커서 규칙은 얇은 시임으로, @file를 참조하여 동일한 문서를 참조하여 편집이 자동으로 진행됩니다.

클로드 코드

또는 skills/webgpu-threejs-tsl 폴더를 수동으로 복사할 수도 있습니다:

• 글로벌: ~/.claude/skills/
• 프로젝트: /.claude/skills/

커서

이 저장소를 복제해서 직접 열어 — 커서는 자동으로 .cursor/rules/를 감지합니다.

자신의 프로젝트에서 규칙을 사용하려면 **두 개의 ** 디렉터리를 프로젝트 루트에 복사하여 경로를 보존하세요:

그 '.

WebGPU Three.js TSL Skill

An Agent Skill for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language).

Last updated: April 1, 2026 — aligned with Three.js r183+ API changes.

Overview

This skill provides Claude with comprehensive knowledge for:

• Setting up Three.js with WebGPU renderer
• Writing shaders using TSL (Three.js Shading Language)
• Creating node-based materials
• Building GPU compute shaders
• Implementing post-processing effects
• Integrating custom WGSL code

Installation

This repo ships the same content in two formats so it works in both Claude Code (as an Agent Skill) and Cursor (as project rules). The Claude skill under skills/ is the source of truth; the Cursor rules under .cursor/rules/ are thin shims that @file-reference those same docs, so edits flow through automatically.

Claude Code

# Install from this repository
/skill install webgpu-threejs-tsl@/webgpu-claude-skill

Or manually copy the skills/webgpu-threejs-tsl folder to:

• Global: ~/.claude/skills/
• Project: /.claude/skills/

Cursor

Clone this repo and open it directly — Cursor picks up .cursor/rules/ automatically.

To use the rules in your own project, copy both directories into your project root, preserving the paths:

your-project/
├── .cursor/rules/              # from this repo
└── skills/webgpu-threejs-tsl/  # from this repo (referenced by the rules)

The .mdc files use @file references pointing at skills/webgpu-threejs-tsl/..., so the skills/ directory must travel with them. If you’d rather not keep the skills/ folder, inline the referenced content into each .mdc file.

The rules are scoped by globs and auto-attach only on relevant files:

• webgpu-threejs-tsl.mdc — entry point, JS/TS files
• compute-shaders.mdc — files matching *compute* or *particle*
• post-processing.mdc — files matching *post*, *effect*, *bloom*
• wgsl-integration.mdc — .wgsl files and *wgsl* JS/TS
• device-loss-and-limits.mdc — files matching *renderer* or *webgpu*

Skill Structure

skills/webgpu-threejs-tsl/
├── SKILL.md                    # Entry point with overview
├── REFERENCE.md                # Quick reference cheatsheet
├── docs/
│   ├── core-concepts.md        # Types, operators, uniforms, control flow
│   ├── materials.md            # Node materials and properties
│   ├── compute-shaders.md      # GPU compute documentation
│   ├── post-processing.md      # Built-in and custom effects
│   ├── wgsl-integration.md     # Custom WGSL functions
│   └── device-loss.md          # GPU device loss handling and recovery
├── examples/
│   ├── basic-setup.js          # Minimal WebGPU project
│   ├── custom-material.js      # Custom shader material
│   ├── particle-system.js      # GPU compute particles
│   ├── post-processing.js      # Effect pipeline