이 페이지는 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]에는 적용되지 않습니다.

다음 코드 스니펫은 하이 다이내믹 레인지의 캔버스를 구성하는 방법을 보여줍니다.

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 화면에 표시된 파티클 (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을 바꿉니다.

새벽 업데이트

이제 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;

여기에서는 몇 가지 주요 사항만 다룹니다. 전체 커밋 목록을 확인하세요.