이 페이지는 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의 포괄적 스캔 곱셈을 반환합니다.

multi-draw indirect 실험 지원

멀티 드로우 간접 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();

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

셰이더 모듈 컴파일 중에 엄격한 수학을 사용 설정하거나 사용 중지할 수 있도록 불리언 strictMath 개발자 옵션이 GPUShaderModuleDescriptor에 추가되었습니다. 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에서 각 백엔드 언어로 셰이더를 변환하는 비용을 측정합니다. 자세한 내용은 새로운 문서를 참고하세요.

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