WebGPU'da Yenilikler (Chrome 129)

François Beaufort
François Beaufort
GitHub

Kanvas ton eşleme moduyla HDR desteği

Web geliştiriciler, HDR içerik sunmak için sınırlı seçeneklere sahiptir ve öncelikle <img> ve <video> öğelerini kullanır. Ancak <canvas> öğesi, SDR ile sınırlı kalır. Bir tuvalde dinamik HDR içeriği oluşturmak için içeriğin görüntülenmeden önce HDR görüntüsü olarak kodlanması gerekir (örnek için bu demoya bakın).

WebGPU tuval yapılandırmasındaki yeni GPUCanvasToneMappingMode parametresi, WebGPU'nun artık beyazdan (#FFFFFF) daha parlak renkler çizmesine olanak tanıyor. Bu işlem aşağıdaki modlar aracılığıyla gerçekleştirilir:

  • "standard": Varsayılan davranış, içeriği ekranın SDR aralığıyla kısıtlar. Bu mod, ekranın renk alanındaki tüm renk değerlerinin [0, 1] aralığına sabitlenmesiyle elde edilir.

  • "extended": Ekranın tam HDR aralığını açar. Bu mod, ekranın [0, 1] aralığında "standard" ile eşleşir. Sınırlama veya projeksiyon, ekranın genişletilmiş dinamik aralığına uygulanır ancak [0, 1].

Aşağıdaki kod snippet'inde, yüksek dinamik aralık için tuvalin nasıl yapılandırılacağı gösterilmektedir.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Particles (HDR) örneğini ve WebGPU HDR örneğini inceleyerek WebGPU ile HDR'yi keşfedin ve chromestatus girişine göz atın.

Canlı bir görüntü gösteren HDR ekranlı bir dizüstü bilgisayar.
HDR ekranında gösterilen Parçacıklar (HDR) örneği.

Genişletilmiş alt grup desteği

Alt grup denemeleri duyurusunun ardından, alt grup yerleşik işlevleri artık hem hesaplama gölgelendiricilerinde hem de parça gölgelendiricilerinde kullanılabilir. Artık yalnızca işlem gölgelendiricileriyle sınırlı değildir. 354738715 numaralı soruna bakın.

subgroup_size yerleşik değerinin şu anda parça gölgelendiricilerde hatalı olduğunu unutmayın. Şimdilik bu özelliği kullanmayın.

Ayrıca, aşağıdaki alt grup yerleşik işlevleri eklendi:

  • subgroupAdd(value): Alt gruptaki tüm etkin çağrıların toplamını döndürür value.
  • subgroupExclusiveAdd(value): Alt gruptaki tüm etkin çağrıların value özel tarama toplamını döndürür.
  • subgroupMul(value): Alt gruptaki tüm etkin çağrıların çarpımını value döndürür.
  • subgroupExclusiveMul(value): Alt gruptaki tüm etkin çağrılarda value'nin özel tarama çarpımını döndürür.

  • subgroupAnd(value): Alt gruptaki tüm etkin çağırmaların ikili VE'sini döndürür. value
  • subgroupOr(value): Alt gruptaki tüm etkin çağırmaların ikili VEYA'sını döndürür. value
  • subgroupXor(value): Alt gruptaki tüm etkin çağrıların ikili XOR'unu döndürür.

    value
  • subgroupMin(value): Alt gruptaki tüm etkin çağrımların value en düşük değerini döndürür.
  • subgroupMax(value): Alt gruptaki tüm etkin çağırma işlemlerinin maksimum değerini döndürür. value

  • subgroupAll(value): Alt gruptaki tüm etkin çağırmalar için value doğruysa true değerini döndürür.
  • subgroupAny(value): Alt gruptaki etkin bir çağırma için value doğruysa true değerini döndürür.

  • subgroupElect(): Bu çağrının, alt gruptaki etkin çağrılar arasında en düşük subgroup_invocation_id değerine sahip olması durumunda doğru (true) değerini döndürür.
  • subgroupBroadcastFirst(value): Alt grupta en düşük subgroup_invocation_id değerine sahip etkin çağırmadan diğer tüm etkin çağırmalara value yayınlanır.

  • subgroupShuffle(value, id): subgroup_invocation_id'si id ile eşleşen etkin çağırmadan value değerini döndürür.
  • subgroupShuffleXor(value, mask): subgroup_invocation_id'si subgroup_invocation_id ^ mask ile eşleşen etkin çağırmadan value değerini döndürür. mask dinamik olarak tek tip olmalıdır.
  • subgroupShuffleUp(value, delta): subgroup_invocation_id'si subgroup_invocation_id - delta ile eşleşen etkin çağırmadan value değerini döndürür.
  • subgroupShuffleDown(value, delta): subgroup_invocation_id'si subgroup_invocation_id + delta ile eşleşen etkin çağırmadan value değerini döndürür.

  • quadBroadcast(value, id): Kimliği id olan dörtlü çağırmadan value yayınları. id, sabit ifade olmalıdır.
  • quadSwapX(value): X yönünde dörtlüdeki çağırmalar arasında value öğesini değiştirir.
  • quadSwapY(value): Y yönündeki dörtlüde çağırmalar arasında value değiştirir.
  • quadSwapDiagonal(value): Dörtlüdeki çağrılar arasında çapraz olarak value geçiş yapar.

Dawn güncellemeleri

wgpu::PrimitiveState yapısı artık doğrudan derinlik kırpma kontrolü ayarını içeriyor. Bu sayede ayrı bir wgpu::PrimitiveDepthClipControl yapısına gerek kalmıyor. Daha fazla bilgi edinmek için aşağıdaki kod snippet'ine ve webgpu-headers PR'ye bakın.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

Bu özet yalnızca önemli noktalardan bazılarını kapsar. Kapsamlı commit listesine göz atın.

WebGPU'daki yenilikler

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

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

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

Chrome 113