내장 함수 한 바퀴, TypeShade 예제 소스와 컴파일러가 낸 셰이더 코드를 한 화면에서 봅니다

내장 함수 한 바퀴

reflect, refract, faceForward가 범프에 빛을 주고, transpose와 determinant가 호스트 행렬을 읽으며, 비트 내장 함수(firstLeadingBit, reverseBits, countOneBits, extractBits, insertBits)가 화면에 띠를 만듭니다. 띠가 시작하는 자리는 fwidthCoarse가 표시합니다.

WGSL 최적화

괄호

GLSL ES 3.00 float 정밀도

f64 에뮬레이션

최소화

난독화

O0과 O1에서는 컴파일러가 레벨만 받아 WGSL을 생성하므로, 괄호와 최소화, 숫자 리터럴, 난독화, f64 에뮬레이션은 GLSL 탭에만 적용됩니다. f64 에뮬레이션은 reflect()가 따로 받으므로 모든 레벨에서 리플렉션에 반영됩니다.

이 파일에는 @vertex 진입점이 없어서, 화면 전체를 덮는 삼각형 뒤에 놓고 컴파일합니다. 그 삼각형이 프래그먼트 단계에 0에서 1까지 도는 uv를 넘깁니다. 탭과 캔버스에는 그렇게 만든 프로그램이 나옵니다.

TS

진단컴파일 대기 중

그리는 방식

0.00s

버텍스 진입점과 프래그먼트 진입점이 있는 모듈을 컴파일하면 그려집니다.

셰이더에서 console.log를 부르면 그 줄이 여기에 나옵니다. 컴퓨트 모듈은 모든 인보케이션의 줄을 보여 줍니다. 그리는 모듈은 캔버스의 픽셀을 클릭하거나, WebGPU에서 프레임 전체를 기록하면 됩니다.

편집기에는 이 예제의 파일이 들어 있고, 프로그램은 이 파일과 이 파일이 가져오는 파일로 이루어집니다. 내용을 고치면 브라우저에서 다시 컴파일하고, 편집기 옆의 탭이 따라 바뀝니다.

GitHub의 파일

이 페이지 편집 문제 보고