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

WebGPU의 새로운 기능 (Chrome 137)

François Beaufort

게시일: 2025년 5월 26일

externalTexture 결합에 텍스처 뷰 사용

이제 GPUBindGroup을 만들 때 GPUExternalTexture 결합 대신 호환되는 GPUTextureView (2D, 단일 하위 리소스)를 사용할 수 있습니다.

이렇게 하면 GPUExternalTexture (소스 동영상용)와 GPUTextureView (중간 처리용)를 모두 처리해야 하는 동영상 효과 파이프라인의 셰이더 로직이 간소화됩니다. 또한 텍스처의 출처에 따라 셰이더를 동적으로 컴파일할 필요가 줄어듭니다. Intent to Ship: WebGPU: externalTexture 바인딩을 위한 GPUTextureView를 참고하세요.

const texture = myDevice.createTexture({
  size: [42, 42],
  format: navigator.gpu.getPreferredCanvasFormat(),
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});

const code = `
@group(0) @binding(0) var texture : texture_external;
@group(0) @binding(1) var<storage, read_write> buffer: vec2u;
    
@compute @workgroup_size(1) fn main() {
  buffer = textureDimensions(texture);
}`;

const pipeline = myDevice.createComputePipeline({
  layout: "auto",
  compute: { module: myDevice.createShaderModule({ code }) },
});

const bindGroup = myDevice.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: texture.createView() }, // Use texture view for an externalTexture binding
    { binding: 1, resource: { buffer: myBuffer } },
  ],
});

오프셋과 크기를 지정하지 않고 버퍼 복사

새로운 GPUCommandEncoder 메서드 오버로드를 사용하면 개발자가 copyBufferToBuffer()를 사용하여 전체 버퍼의 복사를 간소화할 때 오프셋 및 크기 매개변수를 생략할 수 있습니다. 출시 인텐트: WebGPU: copyBufferToBuffer 오버로드를 참고하세요.

const size = 42;
const srcBuffer = myDevice.createBuffer({
  size,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
});
const dstBuffer = myDevice.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});

// Copy entire buffer.
myCommandEncoder.copyBufferToBuffer(srcBuffer, dstBuffer);

// This is the same as the following.
// myCommandEncoder.copyBufferToBuffer(srcBuffer, 0, dstBuffer, 0, size);

원자 포인터를 사용하는 WGSL workgroupUniformLoad

개발자 편의를 위해 WGSL에 새 workgroupUniformLoad(ptr) 오버로드가 추가되었습니다. ptr가 가리키는 값을 원자적으로 로드하고 작업 그룹의 모든 호출에 반환합니다. 여기서 ptr는 작업 그룹 변수 내의 원자 포인터입니다. 문제 408241039를 참고하세요.

@group(0) @binding(0) var<storage, read_write> buffer : array<u32, 1>;

var<workgroup> wgvar : atomic<u32>;

@compute @workgroup_size(1, 1)
fn main(@builtin(local_invocation_index) lid: u32) {
  if (lid == 0) {
    atomicStore(&(wgvar), 42u);
  }
  buffer[lid] = workgroupUniformLoad(&wgvar);
}

GPUAdapterInfo powerPreference 속성

이제 사용자가 chrome://flags/#enable-webgpu-developer-features에서 'WebGPU 개발자 기능' 플래그를 사용 설정한 경우 비표준 powerPreference GPUAdapterInfo 문자열 속성을 사용할 수 있습니다. 지원되는 경우 powerPreference 값은 GPURequestAdapterOptions에서 사용된 GPUPowerPreference 값에 따라 "low-power" 또는 "high-performance"일 수 있습니다. CL 6438860을 참고하세요.

function checkPowerPreferenceForGpuDevice(device) {
  const powerPreference = device.adapterInfo.powerPreference;
  if (powerPreference === "high-performance") {
    // High-performance GPU detected. Enabling enhanced graphics settings.
  } else if (powerPreference === "low-power") {
    // Low-power GPU detected. Optimizing for battery life.
  }
}

GPURequestAdapterOptions compatibilityMode 속성 삭제

실험용 GPURequestAdapterOptions compatibilityMode 속성이 삭제되고 Chrome 133에서 추가된 표준화된 featureLevel 속성이 대신 사용됩니다. 문제 366151404를 참고하세요.

Dawn 업데이트

개발자는 webgpu.h를 사용하여 WebAssembly와 특정 플랫폼을 모두 타겟팅하여 C++와 같은 언어로 WebGPU 프로젝트를 빌드할 수 있습니다. Dawn의 새로 출시된 'emdawnwebgpu' ('Emscripten Dawn WebGPU')는 브라우저 API를 통해 최신 표준화된 webgpu.h를 구현합니다.

Emdawnwebgpu는 Emscripten의 (현재는 유지관리되지 않는) 내장 바인딩 (USE_WEBGPU)의 (유지관리되는) 포크입니다. 모든 새로운 개발은 emdawnwebgpu에서 이루어지고 있으며, 개발자가 emdawnwebgpu로 전환함에 따라 Emscripten의 내장 바인딩은 삭제됩니다. Emdawnwebgpu의 C 헤더는 Dawn의 헤더와 매우 유사하지만 내장 바인딩은 상당히 오래되었습니다.

Dawn의 GitHub 출시 페이지에서 emdawnwebgpu를 다운로드하고 패키지의 README.md에서 사용 방법을 알아보세요. 소스 파일은 Dawn 저장소에서 확인할 수 있습니다.

전체 가이드는 업데이트된 WebGPU로 앱 빌드 문서를 참고하세요.

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