Nowości w WebGPU (Chrome 131)

François Beaufort
François Beaufort
GitHub

Obcinanie odległości w WGSL

Odległości przycinania pozwalają ograniczyć objętość przycinania elementów pierwotnych za pomocą zdefiniowanych przez użytkownika półprzestrzeni w danych wyjściowych etapu wierzchołków. Określanie własnych płaszczyzn odcinania zapewnia 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órym precyzyjna kontrola wizualizacji ma kluczowe znaczenie.

Gdy funkcja "clip-distances" jest dostępna w obiekcie GPUAdapter, poproś o obiekt GPUDevice z tą funkcją, aby uzyskać obsługę odległości przycinania w WGSL, i wyraźnie włącz to rozszerzenie w kodzie WGSL za pomocą enable clip_distances;. Po włączeniu możesz użyć wbudowanej tablicy clip_distances w programie cieniowania wierzchołków. Ta tablica zawiera odległości do płaszczyzny odcinania zdefiniowanej przez użytkownika:

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

Zobacz ten fragment kodu, wpis na stronie chromestatus i zgłoszenie 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()

Gdy wywołasz interfejs GPUCanvasContext configure() ze słownikiem konfiguracji, metoda GPUCanvasContext getConfiguration() umożliwi Ci sprawdzenie konfiguracji kontekstu elementu canvas. Obejmuje device, format, usage, viewFormats, colorSpace, toneMapping i alphaMode. Jest to przydatne w przypadku zadań takich jak sprawdzanie, czy przeglądarka obsługuje obszar rysowania HDR, jak pokazano w przykładzie Particles (HDR). Zobacz ten fragment kodu, wpis na stronie chromestatus i zgłoszenie 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.
}

Prymitywy punktowe i liniowe nie mogą mieć odchylenia głębi

Zgodnie z wcześniejszym ogłoszeniem specyfikacja WebGPU powoduje teraz błąd weryfikacji, gdy wartości depthBias, depthBiasSlopeScale i depthBiasClamp są ustawione na wartość inną niż zero, a topologia potoku renderowania jest typu liniowego lub punktowego. Zobacz problem 352567424.

Wbudowane funkcje skanowania inkluzywnego dla podgrup

W ramach eksperymentu z podgrupami w zgłoszeniu 361330160 dodaliśmy te wbudowane funkcje podgrup:

  • subgroupInclusiveAdd(value): zwraca sumę skanowania obejmującego wszystkie aktywne wywołania values w podgrupie.
  • subgroupInclusiveMul(value): zwraca iloczyn skanowania wszystkich aktywnych wywołań values w podgrupie.

Eksperymentalna obsługa rysowania pośredniego wielu elementów

Funkcja wielokrotnego rysowania pośredniego na GPU umożliwia wydawanie wielu wywołań rysowania za pomocą jednego polecenia GPU. Jest to szczególnie przydatne w sytuacjach, w których trzeba wyrenderować dużą liczbę obiektów, np. systemy cząsteczek, instancje i duże sceny. Metody drawIndirect() i drawIndexedIndirect() interfejsu GPURenderPassEncoder mogą wydawać tylko jedno wywołanie rysowania naraz z określonego regionu bufora GPU.

Dopóki ta eksperymentalna funkcja nie zostanie znormalizowana, włącz flagę „Unsafe WebGPU Support” (Niebezpieczna obsługa WebGPU) na stronie chrome://flags/#enable-unsafe-webgpu, aby była dostępna w Chrome.

Jeśli w obiekcie GPUAdapter dostępna jest funkcja "chromium-experimental-multi-draw-indirect" niestandardowego procesora graficznego, poproś o obiekt GPUDevice z tą funkcją. Następnie utwórz obiekt GPUBuffer z atrybutem GPUBufferUsage.INDIRECT, aby przechowywać wywołania rysowania. Możesz go później użyć w nowych metodach multiDrawIndirect() i multiDrawIndexedIndirect() GPURenderPassEncoder, aby wywoływać rysowanie w ramach przepustki renderowania. Zapoznaj się z tym fragmentem kodu i problemem 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 cieniowania ścisłe obliczenia

Do interfejsu GPUShaderModuleDescriptor dodano opcję logiczną strictMath, która umożliwia włączanie i wyłączanie ścisłych obliczeń podczas kompilacji modułu cieniowania. Jest ona dostępna za flagą „Funkcje deweloperskie WebGPU” na stronie chrome://flags/#enable-webgpu-developer-features, co oznacza, że jest przeznaczona wyłącznie do użytku podczas programowania. Zobacz problem 42241455.

Ta opcja jest obecnie obsługiwana w przypadku interfejsów Metal i Direct3D. Gdy ścisłe obliczenia matematyczne są wyłączone, kompilator może optymalizować shadery przez:

  • Ignorowanie możliwości wystąpienia wartości NaN i Infinity.
  • Traktowanie wartości -0 jako +0.
  • Zastąpienie dzielenia szybszym mnożeniem przez odwrotność.
  • Zmiana kolejności działań na podstawie właściwości łączności i rozdzielności.
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 });

Usuwanie metody GPUAdapter requestAdapterInfo()

Asynchroniczna metoda GPUAdapter requestAdapterInfo() jest zbędna, ponieważ informacje GPUAdapterInfo można już uzyskać synchronicznie za pomocą atrybutu GPUAdapter info. Dlatego niestandardowa metoda GPUAdapter requestAdapterInfo() została usunięta. Zobacz zamiar usunięcia.

Aktualizacje Dawn

Plik wykonywalny tint_benchmark mierzy koszt tłumaczenia shaderów z WGSL na każdy język backendu. Więcej informacji znajdziesz w nowej dokumentacji.

To tylko niektóre z najważniejszych informacji. Zapoznaj się z pełną listą zatwierdzeń.

Co nowego w WebGPU

Lista wszystkich tematów omówionych w serii Nowości w WebGPU.

Chrome 155–156

Chrome 153–154

Chrome 151–152

Chrome 149-150

Chrome 147–148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

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