TypeScript와 WebGPU 개념 연결

TypeShade는 TypeScript 개발 경험에서 출발해 GPU 전용 의미론을 더합니다. 이미 아는 개념을 셰이더를 작성하는 데 필요한 개념으로 연결해 봅니다.

TypeScript 파일에서 시작합니다

"use typeshade";

@vertex
export function main(): vec4 {
  return vec4(0., 0., 0., 1.);
}

"use typeshade"는 파일을 TypeShade 소스로 표시합니다. 그 파일과 그 파일이 가져오는 TypeShade 파일은 한 프로그램으로 컴파일됩니다. 함수, 매개변수, 반환 타입, 객체, import와 export처럼 익숙한 TypeScript 형태는 그대로 이어집니다.

머릿속 모델

TypeScript 타입

타입 주석은 값의 형태를 설명하고 잘못된 프로그램을 도구가 발견하도록 합니다.

TypeShade 추가 사항 f32, u32, vec2, vec3, vec4 같은 GPU 값 타입과 셰이더 연산 규칙입니다.

함수

함수는 매개변수, 반환 타입, 본문을 가집니다.

TypeShade 추가 사항 @vertex, @fragment 같은 스테이지 데코레이터로 진입점을 표시합니다.

모듈

import와 export로 한 프로그램을 이루는 파일끼리 코드를 나눠 씁니다.

TypeShade 추가 사항 셰이더 파일은 상대 경로로 서로를 가져오고 한 프로그램으로 컴파일됩니다. 컴파일러는 진입점이 닿는 코드만 GPU 코드로 내립니다.

Web API

디바이스, 파이프라인, 버퍼와 렌더링은 호스트 애플리케이션이 소유합니다.

TypeShade 추가 사항 호스트가 직접 쓰는 WebGPU나 WebGL2 코드에 셰이더 소스와 리플렉션 메타데이터를 제공합니다. 호스트가 Vite 플러그인으로 가져오는 모듈에는 런타임이 함께 들어 있고, 호출에 필요한 디바이스와 파이프라인은 이 런타임이 만듭니다.

WebGPU는 어디에 있나요?

TypeShade를 브라우저 그래픽 API 위에 놓인 작성·컴파일 계층으로 생각하면 됩니다. TypeShade가 셰이더 코드를 만들면, 애플리케이션은 GPUDevice를 만들고 파이프라인을 구성하고 리소스를 바인딩하고 작업을 제출합니다. 애플리케이션이 Vite 플러그인으로 가져오는 모듈은 이 단계를 자신이 내보내는 호출 안에서 처리합니다.

이 순서로 배우세요

타입, 함수, 모듈 등 TypeScript의 형태를 익힙니다.
"use typeshade"를 추가하고 GPU 타입을 익힙니다.
진입점 데코레이터와 리소스 선언을 추가합니다.
Playground에서 편집하면서 진단과 생성된 WGSL을 확인합니다.
마지막으로 컴파일러와 백엔드 내부로 들어갑니다.

이 페이지 편집 문제 보고