WebGPU'daki Yenilikler (Chrome{6/}131)

François Beaufort
François Beaufort
GitHub

Mesafeleri WGSL biçiminde kırp

Klip mesafeleri, köşe noktası çıkışında temel öğelerin klip ses düzeyini kullanıcı tanımlı yarım boşluklarla kısıtlamanıza olanak tanır. Kendi kırpma düzlemlerinizi tanımlamak, WebGPU sahnelerinizde nelerin görüneceği konusunda daha fazla kontrol sahibi olmanızı sağlar. Bu teknik, özellikle görselleştirme üzerinde hassas kontrolün önemli olduğu CAD yazılımı gibi uygulamalarda yararlıdır.

"clip-distances" özelliği bir GPUAdapter'da mevcut olduğunda, WGSL'de kırpma mesafesi desteği almak için bu özelliğe sahip bir GPUDevice isteyin ve WGSL kodunuzda enable clip_distances; ile bu uzantıyı açıkça etkinleştirin. Etkinleştirildikten sonra, clip_distances yerleşik dizisini köşe üstü gölgelendiricinizde kullanabilirsiniz. Bu dizi, kullanıcı tanımlı bir klip düzlemine olan mesafeleri tutar:

  • 0 olan kırpma mesafesi, köşenin düzlemde olduğu anlamına gelir.
  • Pozitif mesafe, köşenin klip yarı alanının (tutmak istediğiniz taraf) içinde olduğu anlamına gelir.
  • Negatif mesafe, köşenin kırpma yarı uzayının (atlamak istediğiniz taraf) dışında olduğu anlamına gelir.

Aşağıdaki snippet'e, chromestatus girişi'ne ve 358408571 numaralı soruna bakın.

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() bir yapılandırma sözlüğüyle çağrıldıktan sonra GPUCanvasContext getConfiguration() yöntemi, tuval bağlamı yapılandırmasını kontrol etmenize olanak tanır. Bu grupta device, format, usage, viewFormats, colorSpace, toneMapping ve alphaMode üye yer alıyor. Bu, Parçacıklar (HDR) örneğinde gösterildiği gibi, tarayıcıda HDR kanvası desteği olup olmadığını kontrol etmek gibi görevler için kullanışlıdır. Aşağıdaki snippet'i, chromestatus girişini ve 370109829 numaralı sorunu inceleyin.

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.
}

Nokta ve çizgi temel öğeleri derinlik sapmasına sahip olmamalıdır

Daha önce duyurulduğu gibi, WebGPU spesifikasyonu artık bir oluşturma ardışık düzeninin topolojisi çizgi veya nokta türü olduğunda depthBias, depthBiasSlopeScale ve depthBiasClamp'i sıfır olmayan bir değere ayarlamayı doğrulama hatası olarak kabul ediyor. 352567424 numaralı soruna bakın.

Alt gruplar için dahil edici tarama yerleşik işlevleri

Alt grup denemesi kapsamında, 361330160 numaralı sürüme aşağıdaki alt grup yerleşik işlevleri eklendi:

  • subgroupInclusiveAdd(value): Alt gruptaki tüm etkin çağrıların value'lerinin kapsayıcı tarama toplamını döndürür.
  • subgroupInclusiveMul(value): Alt gruptaki tüm etkin çağrıların value'lerinin kapsayıcı tarama çarpımını döndürür.

Çoklu çizim için deneysel dolaylı destek

Birden fazla çizim için dolaylı GPU özelliği, tek bir GPU komutuyla birden fazla çizim çağrısı göndermenize olanak tanır. Bu özellikle, partikül sistemleri, örnekleme ve büyük sahneler gibi çok sayıda nesnenin oluşturulması gereken durumlarda faydalıdır. drawIndirect() ve drawIndexedIndirect() GPURenderPassEncoder yöntemleri, bir GPU arabelleğinin belirli bir bölgesinden tek seferde yalnızca bir çizim çağrısı yayınlayabilir.

Bu deneysel özellik standartlaştırılana kadar, özelliği Chrome'da kullanılabilir hale getirmek için chrome://flags/#enable-unsafe-webgpu adresindeki "Güvenli Olmayan WebGPU Desteği" işaretini etkinleştirin.

GPUAdapter'da bulunan "chromium-experimental-multi-draw-indirect" standart dışı GPU özelliğiyle bu özelliğe sahip bir GPUDevice isteyin. Ardından, çizim çağrılarını depolamak için GPUBufferUsage.INDIRECT kullanımıyla bir GPUBuffer oluşturun. Daha sonra, yeni multiDrawIndirect() ve multiDrawIndexedIndirect() GPURenderPassEncoder yöntemlerinde bir oluşturma geçişi içinde çizim çağrıları göndermek için kullanabilirsiniz. Aşağıdaki snippet'i ve 356461286 numaralı sorunu inceleyin.

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();

Gölgelendirici modülü derleme seçeneği katı matematik

Gölgelendirici modülü derlemesi sırasında katı hesaplamayı etkinleştirmenize veya devre dışı bırakmanıza olanak tanımak için GPUShaderModuleDescriptor'a bir boole strictMath geliştirici seçeneği eklendi. Bu özellik, chrome://flags/#enable-webgpu-developer-features adresindeki "WebGPU Geliştirici Özellikleri" işaretinin arkasındadır. Bu, özelliğin yalnızca geliştirme sırasında kullanılması amaçlandığı anlamına gelir. 42241455 numaralı sorunu inceleyin.

Bu seçenek şu anda Metal ve Direct3D'de desteklenmektedir. Yüksek düzey matematik devre dışı bırakıldığında derleyici, gölgelendiricilerinizi aşağıdaki yöntemlerle optimize edebilir:

  • NaN ve Infinity değerlerinin olasılığı göz ardı ediliyor.
  • -0 değerinin +0 olarak değerlendirilmesi.
  • Bölme işlemini, ters değerle çarpma işlemiyle değiştirme.
  • İşlemleri ilişkilendirme ve dağıtma özelliklerine göre yeniden düzenleme.
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() yöntemini kaldırın

GPUAdapter info özelliğini kullanarak GPUAdapterInfo'yu zaten senkronize olarak alabildiğiniz için GPUAdapter requestAdapterInfo() asynkron yöntemi gereksizdir. Bu nedenle, standart olmayan GPUAdapter requestAdapterInfo() yöntemi kaldırıldı. Kaldırma niyetini öğrenin.

Şafak güncellemeleri

tint_benchmark yürütülebilir dosyası, gölgelendiricilerin WGSL'den her arka uç diline çevrilmesinin maliyetini ölçer. Bu konu hakkında daha fazla bilgi edinmek için yeni dokümanlara göz atın.

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. Kapsamlı commit listesine göz atın.

WebGPU'daki Yenilikler

WebGPU'daki Yenilikler serisinde ele alınan her şeyin listesi.

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 sürümü

Chrome 113