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) 을 도입했습니다.
하지만, 최신 기술 특성상 대규모 언어 모델(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) 이라는 자체적인 셰이더 노드 시스템을 구축하고 있다는 것입니다. 이는 앞서 소개한 '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를 실행한 뒤, 다음 명령어를 실행하여 스킬을 설치합니다:
/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 코드를 작성합니다. 문자열로 셰이더를 짜는 것이 아니라, 객체와 함수로 셰이더를 조립하는 방식입니다:
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));
})();
WebGPU Three.js TSL Skill 프로젝트 GitHub 저장소
더 읽어보기
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 