TypeShade

검증 가능한 TypeScript 셰이더 라이브러리

셰이더를 TypeScript로 한 번 쓰면 WebGPU용 WGSL과 WebGL2용 GLSL ES 3.00이 나옵니다. 같은 모듈을 CPU에서 배정밀도로 돌려, 컴파일러가 낸 결과를 그 값과 맞춰 볼 수 있습니다.

출시 전: 0.1.0은 아직 npm에 없습니다. git 서브모듈로 설치합니다

examples/metaballs.ts의 Metaballs. 빌드할 때 그린 화면입니다.

작성한 프래그먼트와 그 WGSL 출력

gradient 예제의 프래그먼트 단계를 쓴 그대로 10줄, 그리고 거기서 나오는 WGSL 진입점입니다. GLSL ES 3.00 단계도 같은 함수에서 나옵니다.

const fsGradient = fn(
  'fs_gradient',
  { vo: VsOut },
  (p) => {
    const t = p.vo.uv.y.add(U.field.mix_bias)
    const rgb = mix(U.field.bottom.rgb, U.field.top.rgb, t)
    return vec4(rgb, f32(1))
  },
  { stage: 'fragment', retAttr: '@location(0)' },
)

@fragment
fn fs_gradient(vo: VsOut) -> @location(0) vec4<f32> {
  return vec4<f32>(mix(u.bottom.rgb, u.top.rgb, (vo.uv.y + u.mix_bias)), 1.0);
}

빠른 시작

소스 하나, 출력 둘

타입이 있는 모듈 하나에서 WebGPU용 WGSL과 WebGL2용 GLSL ES 3.00이 나옵니다. 저장소의 예제 36개 가운데 35개가 파일 하나로 두 출력을 다 냅니다.

CPU 결과와 대조

같은 모듈을 CPU에서 f64로 돌리고, 테스트는 컴파일러의 산술을 그 결과와 맞춰 봅니다. 출력은 푸시할 때마다 Tint에서 컴파일하고 WebGL2에서 링크합니다.

편집기에서 타입 검사

유니폼 필드 이름을 잘못 쓰거나 반환 타입이 틀리면 편집기에서 바로 TypeScript 오류가 납니다. reflect()는 같은 중간 표현에서 바인드 그룹과 std140과 std430 레이아웃을 읽어 옵니다.