TypeShade
Playground
TypeShade TypeScript 파일을 작성하고 브라우저에서 컴파일한 뒤, 나온 WGSL과 진단을 확인하십시오.
예제에서 시작하기
타일 하나가 컴파일러 저장소의 .shade.ts 파일 하나입니다. 예제를 열어 고치고 옆에 파일을 더할 수 있으며, 텍스처에는 직접 고른 이미지를 연결할 수 있습니다.
빈 파일
time, resolution, mouse를 읽는 프래그먼트 셰이더입니다.
스테이지와 IO 구조체
-
헬로 삼각형 가장 작은 완전한 TypeShade 프로그램입니다. -
헬로 varying 삼각형을 다시 그리되, 이번에는 버텍스 스테이지에서 프래그먼트 스테이지로 uvvarying을 넘깁니다. 두 스테이지가VsOut클래스 하나를 함께 씁니다. - 미리보기 없음 헬로 버텍스 속성
vertex_index대신 버퍼에서 버텍스 입력을 받습니다. -
위치만 돌려주는 버텍스 가장 작은 렌더 쌍입니다. -
같은 IO 구조체 둘 필드가 똑같은 IO 구조체 둘, 곧 버텍스 출력과 프래그먼트 입력입니다. 객체 리터럴이 어느 쪽을 만드는지는 리터럴이 놓인 세 자리가 각각 정합니다. -
정수 varying과 고를 수 없는 보간 WGSL 방식의 진입점 입출력입니다. - 미리보기 없음 사용자 클립 평면
@builtin("clip_distances")로 사용자 클립 평면 네 개를 둡니다. 래스터라이저가 래스터화하기 전에 읽는 버텍스 출력입니다.
리소스
- 미리보기 없음 헬로 유니폼
declare const scale: uniform<f32>한 줄뿐입니다. - 미리보기 없음 헬로 유니폼 블록 GLSL ES 3.00 형태가 있는 쪽의 유니폼입니다.
- 미리보기 없음 헬로 카메라 유니폼
mat4와vec3를 담은Camera클래스를uniform<Camera>뒤에 두고, 평범한 헬퍼 함수가 읽습니다. - 미리보기 없음 텍스처, 샘플러, 오버라이드 전체 화면 삼각형이
sampler를 거쳐texture_2d<f32>를 샘플링하고,override<f32>특수화 상수 두 개로 색을 입힙니다. - 미리보기 없음 런타임 배열 길이 런타임 크기 스토리지 배열을 도는 커널이라면 반드시 필요한 경계 검사입니다.
- 미리보기 없음 스토리지 텍스처 컴퓨트 진입점이 텍셀 좌표로 직접 쓰는 이미지입니다. 샘플러도 필터링도 없습니다.
- 미리보기 없음 비교로 읽는 그림자 맵
sampler_comparison을 거쳐 깊이 텍스처를textureSampleCompare와textureSampleCompareLevel로 읽습니다. 평범한 2D 그림자 맵과 캐스케이드 배열 양쪽에서 씁니다. - 미리보기 없음 큐브와 3D 텍스처, 바이어스와 그레이디언트 환경 맵은 방향으로 찾는
texture_cube<f32>, 컬러 그레이딩 표는 셰이딩한 색으로 색인하는texture_3d<f32>입니다.textureSampleBias와textureSampleGrad를 쓰고, 점광원의 그림자는 광원에서 나가는 방향으로 비교하는texture_depth_cube입니다. - 미리보기 없음 WGSL에만 있는 텍스처 색상 램프는
texture_1d<f32>, 환경 맵 둘은 레이어로 고르는texture_cube_array<f32>입니다.textureGatherCompare로 퍼센티지 클로저 필터를 손으로 짜고,textureGather로 텍셀 네 개에서 채널 하나를 모으며, 점광원의 그림자는texture_depth_cube_array입니다. - 미리보기 없음 직접 리졸브하는 멀티샘플 텍스처 MSAA 렌더 타깃을
texture_multisampled_2d<f32>로 두고textureLoad(t, coords, sampleIndex)로 샘플을 하나씩 읽어textureNumSamples만큼 평균을 구합니다. 깊이 어태치먼트는texture_depth_multisampled_2d입니다. - 미리보기 없음 목록을 담은 유니폼
array<f32, 4>를 담은uniform입니다. - 미리보기 없음 분기 안의 샘플링과 그것을 허용하는 지시어 WGSL은
textureSample을 균일한 제어 흐름에서만 부르게 합니다.
값과 제어 흐름
-
모듈 상수 컴파일러가 허용하는 모든 스칼라 타입으로 모듈 범위 상수를 하나씩 선언합니다. -
모듈의 벡터 상수와 배열 상수 전체 화면 삼각형을 모듈 범위의 array<vec4, 3>팔레트와array<f32, 3>구간값으로 띠 지어 칠하고, 앞서 선언한 스칼라 상수로 만든vec3상수도 함께 씁니다. -
배열 리터럴 전체 화면 삼각형의 꼭짓점은 array<f32, 3>목록 두 개에서 오고, 색은array<i32, 3>으로 가중한array<vec3, 3>구간값에서 옵니다. -
변환하는 생성자 전체 화면 삼각형의 꼭짓점은 vec2(vec2u(...))에서 오고, 색은f32에서u32로 갔다가 다시f32로 돌아오는 왕복에서 옵니다. - 미리보기 없음 mat4 너머의 행렬
matCxR는 모두 타입입니다. - 미리보기 없음 에뮬레이션 배정밀도 소스로 쓴
f64인터페이스입니다. -
비트 필드 띠 전체 화면 삼각형의 색을 switch로 고릅니다. 띠 번호는&=,|=,<<=,>>=,^=로 만들고,let x: f32는 값을 넣기 전에 먼저 선언하며, varying은{ pos, uv }축약형으로 돌려줍니다. -
블록 스코프 i를 도는 반복문 둘이 이어지고, 반복문 본문의p옆에if분기의p가 있으며, 안쪽p가 바깥쪽을 가립니다. -
구조체와 배열을 고르는 조건식 분기 둘은 구조체, 다른 둘은 고정 길이 배열이고, 실행 중에 고릅니다. -
컷아웃 (소스 언어) 프래그먼트 진입점이 부르는 헬퍼 안에서 discard를 씁니다.fwidth가 테두리를 부드럽게 하고,saturate,exp2,**가 감쇠 곡선을 만듭니다. -
매개변수 기본값 매개변수에 기본값을 둔 헬퍼 셋입니다. 호출마다 생략하는 인자가 다릅니다. - 미리보기 없음 내장 함수 한 바퀴
reflect,refract,faceForward가 범프에 빛을 주고,transpose와determinant가 호스트 행렬을 읽으며, 비트 내장 함수(firstLeadingBit,reverseBits,countOneBits,extractBits,insertBits)가 화면에 띠를 만듭니다. 띠가 시작하는 자리는fwidthCoarse가 표시합니다. -
불 벡터 벡터 둘을 비교하면 결과는 불 벡터입니다. - 미리보기 없음 정수 abs와 dot 레지스트리가 이식 가능하다고 했지만 실제로는 그렇지 않았던 내장 함수 둘입니다.
-
패킹, bitcast, 생성자 WGSL에는 있지만 이 표면에 없던 이식 가능한 내장 함수들입니다. - 미리보기 없음 패킹된 4x8 정수 내장 함수
u32하나를 바이트 네 개로 읽거나 네 개를 다시 써 넣는 내장 함수 여덟 개입니다. -
주변 변수를 읽고 쓰는 로컬 함수 ring은 TypeScript 클로저처럼 프래그먼트 진입점의p와width를 읽고 그glow에 더합니다. -
함수를 받는 함수 cover와around4는 거리 필드를 함수f: Field로 받고, 제네릭 함수가 타입 인자 조합마다 한 번 컴파일되듯 호출이 넘기는 함수마다 한 번씩 컴파일됩니다(규칙 8.18). -
본문이 정하는 반환 타입 반환 타입을 적은 함수가 하나도 없고, TypeScript가 추론하듯 저마다 본문이 돌려주는 것을 돌려줍니다(규칙 8.19). -
배열의 메서드 array<Light, 3>에 든 조명 세 개를 TypeScript 작성자가 먼저 떠올리는 배열 메서드로 비춥니다. 호출마다 배열 타입과 넘긴 함수에 맞춘 카운트 루프가 만들어집니다(규칙 8.18, 표면 문서 §63). - 미리보기 없음 데이터를 도는 루프 데이터를 다루는 프로그램이 쓰는 세 가지 루프를 Tint와 실제 WebGL2 컨텍스트로 확인합니다.
- 미리보기 없음 경로 추적기 평범한 TypeScript로 쓴 작은 경로 추적기입니다.
클래스와 제네릭
-
클래스 메서드 생성자와 메서드 하나, 정적 함수 하나를 둔 class Ray, 그리고hit(ray)메서드가 광선을 따라간 거리를 돌려주는class Sphere입니다. -
자기 객체를 바꾸는 메서드 class Body의step,turn,advance가this에 값을 넣으므로, 각 메서드는 자기 객체를 참조로 받습니다. - 미리보기 없음 객체를 바꾸는 메서드들
class Particle의step,bounce,tick이this에 값을 넣고, 스토리지 요소 위에서 호출됩니다. -
상속 구체 메서드 하나와 추상 메서드 하나를 둔 abstract class Shape, 이를 상속한 클래스 둘, 그리고 그 하위 클래스를 다시 상속해super를 부르는 클래스 하나입니다. -
믹스인 패턴 본문이 return class extends Base { ... }하나뿐인function Tinted(Base)를 서로 다른 도형 클래스 둘에 적용합니다. -
단형화로 만드는 제네릭 제네릭 헬퍼 셋입니다. 파일이 부를 때 쓴 인자 타입 조합마다 한 번씩 컴파일됩니다. -
단형화로 만드는 제네릭 클래스 f32와 vec3에 쓴 class Slot<T>입니다. 모듈에는Slot_f32와Slot_vec3가 서로 다른 구조체로 들어가고, 저마다 생성자와 모든 메서드의 복사본을 따로 갖습니다. -
튜플과 브랜드 별칭 튜플은 타입이 길이를 정해 둔 목록이고 array<T, N>이 바로 그것이므로,[f32, f32]는 곧array<f32, 2>입니다. -
게터, 세터, 비공개 이름, 매개변수 프로퍼티 TypeScript 클래스를 쓰는 방식 그대로 작성한 class Ring입니다. -
나메크의 캡슐 코퍼레이션 우주선 드래곤볼 Z의 캡슐 코퍼레이션 우주선을 나메크에 놓은 장면입니다. 우주선, 착륙 장치, 나무, 지형, 글자, 재질, 셀 셰이딩과 카메라를 공유 SDF 장면을 중심으로 TypeShade 클래스로 구성합니다. -
자기 객체를 바꾸고 값을 돌려주는 메서드 next()가 생성기의 상태를 앞으로 옮기고 뽑은 값을 돌려주는class Rng입니다. -
빌더 체인, 접근자의 super, 서브클래스가 물려받는 정적 멤버 모든 return이return this인 메서드는 자기 객체를 돌려주므로a.at(p).tinted(c)는 호출을 차례로a에서 실행하고,new Disc().at(p).sized(r)는new가 만든 값을 임시 변수에 담습니다(규칙 8.10). -
객체 안의 객체, 객체를 담은 const, 함수를 담은 필드, 계약으로서의 인터페이스 ring.advance(dt)는 자신이 담은Mover의step을 불러 고리를 옮깁니다. 그래서step이 어느 클래스의 것이든advance는 자기 객체를 바꾸고 참조로 받습니다(규칙 8.10). - 미리보기 없음 클래스 기반 3D SDF 레이 트레이서 추상 SDF 도형 클래스와 상속으로 만든 3D 레이 트레이서입니다. 구체, 상자, 토러스, 평면을 구면 추적으로 렌더링합니다.
가져오기
여러 패스
모듈 상태와 컴퓨트
-
인보케이션별 상태 최상위의 평범한 let seed: u32는 WGSL의var<private>입니다. 인보케이션마다 복사본이 하나씩 있고, 그 인보케이션의 모든 함수가 함께 씁니다. - 미리보기 없음 워크그룹 스크래치 메모리
let tile: workgroup<array<f32, 64>>는 WGSL의var<workgroup>입니다. 워크그룹마다 복사본이 하나씩 있어 그 안의 인보케이션들이 함께 쓰며, 여기서는 인보케이션이 한 칸씩 차지하는 스크래치로 씁니다. 원자적 값의 워크그룹 배열과 인보케이션별 카운터도 함께 둡니다. - 미리보기 없음 워크그룹 리덕션 인보케이션 64개가 값 64개를 워크그룹 메모리로 하나에 모읍니다.
workgroupBarrier()가 라운드 순서를 잡습니다. - 미리보기 없음 원자적 히스토그램 여러 인보케이션이
atomicAdd(bins[bin], 1)로 같은 칸에 동시에 값을 더합니다. 한 번의 호출은 쪼갤 수 없는 한 걸음이고, 스토리지 구조체의 필드와storage<atomic<u32>>선언이 위치를 적는 나머지 두 가지 모양을 보여 주며, 원자 연산이 돌려주는 값은 더하기 전에 들어 있던 값입니다. - 미리보기 없음 GPU에서 온 콘솔 출력 컴퓨트 커널 안에서
console.log("i =", gid.x, p)를 부릅니다. 문자열 리터럴은 라벨이 되고, 크기가 정해진 값은 무엇이든 인자로 넘길 수 있습니다. - 미리보기 없음 비교 후 교환, 유니폼 로드, 텍스처 배리어 WGSL에는 있지만 이 표면에 없던 동기화 내장 함수 세 개입니다.
- 미리보기 없음 컴퓨트 리덕션 (소스 트윈)
compute-reduction.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 이차원 워크그룹
@compute([8, 8])는 WGSL의@workgroup_size(8, 8)입니다.
커널이 되는 루프
소스 트윈
-
hillshade (소스 트윈) hillshade.ts를 소스 언어로 다시 쓴 예제입니다. -
플라스마 (소스 트윈) shadertoy-plasma.ts를 소스 언어로 다시 쓴 예제입니다. -
줄리아 집합 (소스 트윈) julia.ts를 소스 언어로 다시 쓴 예제입니다. -
만델브로 집합 (소스 트윈) mandelbrot.ts를 소스 언어로 다시 쓴 예제입니다. -
도메인 워핑 (소스 트윈) domain-warp.ts를 소스 언어로 다시 쓴 예제입니다. -
터널 (소스 트윈) tunnel.ts를 소스 언어로 다시 쓴 예제입니다. -
바다 수평선 (소스 트윈) ocean.ts를 소스 언어로 다시 쓴 예제입니다. -
별밭 (소스 트윈) starfield.ts를 소스 언어로 다시 쓴 예제입니다. -
만화경 (소스 트윈) kaleidoscope.ts를 소스 언어로 다시 쓴 예제입니다. -
그레이디언트 패스 (소스 트윈) gradient-pass.ts를fn()/module()로 만드는 대신 소스 언어로 다시 쓴 예제입니다. -
보로노이 (소스 트윈) voronoi.ts를 소스 언어로 다시 쓴 예제이며, 이슈 #40을 지키는 게이트입니다. -
fp64 딥 줌 (소스 트윈) fp64-deep-zoom.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 체커 평면 (소스 트윈)
fp64-checker-plane.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 쌍곡선 항법 (소스 트윈)
fp64-loran.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 중심 기준 좌표 (소스 트윈)
fp64-rtc.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 줄리아 집합 (소스 트윈)
fp64-julia.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 버닝 십 (소스 트윈)
fp64-burning-ship.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 뉴턴 프랙탈 (소스 트윈)
fp64-newton.ts를 소스 언어로 다시 쓴 예제입니다. - 미리보기 없음 fp64 거리 추정 (소스 트윈)
fp64-mandelbrot-de.ts를 소스 언어로 다시 쓴 예제입니다. -
fp64 오래 켜 둔 시계 (소스 트윈) fp64-clock.ts를 소스 언어로 다시 쓴 예제입니다. -
fp64 파국적 상쇄 (소스 트윈) fp64-cancellation.ts를 소스 언어로 다시 쓴 예제입니다. -
fp64 사인 스윕 (소스 트윈) fp64-sine-sweep.ts를 소스 언어로 다시 쓴 예제입니다.
VS Code가 열리지 않았다면 TypeShade 확장이 없는 것일 수 있습니다. 설치 방법을 확인하십시오.
진단컴파일 대기 중
버텍스 진입점과 프래그먼트 진입점이 있는 모듈을 컴파일하면 그려집니다.
프래그먼트 진입점을 픽셀마다 한 번씩, GPU 없이 실행합니다.
셰이더에서 console.log를 부르면 그 줄이 여기에 나옵니다. 컴퓨트 모듈은 모든 인보케이션의 줄을 보여 줍니다. 그리는 모듈은 캔버스의 픽셀을 클릭하거나, WebGPU에서 프레임 전체를 기록하면 됩니다.