TypeShade 언어 가이드

TypeShade를 문법 목록으로 외우기보다, 이미 알고 있는 TypeScript 개념에서 출발해 GPU에서 그 개념이 어떻게 달라지는지 이해하세요. 각 항목은 문법, 의미, 작은 예제, 실제 shader 사용 순서로 읽는 것을 권장합니다.

1. 먼저 use typeshade를 이해하기

"use typeshade"는 단순한 문자열이 아니라 파일의 언어 경계를 선언합니다. 이 파일에서는 TypeScript의 익숙한 작성 표면을 사용하면서도 TypeShade의 타입, resource, stage, builtin 규칙을 적용합니다.

"use typeshade"

파일의 첫 directive를 보면 이 코드가 일반 TypeScript 모듈과 같은 방식으로 해석되지 않는다는 것을 알 수 있습니다.

2. TypeScript 문법은 출발점입니다

변수, 함수, type alias, class, 조건문, 반복문 같은 표면은 TypeScript 개발자에게 익숙합니다. 그러나 shader는 JavaScript 프로그램처럼 실행되지 않습니다. 컴파일러가 GPU 코드로 내릴 수 있는 값과 연산만 TypeShade 프로그램의 의미를 가집니다.

3. GPU 개념은 소스에 드러납니다

TypeShade의 중요한 차이는 GPU 인터페이스를 숨기지 않는다는 점입니다. resource는 declare로, stage는 decorator가 붙은 top-level function으로, builtin 입력은 @builtin(...) parameter로 표현합니다.

declare const camera: uniform<Camera>
declare const pixels: storage<array<f32>, "read_write">

@compute([64, 1, 1])
export function paint(@builtin("global_invocation_id") gid: vec3u) {
  const i = gid.x
  pixels[i] = pixels[i] + camera.pos.x
}

여기서 camera와 pixels는 shader가 생성하지 않습니다. gid 역시 전역 변수로 주입되지 않고 함수 입력으로 선언됩니다.

4. 함수는 값의 흐름을 설명합니다

TypeScript에서 parameter와 return type이 함수의 계약을 설명하듯 TypeShade에서도 함수 시그니처가 값의 흐름을 설명합니다. 여기에 stage와 builtin이라는 shader-specific 의미가 추가됩니다.

function addBias(value: f32): f32 {
  return value + 0.5
}

@compute([64, 1, 1])
export function paint(@builtin("global_invocation_id") gid: vec3u) {
  pixels[gid.x] = addBias(camera.pos.x)
}

addBias는 재사용 가능한 helper이고 paint는 compute entry입니다. 같은 함수 문법을 사용하지만 pipeline에서 맡는 역할은 다릅니다.

5. Resource는 호스트와의 경계입니다

uniform<T>와 storage<T>는 JavaScript 객체가 아니라 호스트가 제공하는 GPU resource입니다. declare는 shader가 그 값을 생성하지 않는다는 사실을 코드에 남깁니다.

declare const camera: uniform<Camera>
declare const source: storage<f32>
declare const pixels: storage<f32, "read_write">

resource는 언제나 const로 선언합니다. 셰이더가 storage 바인딩에 쓸 수 있는지는 그 타입인 storage<T, "read_write">에 적습니다.

6. Entry function은 pipeline의 시작점입니다

@vertex, @fragment, @compute는 함수가 어느 shader stage의 entry인지 선언합니다. builtin은 자동으로 생기는 전역 변수가 아니라 entry parameter로 받아야 합니다.

@vertex
export function vs(@builtin("vertex_index") vid: u32): vec4 {
  return positions[vid]
}

@fragment
export function fs(): vec4 {
  return vec4(1, 0, 0, 1)
}

7. 하나의 shader로 합쳐 보기

아래 코드를 한 줄씩 읽어 보세요. language directive에서 시작해 GPU struct, resource, compute stage, builtin parameter가 하나의 프로그램 계약으로 연결됩니다.

"use typeshade";

class Camera {
  view: mat4;
  pos: vec3;
}

declare const camera: uniform<Camera>;
declare const pixels: storage<array<f32>, "read_write">;

@compute([64, 1, 1])
export function paint(@builtin("global_invocation_id") gid: vec3u) {
  const i = gid.x;
  pixels[i] = pixels[i] + camera.pos.x;
}

8. TypeScript에서 가져온 것과 바뀐 것

즉 TypeShade는 TypeScript 문법을 복제하는 언어가 아니라 TypeScript의 authoring 경험을 GPU 언어의 의미론에 연결하는 언어입니다.

9. 다음에 읽을 자료

TypeShade의 개념을 처음 배울 때는 TypeScript의 타입과 함수 문서를 함께 읽고, JavaScript의 실행 모델을 확인한 뒤 GPU 개념으로 넘어가면 이해가 빠릅니다.

• TypeScript Handbook — Everyday Types
• TypeScript Handbook — Functions
• MDN — JavaScript Guide
• The Book of Shaders

10. 학습 순서

Quick start에서 실행 가능한 첫 파일을 만든 뒤 Types, Functions, Control flow, GPU types, Resources, Shader stages 순서로 확장하세요. Quick start

이 페이지 편집 문제 보고