WebGPU의 새로운 기능 (Chrome 155~156)

WGSL fragment_depth 확장 프로그램

기하학 집약적 렌더링 패스에서는 초기 Z 최적화가 개발자에게 가장 유용합니다. GPU가 비용이 많이 드는 프래그먼트 셰이더를 실행하기 전에 숨겨진 픽셀을 삭제하도록 하여 성능을 크게 향상합니다. 래스터화된 깊이가 깊이 테스트에 실패하면 GPU는 프래그먼트 셰이더를 완전히 건너뜁니다(셰이더에 다른 부작용이 없는 경우).

하드웨어에서 이를 처리하는 방법을 자세히 알아보려면 MJP의 When Does Early-Z Have to be Disabled?에 관한 훌륭한 글을 참고하세요.

맞춤 깊이 조작은 유용하지만 프래그먼트 셰이더에서 이 작업을 수행하면 숨겨진 비용이 발생합니다. 프래그먼트 셰이더 내에서 @builtin(frag_depth)에 쓰면 일반적으로 드라이버가 전체 그리기 호출에 대해 이러한 초기 Z 최적화를 사용 중지합니다. 이는 드라이버 휴리스틱이 셰이더의 계산된 출력 깊이가 래스터라이저에 의해 보간된 깊이와 일치한다고 보장할 수 없기 때문입니다.

이러한 성능 저하를 해결하기 위해 WGSL 확장 프로그램 fragment_depth를 사용하면 @builtin(frag_depth)에서 less 또는 greater 깊이 모드 이름을 지정하여 작성된 깊이가 보간된 깊이와 어떻게 비교되는지 명시적으로 지정할 수 있으므로 GPU가 초기 Z 최적화를 안전하게 적용할 수 있습니다.

이 언어 확장 프로그램은 navigator.gpu.wgslLanguageFeatures를 사용하여 JavaScript에서 기능을 감지할 수 있습니다. WGSL 셰이더 코드 상단에 requires fragment_depth;를 사용하여 이식 불가능 가능성을 알리려면 requires 지시어를 사용하는 것이 좋습니다. 다음 예시와 출시 의도를 참고하세요.

if (!navigator.gpu.wgslLanguageFeatures.has("fragment_depth")) {
  throw new Error(`WGSL fragment depth is not available`);
}

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const shaderModule = device.createShaderModule({ code: `
  requires fragment_depth;

  @fragment
  fn main() -> @builtin(frag_depth, less) f32 {
    // Explicitly states that the output fragment depth is less than early-Z depth,
    // allowing the GPU to safely preserve early-Z optimizations.
    return 0.0f;
  }`,
});

텍스처 압축이 정렬되지 않음

'texture-compression-unaligned' GPU 기능을 사용하면 블록 크기의 정수 배수가 아닌 크기 (예: BC, ETC2, ASTC 형식의 경우 4x4)로 압축된 텍스처를 만들 수 있습니다. 이전에는 WebGPU에서 텍스처 크기가 이러한 블록 경계와 일치해야 했습니다. 이 기능은 블록 정렬에 맞게 텍스처를 패딩하거나 확장할 필요가 없으므로 확장 왜곡 없이 원래 압축 충실도를 유지합니다. 출시 의도를 참고하세요.

다음 코드 스니펫은 어댑터가 정렬되지 않은 텍스처 압축을 지원하는지 확인하고, 지원되는 경우 이를 사용하는 기기를 요청합니다.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("texture-compression-unaligned")) {
  throw new Error("Texture compression unaligned support is not available");
}
// Explicitly request texture compression unaligned support.
const device = await adapter.requestDevice({
  requiredFeatures: ["texture-compression-unaligned"],
});

이 기능, 사양, CTS 작업을 주도한 spark.js의 외부 참여자 Ignacio Castaño에게 감사의 말씀을 전합니다.

srgb-linear 및 display-p3-linear 색공간

'srgb-linear' 및 'display-p3-linear' 사전 정의된 색상 공간이 추가되어 이제 WebGPU 캔버스 컨텍스트가 확장 범위 선형 색상 공간으로 직접 렌더링하여 넓은 색 영역 디스플레이를 지원할 수 있습니다. 이러한 색상 공간은 픽셀 값과 물리적 휘도 간의 선형 관계를 유지합니다. 따라서 게임의 물리적 조명 렌더링은 물론 앤티앨리어싱, 보간, 데시메이션과 같은 공간 처리 작업에 적합합니다. 출시 의도 및 Particles (HDR) 샘플 PR #574를 참고하세요.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  colorSpace: "display-p3-linear",
});

snorm10-10-10-2 정점 형식 추가

'snorm10-10-10-2' 정점 형식은 4개의 부호 있는 정규화된 값(3개의 10비트 구성요소(r, g, b)와 1개의 2비트 구성요소(a))을 보유하는 패킹된 32비트 형식입니다. 이 형식을 사용하면 추가 2비트 스칼라가 있는 3D 법선 벡터 또는 정렬 플래그와 같은 속성을 효율적으로 저장하면서 메모리 대역폭을 절약할 수 있습니다. 사양 PR 6491을 참고하세요.

NVIDIA용 Linux에서 f16 지원

WGSL에서 16비트 부동 소수점 값을 지원하는 선택적 'shader-f16' 기능이 이제 최신 NVIDIA GPU 드라이버의 Linux에서 지원됩니다. 문제 chromium:42251215를 참고하세요.

Dawn 업데이트

이제 WGPUAdapterPropertiesD3D 구조체를 사용하여 특정 GPU 어댑터의 기본 DXGIAdapter의 LUID를 쿼리할 수 있습니다. 문제 chromium:562849566을 참고하세요.

주요 사항을 몇 가지 살펴보겠습니다. 전체 커밋 목록을 확인하세요.

WebGPU의 새로운 기능

WebGPU의 새로운 기능 시리즈에서 다룬 모든 내용의 목록입니다.

Chrome 155~156

Chrome 153~154

Chrome 151~152

Chrome 149~150

Chrome 147~148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113