Что нового в WebGPU (Chrome 131)

Франсуа Бофор
François Beaufort
GitHub

Расстояния отсечения в WGSL

Расстояния отсечения позволяют ограничить объем отсечения примитивов с помощью определяемых пользователем полупространств на выходе этапа вершин. Определение собственных плоскостей отсечения дает больший контроль над тем, что видно в сценах WebGPU. Этот метод особенно полезен для таких приложений, как программное обеспечение САПР, где решающее значение имеет точный контроль над визуализацией.

Когда функция "clip-distances" доступна в GPUAdapter, запросите GPUDevice с этой функцией, чтобы получить поддержку расстояний обрезки в WGSL, и явно включите это расширение в своем коде WGSL с помощью enable clip_distances; . После включения вы можете использовать встроенный массив clip_distances в своем вершинном шейдере. Этот массив содержит расстояния до определяемой пользователем плоскости отсечения:

  • Расстояние отсечения, равное 0, означает, что вершина лежит на плоскости.
  • Положительное расстояние означает, что вершина находится внутри полупространства отсечения (сторона, которую вы хотите сохранить).
  • Отрицательное расстояние означает, что вершина находится за пределами полупространства отсечения (стороны, которую вы хотите отбросить).

См. следующий фрагмент, запись chromestatus и проблему 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()

После вызова GPUCanvasContext configure() со словарем конфигурации метод GPUCanvasContext getConfiguration() позволяет проверить конфигурацию контекста холста. Он включает в себя элементы device , format , usage , viewFormats , colorSpace , toneMapping и alphaMode . Это полезно для таких задач, как проверка, поддерживает ли браузер холст HDR, как показано в примере «Частицы (HDR)» . См. следующий фрагмент, запись chromestatus и проблему 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.
}

Примитивы точек и линий не должны иметь смещения глубины.

Как было объявлено ранее , спецификация WebGPU теперь делает ошибкой проверки установку depthBias , depthBiasSlopeScale и depthBiasClamp ненулевого значения, когда топология конвейера рендеринга представляет собой тип линии или точки. См. выпуск 352567424 .

Встроенные функции инклюзивного сканирования для подгрупп

В рамках экспериментирования с подгруппами в выпуск 361330160 были добавлены следующие встроенные функции подгруппы:

  • subgroupInclusiveAdd(value) : возвращает сумму инклюзивного сканирования всех value активных вызовов в подгруппе.
  • subgroupInclusiveMul(value) : возвращает умножение инклюзивного сканирования всех value активных вызовов в подгруппе.

Экспериментальная поддержка косвенного множественного отрисовки

Функция косвенного графического процессора с несколькими отрисовками позволяет выполнять несколько вызовов отрисовки с помощью одной команды графического процессора. Это особенно полезно в ситуациях, когда необходимо визуализировать большое количество объектов, таких как системы частиц, создание экземпляров и большие сцены. Методы drawIndirect() и drawIndexedIndirect() GPURenderPassEncoder могут одновременно выдавать только один вызов отрисовки из определенной области буфера графического процессора.

Пока эта экспериментальная функция не будет стандартизирована , включите флаг «Поддержка Unsafe WebGPU» на chrome://flags/#enable-unsafe-webgpu чтобы сделать ее доступной в Chrome.

Благодаря нестандартной функции графического процессора "chromium-experimental-multi-draw-indirect" доступной в GPUAdapter, запросите GPUDevice с этой функцией. Затем создайте GPUBuffer с использованием GPUBufferUsage.INDIRECT для хранения вызовов отрисовки. Вы можете использовать его позже в новых методах multiDrawIndirect() и multiDrawIndexedIndirect() GPURenderPassEncoder для выполнения вызовов отрисовки внутри прохода рендеринга. См. следующий фрагмент и проблему 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();

Вариант компиляции шейдерного модуля, строгая математика

В GPUShaderModuleDescriptor была добавлена ​​логическая опция разработчика strictMath , позволяющая включать или отключать строгие математические вычисления во время компиляции модуля шейдера. Она доступна под флагом «Функции разработчика WebGPU» на странице chrome://flags/#enable-webgpu-developer-features , что означает, что эта функция предназначена только для использования во время разработки. См. выпуск 42241455 .

Эта опция в настоящее время поддерживается в Metal и Direct3D. Когда строгая математика отключена, компилятор может оптимизировать ваши шейдеры следующим образом:

  • Игнорирование возможности значений NaN и Infinity.
  • Рассматривая -0 как +0.
  • Замена деления более быстрым умножением на обратное.
  • Операции перестановки на основе ассоциативных и дистрибутивных свойств. 
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 });

Удалить запрос GPUAdapterAdapterInfo()

Асинхронный метод GPUAdapter requestAdapterInfo() является избыточным, поскольку вы уже можете получить GPUAdapterInfo синхронно, используя атрибут info GPUAdapter. Следовательно, нестандартный метод GPUAdapter requestAdapterInfo() теперь удален. См. намерение удалить .

Обновления рассвета

Исполняемый файл tint_benchmark измеряет стоимость перевода шейдеров из WGSL на каждый серверный язык. Ознакомьтесь с новой документацией , чтобы узнать о ней больше.

Это касается только некоторых ключевых моментов. Ознакомьтесь с исчерпывающим списком коммитов .

Что нового в WebGPU

Список всего, что было описано в серии «Что нового в WebGPU» .

Хром 131

Хром 130

Хром 129

Хром 128

Хром 127

Хром 126

Хром 125

Хром 124

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113