이 페이지는 Cloud Translation API를 통해 번역되었습니다.

WebGPU의 새로운 기능(Chrome 129)

François Beaufort

캔버스 톤 매핑 모드의 HDR 지원

웹 개발자는 HDR 콘텐츠를 전송할 수 있는 옵션이 제한되어 있으며 주로 <img> 및 <video> 요소를 사용합니다. 하지만 <canvas> 요소는 SDR로 제한됩니다. 캔버스 내에서 동적 HDR 콘텐츠를 생성하려면 콘텐츠를 HDR 이미지로 인코딩한 후 표시해야 합니다 (예: 이 데모 참고).

이제 WebGPU 캔버스 구성의 새 GPUCanvasToneMappingMode 매개변수를 통해 WebGPU가 흰색 (#FFFFFF)보다 밝은 색상을 그릴 수 있습니다. 다음 모드를 통해 그립니다.

"standard": 기본 동작은 콘텐츠를 화면의 SDR 범위로 제한합니다. 이 모드는 화면의 색상 공간에 있는 모든 색상 값을 [0, 1] 간격으로 제한하여 실행됩니다.
"extended": 화면의 전체 HDR 범위를 사용 설정합니다. 이 모드는 화면의 [0, 1] 범위에서 "standard"와 일치합니다. 클램핑 또는 프로젝션은 화면의 확장된 다이나믹 레인지에 적용되지만 [0, 1]에는 적용되지 않습니다.

다음 코드 스니펫은 HDR용 캔버스를 구성하는 방법을 보여줍니다.

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",
  toneMapping: { mode: "extended" },
});

입자 (HDR) 샘플 및 WebGPU HDR 예시를 확인하여 WebGPU로 HDR을 살펴보고 chromestatus 항목을 참고하세요.

선명한 이미지가 표시된 HDR 화면이 있는 노트북 — HDR 화면에 표시된 Particles (HDR) 샘플입니다.

하위 그룹 지원 확대

하위 그룹 실험 발표에 따라 이제 하위 그룹 내장 함수를 컴퓨팅 셰이더와 프래그먼트 셰이더 모두에서 사용할 수 있습니다. 더 이상 컴퓨팅 셰이더로만 제한되지 않습니다. 문제 354738715를 참고하세요.

subgroup_size 내장 값은 현재 프래그먼트 셰이더에서 버그가 있습니다. 지금은 피하세요.

또한 다음 하위 그룹 내장 함수가 추가되었습니다.

subgroupAdd(value): 하위 그룹의 모든 활성 호출 value의 합계를 반환합니다.
subgroupExclusiveAdd(value): 하위 그룹의 모든 활성 호출 value의 제외 스캔 합계를 반환합니다.
subgroupMul(value): 하위 그룹의 모든 활성 호출 value의 곱을 반환합니다.
subgroupExclusiveMul(value): 하위 그룹의 모든 활성 호출 value의 배타적 스캔 곱셈을 반환합니다.
subgroupAnd(value): 하위 그룹의 모든 활성 호출 value의 바이너리 AND를 반환합니다.
subgroupOr(value): 하위 그룹의 모든 활성 호출 value의 바이너리 OR을 반환합니다.
subgroupXor(value): 하위 그룹의 모든 활성 호출 value의 바이너리 XOR을 반환합니다.
subgroupMin(value): 하위 그룹의 모든 활성 호출 value의 최솟값을 반환합니다.
subgroupMax(value): 하위 그룹의 모든 활성 호출 value의 최대 값을 반환합니다.
subgroupAll(value): 하위 그룹의 모든 활성 호출에 대해 value이 true이면 true를 반환합니다.
subgroupAny(value): 하위 그룹의 활성 호출에 대해 value이 true이면 true를 반환합니다.
subgroupElect(): 이 호출이 하위 그룹의 활성 호출 중 subgroup_invocation_id가 가장 낮은 경우 true를 반환합니다.
subgroupBroadcastFirst(value): 하위 그룹에서 subgroup_invocation_id가 가장 낮은 활성 호출에서 다른 모든 활성 호출로 value를 브로드캐스트합니다.
subgroupShuffle(value, id): subgroup_invocation_id이 id와 일치하는 활성 호출에서 value을 반환합니다.
subgroupShuffleXor(value, mask): subgroup_invocation_id이 subgroup_invocation_id ^ mask와 일치하는 활성 호출에서 value를 반환합니다. mask는 동적으로 균일해야 합니다.
subgroupShuffleUp(value, delta): subgroup_invocation_id이 subgroup_invocation_id - delta와 일치하는 활성 호출에서 value를 반환합니다.
subgroupShuffleDown(value, delta): subgroup_invocation_id이 subgroup_invocation_id + delta와 일치하는 활성 호출에서 value를 반환합니다.
quadBroadcast(value, id): ID가 id인 쿼드 호출에서 value를 브로드캐스트합니다. id은 상수 표현식이어야 합니다.
quadSwapX(value): X 방향의 쿼드 호출 간에 value를 전환합니다.
quadSwapY(value): Y 방향의 쿼드 호출 간에 value를 전환합니다.
quadSwapDiagonal(value): 대각선으로 쿼드의 호출 간에 value를 전환합니다.

Dawn 업데이트

이제 wgpu::PrimitiveState 구조체에 깊이 클립 제어 설정이 직접 포함되므로 별도의 wgpu::PrimitiveDepthClipControl 구조체가 필요하지 않습니다. 자세한 내용은 다음 코드 스니펫과 webgpu-headers PR을 참고하세요.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

여기에는 주요 내용 중 일부만 다룹니다. 전체 커밋 목록을 확인하세요.