큐브와 3D 텍스처, 바이어스와 그레이디언트, TypeShade 예제와 컴파일러가 낸 셰이더 코드

큐브와 3D 텍스처, 바이어스와 그레이디언트

환경 맵은 방향으로 찾는 texture_cube<f32>, 컬러 그레이딩 표는 셰이딩한 색으로 색인하는 texture_3d<f32>입니다. textureSampleBias와 textureSampleGrad를 쓰고, 점광원의 그림자는 광원에서 나가는 방향으로 비교하는 texture_depth_cube입니다.

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의 파일

이 페이지 편집 문제 보고