WebGPU의 새로운 기능 (Chrome 131)

François Beaufort
François Beaufort

WGSL의 클립 거리

클립 거리를 사용하면 정점 단계의 출력에서 사용자 정의 절반 공간으로 원시 객체의 클립 볼륨을 제한할 수 있습니다. 자체 클리핑 평면을 정의하면 WebGPU 장면에서 표시되는 항목을 더 세부적으로 제어할 수 있습니다. 이 기법은 시각화를 정확하게 제어하는 것이 중요한 CAD 소프트웨어와 같은 애플리케이션에 특히 유용합니다.

GPUAdapter에서 "clip-distances" 기능을 사용할 수 있는 경우 이 기능이 있는 GPUDevice를 요청하여 WGSL에서 클립 거리 지원을 가져오고 enable clip_distances;를 사용하여 WGSL 코드에서 이 확장 프로그램을 명시적으로 사용 설정합니다. 사용 설정하면 정점 셰이더에서 clip_distances 내장 배열을 사용할 수 있습니다. 이 배열은 사용자 정의 클립 영역까지의 거리를 유지합니다.

  • 클립 거리가 0이면 정점이 평면에 있음을 의미합니다.
  • 거리가 양수이면 정점이 클립 절반 공간 (유지하려는 측면) 내에 있음을 의미합니다.
  • 거리가 음수이면 정점이 클립 절반 공간 (삭제하려는 면) 외부에 있음을 의미합니다.

다음 스니펫, chromestatus 항목, 문제 358408571을 참고하세요.

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

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

GPUCanvasContext configure()가 구성 사전으로 호출되면 GPUCanvasContext getConfiguration() 메서드를 사용하여 캔버스 컨텍스트 구성을 확인할 수 있습니다. device, format, usage, viewFormats, colorSpace, toneMapping, alphaMode 멤버가 포함되어 있습니다. 이는 입자 (HDR) 샘플과 같이 브라우저에서 HDR 캔버스를 지원하는지 확인하는 등의 작업에 유용합니다. 다음 스니펫, chromestatus 항목, 문제 370109829를 참고하세요.

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

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

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

점 및 선 원시에는 깊이 바이어스가 없어야 합니다.

앞서 발표된 것처럼 이제 WebGPU 사양에서 렌더링 파이프라인의 토폴로지가 선 또는 포인트 유형인 경우 depthBias, depthBiasSlopeScale, depthBiasClamp를 0이 아닌 값으로 설정하면 유효성 검사 오류가 발생합니다. 문제 352567424를 참고하세요.

하위 그룹을 위한 포괄적 스캔 내장 함수

하위 그룹 실험의 일환으로 문제 361330160에서 다음 하위 그룹 기본 제공 함수가 추가되었습니다.

  • subgroupInclusiveAdd(value): 하위 그룹의 모든 활성 호출 value의 포괄적 스캔 합계를 반환합니다.
  • subgroupInclusiveMul(value): 하위 그룹 전체에서 모든 활성 호출 value의 스캔 곱셈값을 반환합니다.

다중 그리기 간접에 관한 실험적 지원

다중 그리기 간접 GPU 기능을 사용하면 단일 GPU 명령어로 여러 그리기 호출을 실행할 수 있습니다. 이는 특히 파티클 시스템, 인스턴스화, 대규모 장면과 같이 많은 수의 객체를 렌더링해야 하는 경우에 유용합니다. drawIndirect()drawIndexedIndirect() GPURenderPassEncoder 메서드는 GPU 버퍼의 특정 영역에서 한 번에 그리기 호출 하나만 실행할 수 있습니다.

이 실험용 기능이 표준화될 때까지 chrome://flags/#enable-unsafe-webgpu에서 '안전하지 않은 WebGPU 지원' 플래그를 사용 설정하여 Chrome에서 사용할 수 있도록 합니다.

GPUAdapter에서 사용할 수 있는 "chromium-experimental-multi-draw-indirect" 비표준 GPU 기능을 사용하여 이 기능이 있는 GPUDevice를 요청합니다. 그런 다음 GPUBufferUsage.INDIRECT 사용으로 GPUBuffer를 만들어 그리기 호출을 저장합니다. 나중에 새 multiDrawIndirect()multiDrawIndexedIndirect() GPURenderPassEncoder 메서드에서 이를 사용하여 렌더링 패스 내에서 그리기 호출을 실행할 수 있습니다. 다음 스니펫과 문제 356461286을 참고하세요.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

셰이더 모듈 컴파일 옵션 엄격한 수학

GPUShaderModuleDescriptor에 불리언 strictMath 개발자 옵션이 추가되어 셰이더 모듈 컴파일 중에 엄격한 수학을 사용 설정하거나 사용 중지할 수 있습니다. 이 기능은 chrome://flags/#enable-webgpu-developer-features의 'WebGPU 개발자 기능' 플래그 뒤에서 사용할 수 있습니다. 즉, 개발 중에만 사용하도록 설계된 기능입니다. 문제 42241455를 참고하세요.

이 옵션은 현재 Metal 및 Direct3D에서 지원됩니다. 엄격한 수학이 사용 중지되면 컴파일러는 다음과 같은 방법으로 셰이더를 최적화할 수 있습니다.

  • NaN 및 무한대 값의 가능성 무시.
  • -0을 +0으로 처리합니다.
  • 나눗셈을 배수의 역수를 사용한 더 빠른 곱셈으로 대체합니다.
  • 연관 특성과 분포 특성을 기준으로 연산 재배열
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

GPUAdapter requestAdapterInfo() 삭제

GPUAdapter requestAdapterInfo() 비동기 메서드는 GPUAdapter info 속성을 사용하여 이미 GPUAdapterInfo를 동기식으로 가져올 수 있으므로 중복됩니다. 따라서 비표준 GPUAdapter requestAdapterInfo() 메서드가 삭제되었습니다. 삭제 인텐트를 참고하세요.

Dawn 업데이트

tint_benchmark 실행 파일은 WGSL에서 각 백엔드 언어로 셰이더를 변환하는 데 드는 비용을 측정합니다. 자세한 내용은 새 문서를 참고하세요.

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

WebGPU의 새로운 기능

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

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