이 페이지는 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()를 사용하여 전체 버퍼의 복사를 간소화할 때 오프셋 및 크기 매개변수를 생략할 수 있습니다. Intent to Ship: 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로 앱 빌드 문서를 참고하세요.

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