WebGPU'da Yenilikler (Chrome 129)

François Beaufort
François Beaufort
GitHub

Tuval ton eşleme modu ile HDR desteği

Web geliştiricileri, HDR içerik yayınlamak için temel olarak <img> ve <video> öğelerine dayalı sınırlı seçeneklere sahiptir. Ancak <canvas> öğesi SDR ile sınırlı kalır. Bir kanvasta dinamik HDR içeriği oluşturmak için içeriğin, görüntülenmeden önce HDR resmi olarak kodlanması gerekir (örnek için bu demo'ya bakın).

WebGPU kanvas yapılandırmasında bulunan yeni GPUCanvasToneMappingMode parametresi, WebGPU'nun artık beyazdan (#FFFFFF) daha parlak renkler çizmesine olanak tanır. 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ğerleri [0, 1] aralığına sabitlenerek elde edilir.

  • "extended": Ekranın tüm HDR aralığının kilidini açar. Bu mod, ekranın [0, 1] aralığındaki "standard" ile eşleşir. Kilitleme veya projeksiyon, ekranın genişletilmiş dinamik aralığına uygulanır ancak [0, 1]'e uygulanmaz.

Aşağıdaki kod snippet'inde, kanvası yüksek dinamik aralık için nasıl yapılandıracağınız 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" },
});

Parçacıklar (HDR) örneğine ve WebGPU HDR örneğine göz atarak WebGPU ile HDR'yi keşfedin ve chromestatus girişine bakın.

Canlı bir görüntü gösteren HDR ekrana sahip dizüstü bilgisayar.
HDR ekranda görüntülenen Parçacıklar (HDR) örneği.

Genişletilmiş alt grup desteği

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

subgroup_size yerleşik değerinin şu anda parçacık gölgelendiricilerde hatalı olduğunu unutmayın. Şimdilik bu yöntemi 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 value toplamını döndürür.
  • subgroupExclusiveAdd(value): Alt gruptaki tüm etkin çağrıların value'larının özel tarama toplamını döndürür.
  • subgroupMul(value): Alt gruptaki tüm etkin çağrıların value çarpımını döndürür.
  • subgroupExclusiveMul(value): Alt gruptaki tüm etkin çağrıların value'larının özel tarama çarpımını döndürür.

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

  • subgroupMin(value): Alt gruptaki tüm etkin çağrıların value değerinin minimum değerini döndürür.
  • subgroupMax(value): Alt gruptaki tüm etkin çağrıların value değerinin maksimum değerini döndürür.

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

  • subgroupElect(): Bu çağrı, alt gruptaki etkin çağrılar arasında en düşük subgroup_invocation_id değerine sahipse doğru değerini döndürür.
  • subgroupBroadcastFirst(value): Alt gruptaki en düşük subgroup_invocation_id değerine sahip etkin çağrıdan diğer tüm etkin çağrılara value yayınlar.

  • subgroupShuffle(value, id): Etkin çağrıdan subgroup_invocation_id değeri id ile eşleşen value değerini döndürür.
  • subgroupShuffleXor(value, mask): Etkin çağrıdan subgroup_invocation_id değeri subgroup_invocation_id ^ mask ile eşleşen value değerini döndürür. mask dinamik olarak tekdüze olmalıdır.
  • subgroupShuffleUp(value, delta): Etkin çağrıdan subgroup_invocation_id değeri subgroup_invocation_id - delta ile eşleşen value değerini döndürür.
  • subgroupShuffleDown(value, delta): Etkin çağrıdan subgroup_invocation_id değeri subgroup_invocation_id + delta ile eşleşen value değerini döndürür.

  • quadBroadcast(value, id): id kimlikli dörtlü çağrıdan value yayınlar. id bir sabit ifade olmalıdır.
  • quadSwapX(value): value değerini, dörtlü gruptaki çağrılar arasında X yönünde değiştirir.
  • quadSwapY(value): value değerini Y yönündeki dörtlü gruptaki çağrılar arasında değiştirir.
  • quadSwapDiagonal(value): value değerini dörtlü gruptaki çağrılar arasında çapraz olarak değiştirir.

Şafak güncellemeleri

wgpu::PrimitiveState yapısı artık derinlik kırpma kontrolü ayarını doğrudan içeriyor. Böylece ayrı bir wgpu::PrimitiveDepthClipControl yapısına ihtiyaç 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, önemli noktalardan yalnızca bazılarını kapsar. Kapsamlı commit listesine göz atın.

WebGPU'daki Yenilikler

WebGPU'daki Yenilikler serisinde ele alınan tüm konuların 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

Chrome 113