# WebGPU Claude Skill: TSL을 사용하여 WebGPU 기반 Three.js 애플리케이션 개발을 위한 Claude 스킬(Skill)

**URL:** <https://discuss.pytorch.kr/t/webgpu-claude-skill-tsl-webgpu-three-js-claude-skill/8822>\
**Category:** 읽을거리&정보공유\
**Tags:** claude-skills, three-js, webgpu-three-js-tsl-skill, three-js-shading-language, web-3d, webgpu, opengl-shading-language, typescript\
**Created:** [1월 26, 2026, 9:30오전 UTC](https://discuss.pytorch.kr/t/webgpu-claude-skill-tsl-webgpu-three-js-claude-skill/8822 "2026-01-26T09:30:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![9bow](https://discuss.pytorch.kr/user_avatar/discuss.pytorch.kr/9bow/32/16301_2.png) [@9bow](https://discuss.pytorch.kr/u/9bow)\
**Post date:** [1월 26, 2026, 9:30오전 UTC](https://discuss.pytorch.kr/t/webgpu-claude-skill-tsl-webgpu-three-js-claude-skill/8822/1 "2026-01-26T09:30:57Z")

</div>

![WebGPU Claude Skill: TSL을 사용하여 WebGPU 기반 Three.js 애플리케이션 개발을 위한 Claude 스킬(Skill)](https://discuss.pytorch.kr/uploads/default/original/2X/2/29112d22e1b8c286c85a418ff76005dc355688b2.png)

## WebGPU Three.js TSL Skill 소개

**WebGPU Three.js TSL Skill** 은 Anthropic의 Claude가 **Three.js** 및 **WebGPU** , 그리고 **TSL(Three.js Shading Language)** 을 사용하여 고성능 3D 애플리케이션을 개발할 수 있도록 돕는 전문적인 **에이전트 스킬(Agent Skill)** 입니다. 이 프로젝트는 Claude에게 WebGPU 렌더러 설정, 노드 기반 머티리얼(Material) 생성, 컴퓨트 셰이더(Compute Shader) 작성법 등 최신 그래픽스 기술에 대한 포괄적인 지식과 예제 코드를 제공합니다.

웹 브라우저 기반 3D 그래픽스의 표준이 **WebGL** 에서 **WebGPU** 로 전환되고 있습니다. WebGPU는 최신 GPU 하드웨어의 성능을 최대한 활용할 수 있게 해주지만, 기존 WebGL과는 아키텍처가 근본적으로 다르고 진입 장벽이 높습니다. 특히 **Three.js** 는 WebGPU를 지원하기 위해 문자열 기반의 셰이더(GLSL, OpenGL Shading Language) 대신 함수형 프로그래밍 스타일의 [**TSL(Three.js Shading Language)**](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language) 을 도입했습니다.

하지만, 최신 기술 특성상 대규모 언어 모델(LLM)이 학습한 데이터가 부족하여, Claude조차도 정확한 TSL 문법이나 최적화된 WebGPU 코드를 작성하는 데 어려움을 겪을 수 있습니다. 이 스킬(Skill)은 이러한 지식 격차를 해소하기 위해 정확한 문서, 템플릿, 예제 코드를 Claude에게 제공하는 참고서 역할을 합니다.

### Three.js: Web Browser에서 3D 그래픽을 구현하는 Javascript Library

**Three.js** 는 별도의 플러그인 없이 웹 브라우저에서 3D 그래픽을 생성하고 표현하기 위해 만들어진 경량화된 자바스크립트 라이브러리입니다. Ricardo Cabello(mrdoob)에 의해 시작된 이 프로젝트는 복잡하고 난해한 WebGL API를 개발자가 직관적으로 이해할 수 있는 객체 지향적 구조로 추상화하여 제공합니다. 순수 WebGL을 사용하여 간단한 큐브 하나를 회전시키기 위해서는 수백 줄의 초기화 코드와 셰이더(Shader) 작성이 필요하지만, Three.js를 사용하면 단 몇 줄의 자바스크립트 코드만으로 동일한 결과를 만들어낼 수 있습니다. 이러한 편의성 덕분에 Three.js는 웹 기반 3D 시각화, 게임, 인터랙티브 아트 분야에서 독보적인 위치를 차지하고 있습니다.

이 라이브러리의 핵심 철학은 복잡성을 감추고 접근성을 높이는 것입니다. 개발자는 장면(Scene), 카메라(Camera), 렌더러(Renderer)라는 직관적인 개념을 통해 3D 공간을 구성합니다. 지오메트리(Geometry), 재질(Material), 조명(Light), 그림자(Shadow) 등 3D 그래픽의 필수 요소들이 이미 모듈화되어 있어, 개발자는 수학적 계산이나 GPU 메모리 관리에 신경 쓰지 않고 콘텐츠 자체에 집중할 수 있습니다. 또한, GLTF, OBJ와 같은 다양한 3D 모델 형식을 손쉽게 불러올 수 있는 로더(Loader)를 제공하여 Blender나 Maya와 같은 외부 툴과의 워크플로우도 매끄럽게 지원합니다.

최근 Three.js는 WebGL을 넘어 **WebGPU** 생태계로의 전환을 강력하게 추진하고 있습니다. 현재 개발 중인 `WebGPURenderer`는 기존 WebGL 렌더러의 한계를 극복하고, 최신 그래픽 API의 이점을 활용하여 더 많은 객체를 더 적은 오버헤드로 처리할 수 있도록 설계되었습니다. 특히 주목할 점은, 개발자가 복잡한 WGSL(WebGPU Shading Language)을 직접 작성하지 않고도 WebGPU의 성능을 활용할 수 있도록 [**TSL (Three.js Shading Language)**](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language) 이라는 자체적인 셰이더 노드 시스템을 구축하고 있다는 것입니다. 이는 앞서 소개한 'WebGPU Claude Skill'이 로우 레벨 코드를 직접 생성하는 방식이라면, Three.js는 이를 라이브러리 레벨에서

## 기존 WebGL/GLSL 방식과 비교

WebGPU Three.js TSL Skill이 다루는 **WebGPU + TSL** 방식은 기존 **WebGL** 개발 방식과 큰 차이가 있습니다. 기존에 사용하던 **WebGL + GLSL 방식** 은 JavaScript 코드 내에 GLSL(OpenGL Shading Language, C언어 스타일의 셰이딩 언어) 코드를 문자열(String) 형태로 작성해야 했습니다. 이 방식은 문제가 생겼을 때 디버깅이 어렵고, JavaScript 변수와의 연동이 복잡하며, 런타임 오류를 잡기 힘든 구조였습니다.

하지만 Three.js가 지원하는 **새로운 방식(WebGPU + TSL)** 은 **TSL(Three.js Shading Language)** 을 사용합니다. 이는 JavaScript/TypeScript 함수처럼 작동하므로, 코드 자동 완성, 타입 체크, 모듈화가 가능합니다. 이 스킬은 Claude가 바로 이 '함수형 셰이더 구성'을 완벽하게 수행하도록 돕습니다.

## WebGPU Three.js TSL Skill의 주요 기능

WebGPU Three.js TSL Skill 프로젝트는 단순한 코드 조각 모음이 아니라, Claude가 개발자처럼 문서를 참고하고 코드를 작성할 수 있도록 구조화된 지식 베이스를 제공합니다. 즉, 이 스킬을 설치하면 Claude는 다음 영역들에 대해 전문가 수준의 코딩 능력을 갖추게 됩니다:

### 핵심 개념 (Core Concepts)

- **타입 및 생성자:** `float`, `vec2`, `vec3`, `vec4`, `color`, `uniform`
- **벡터 스위즐링 (Vector swizzling)**
- **연산자 및 수학 함수**
- **제어 흐름:** `If`, `Loop`, `Fn`
- **시간 및 애니메이션**

### 머티리얼 (Materials)

- **모든 노드 머티리얼 타입(All node material types)**
- **머티리얼 속성:** 색상(color), 거칠기(roughness), 금속성(metalness) 등
- **물리 기반 머티리얼 기능:** 클리어코트(clearcoat), 투과(transmission), 이리데센스(iridescence)
- **버텍스 변위 (Vertex displacement)**

### 컴퓨트 셰이더 (Compute Shaders)

- **인스턴스 배열 버퍼 (Instanced array buffers)**
- **병렬 물리 시뮬레이션**
- **파티클 시스템**
- **아토믹(Atomic) 연산 및 장벽(Barriers)**

### 포스트 프로세싱 (Post-Processing)

- **내장 효과:** 블룸(bloom), 블러(blur), FXAA, 피사계 심도(DOF)
- **`Fn()`을 이용한 커스텀 효과**
- **효과 체이닝 (Effect chaining)**
- **다중 렌더 타겟 (Multiple render targets)**

### WGSL 통합 (WGSL Integration)

- **`wgslFn()`을 이용한 커스텀 WGSL 함수**
- **TSL/WGSL 하이브리드 접근법**
- **성능 최적화**

## 디렉토리 구조 및 리소스

스킬은 체계적인 문서(`docs/`)와 예제(`examples/`), 템플릿(`templates/`)으로 구성되어 있어 Claude가 상황에 맞는 정확한 코드를 인용할 수 있습니다.

- `SKILL.md`: 스킬의 진입점 및 개요.
- `REFERENCE.md`: 빠른 참조를 위한 치트시트.
- `examples/`: `basic-setup.js`(기본 설정), `particle-system.js`(GPU 파티클), `earth-shader.js`(대기 효과가 포함된 지구) 등 실행 가능한 예제 파일.
- `templates/`: `webgpu-project.js` 등 새 프로젝트 시작을 위한 보일러플레이트 코드.

## WebGPU Three.js TSL Skill 설치 및 사용 예시

이 스킬은 **Claude Code** 에서 `/skill` 명령을 사용하여 설치 후 사용할 수 있습니다. 터미널에서 Claude Code를 실행한 뒤, 다음 명령어를 실행하여 스킬을 설치합니다:

```bash
/skill install webgpu-threejs-tsl@dgreenheck/webgpu-claude-skill

```

또는, WebGPU Three.js TSL Skill GitHub 저장소를 복제(clone)한 뒤, `skills/webgpu-threejs-tsl` 폴더를 Claude의 스킬 디렉토리로 복사하여 설치할 수 있습니다. 이 때, 설치 범위(Scope)에 따라 어떠한 곳에 복사할지 정하여 설치하면 됩니다:

- **전역 설치:** `~/.claude/skills/`
- **프로젝트별 설치:** `<project_root>/.claude/skills/`

### TSL 코드 작성 예시

설치가 완료된 뒤에는 Claude에서 "_WebGPU로 파티클 효과 만들어줘_"와 같은 요청을 하면 이 스킬이 발동됩니다. 이 스킬이 발동되면 다음과 같이 최신 문법의 TSL 코드를 작성합니다. 문자열로 셰이더를 짜는 것이 아니라, 객체와 함수로 셰이더를 조립하는 방식입니다:

```javascript
import * as THREE from 'three/webgpu';
import { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';

// WebGPU 렌더러 초기화
const renderer = new THREE.WebGPURenderer();
await renderer.init();

// TSL을 사용한 커스텀 머티리얼 정의
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0x0066ff); // 기본 색상

// 프레넬(Fresnel) 효과와 시간 기반 애니메이션 결합
material.emissiveNode = Fn(() => {
    const viewDir = cameraPosition.sub(positionWorld).normalize();
    // 시야각에 따른 프레넬 효과 계산
    const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);
    
    // 청록색에 프레넬 강도와 사인파 애니메이션을 곱함
    return color(0x00ffff).mul(fresnel).mul(oscSine(time));
})();

```

## :github: WebGPU Three.js TSL Skill 프로젝트 GitHub 저장소

> **[GitHub - dgreenheck/webgpu-claude-skill: A Claude skill for developing WebGPU applications...](https://github.com/dgreenheck/webgpu-claude-skill)**
>
> A Claude skill for developing WebGPU applications with Three.js

## 더 읽어보기

- [[Deep Research] WebGPU 개념 이해 및 실습 등을 포함한 학습 자료](https://discuss.pytorch.kr/t/deep-research-webgpu/6184)

- [Greed.js: WebGPU 가속을 지원하는 브라우저 기반 PyTorch 실행 엔진](https://discuss.pytorch.kr/t/greed-js-webgpu-pytorch/8534)

- [On-Device Browser Agent: Chrome Browser에서 직접 실행되는 로컬 AI 에이전트용 확장(Extension) (feat. RunAnywhere AI)](https://discuss.pytorch.kr/t/on-device-browser-agent-chrome-browser-ai-extension-feat-runanywhere-ai/8809)

- [[GN] Web LLM - Llama2 7B/13B 지원 시작](https://discuss.pytorch.kr/t/gn-web-llm-llama2-7b-13b/2374)

- [[GN] Web Stable Diffusion - 웹 브라우저에서 SD 실행하기](https://discuss.pytorch.kr/t/gn-web-stable-diffusion-sd/1196)

* * *

_이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다._ 🤗

[:pytorch:파이토치 한국 사용자 모임🇰🇷](https://pytorch.kr/)이 정리한 이 글이 유용하셨나요? [회원으로 가입](https://discuss.pytorch.kr/signup)하시면 주요 글들을 이메일💌로 보내드립니다! (기본은 Weekly지만 [Daily로 변경도 가능](https://discuss.pytorch.kr/my/preferences/emails)합니다.)

🎁 아래↘쪽에 좋아요👍를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 🤩