Nowości w WebGPU (Chrome 131)

François Beaufort
François Beaufort
GitHub

Odległości klipów w WGSL

Odległości klipów umożliwiają ograniczenie objętości klipów prymitywów za pomocą zdefiniowanych przez użytkownika półprzestrzeni na wyjściu etapu wierzchołka. Definiowanie własnych płaszczyzn przycinania daje większą kontrolę nad tym, co jest widoczne w scenach WebGPU. Ta technika jest szczególnie przydatna w przypadku aplikacji takich jak oprogramowanie CAD, w których przypadku dokładna kontrola wizualizacji jest kluczowa.

Gdy funkcja "clip-distances" jest dostępna w GPUAdapter, poproś o GPUDevice z tą funkcją, aby uzyskać obsługę odległości odcięcia w WGSL, i wyraźnie włącz to rozszerzenie w kodzie WGSL za pomocą enable clip_distances;. Po włączeniu możesz używać w shaderze wierzchołkowym wbudowanego tablicowego clip_distances. Ta tablica zawiera odległości od zdefiniowanej przez użytkownika płaszczyzny przycinania:

  • Odległość odcięcia 0 oznacza, że wierzchołek leży na płaszczyźnie.
  • Dodatnia odległość oznacza, że wierzchołek znajduje się wewnątrz półprzestrzeni klipu (strony, którą chcesz zachować).
  • Ujemna odległość oznacza, że wierzchołek znajduje się poza połową przestrzeni klipu (po stronie, którą chcesz odrzucić).

Zapoznaj się z podanym niżej fragmentem kodu, artykułem na stronie chromestatus oraz problemem 358408571.

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

Po wywołaniu metody GPUCanvasContext configure() z słownikiem konfiguracji możesz sprawdzić konfigurację kontekstu canvas za pomocą metody GPUCanvasContext getConfiguration(). Zawiera użytkowników device, format, usage, viewFormats, colorSpace, toneMapping i alphaMode. Jest to przydatne na przykład do sprawdzenia, czy przeglądarka obsługuje płótno HDR, jak pokazano w próbce cząsteczek (HDR). Zobacz poniższy fragment kodu, artykuł na stronie chromestatus oraz problem 370109829.

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

Pierwiastki punktowe i liniowe nie mogą mieć ustawienia głębokości

Zgodnie z poprzednimi informacjami specyfikacja WebGPU powoduje, że ustawianie wartości depthBias, depthBiasSlopeScale i depthBiasClamp na niezerową, gdy topologia dla kanału renderowania jest typu linia lub punkt, powoduje błąd walidacji. Zobacz problem 352567424.

Wbudowane funkcje skanowania z uwzględnieniem podgrup

W ramach eksperymentu dotyczącego podgrup w problemie 361330160 dodano te wbudowane funkcje podgrupy:

  • subgroupInclusiveAdd(value): zwraca sumę wszystkich aktywnych wywołań value w podgrupie.
  • subgroupInclusiveMul(value): zwraca mnożnik skanowania z uwzględnieniem wszystkich aktywnych wywołań value w podgrupie.

Eksperymentalna obsługa wielokrotnego rysowania pośredniego

Funkcja pośredniego procesora graficznego dotycząca wielu rysowań umożliwia wysyłanie wielu wywołań rysowania za pomocą jednego polecenia GPU. Jest to szczególnie przydatne w sytuacjach, gdy trzeba renderować dużą liczbę obiektów, np. systemów cząstek, instancjonowania i dużych scen. Metody drawIndirect() i drawIndexedIndirect() klasy GPURenderPassEncoder mogą wywołać tylko jedno wywołanie funkcji draw w danym momencie z określonego obszaru bufora GPU.

Dopóki ta funkcja eksperymentalna nie zostanie ujednolicona, włącz flagę „Unsafe WebGPU Support” (Niebezpieczne wsparcie WebGPU) na stronie chrome://flags/#enable-unsafe-webgpu, aby udostępnić ją w Chrome.

Jeśli w GPUAdapter jest dostępna niestandardowa funkcja GPU "chromium-experimental-multi-draw-indirect", zażądaj urządzenia GPU z tą funkcją. Następnie utwórz bufor GPU z wykorzystaniem GPUBufferUsage.INDIRECT, aby przechowywać wywołania draw. Możesz go później używać w nowych metodach multiDrawIndirect() i multiDrawIndexedIndirect() GPURenderPassEncoder, aby wydawać wywołania draw w ramach passu renderowania. Zobacz poniższy fragment kodu i problem 356461286.

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

Opcja kompilacji modułu shadera ścisła matematyka

Do pliku GPUShaderModuleDescriptor dodano logiczną opcję strictMath, która umożliwia włączanie i wyłączanie ścisłej matematyki podczas kompilacji modułu shadera. Jest ona dostępna za pomocą flagi „WebGPU Developer Features” (Funkcje dla programistów WebGPU) w chrome://flags/#enable-webgpu-developer-features, co oznacza, że jest to funkcja przeznaczona tylko do użytku podczas tworzenia. Zobacz problem 42241455.

Ta opcja jest obecnie obsługiwana w Metal i Direct3D. Gdy ścisła matematyka jest wyłączona, kompilator może optymalizować shadery, wykonując te czynności:

  • Ignorowanie możliwości wystąpienia wartości NaN i nieskończoności.
  • Uważanie -0 za +0.
  • Zastąpienie dzielenia szybszym mnożeniem przez odwrotną wartość.
  • przestawianie operacji na podstawie właściwości asocjacyjnych i rozpościelnych;
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 });

Usuń GPUAdapter requestAdapterInfo()

Metoda niesynchroniczna GPUAdapter requestAdapterInfo() jest zbędna, ponieważ informacje o GPUAdapter możesz już uzyskać synchronicznie za pomocą atrybutu GPUAdapter info. Dlatego niestandardowa metoda GPUAdapter requestAdapterInfo() została teraz usunięta. Sprawdź intencję usunięcia.

Aktualizacje świtu

Plik wykonywalny tint_benchmark mierzy koszt przetłumaczenia shaderów z WGSL na każdy język backendu. Aby dowiedzieć się więcej, zapoznaj się z nową dokumentacją.

Obejmuje to tylko niektóre najważniejsze informacje. Zapoznaj się z pełną listą commitów.

Co nowego w WebGPU

Lista wszystkich tematów omawianych w cyklu Co nowego w WebGPU.

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