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

WebGPU의 새로운 기능 (Chrome 131)

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 및 Infinity 값의 가능성을 무시합니다.
-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 info 속성을 사용하여 이미 GPUAdapterInfo를 동기식으로 가져올 수 있으므로 GPUAdapter requestAdapterInfo() 비동기 메서드는 중복됩니다. 따라서 비표준 GPUAdapter requestAdapterInfo() 메서드가 삭제되었습니다. 삭제 인텐트를 참고하세요.

Dawn 업데이트

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

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