WebGPU

• Compute shaders — ML-inference прямо в браузере (WebLLM, ONNX Runtime Web)
• WGSL — type-safe shading language, компилируется в native shader backend
• Async pipeline creation, explicit resource barriers
• Command buffers записываются один раз, переиспользуются
• Limits API: запрашивайте required features, иначе runtime-fallback

// WebGPU — минимальный compute shader
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shader = device.createShaderModule({ code: /* WGSL */ `
  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) id: vec3<u32>) {
    // parallel work here
  }
`});

• Web Workers
• Serverless AI

WebGPU — это современный API для работы с графическими процессорами (GPU) в веб-приложениях, который предоставляет более низкоуровневый доступ к графическим и вычислительным возможностям, чем его предшественник WebGL. Он разработан для улучшения производительности и возможностей рендеринга, позволяя разработчикам создавать сложные визуализации и высокопроизводительные вычисления прямо в браузере.

WebGPU предлагает ряд преимуществ, которые делают его привлекательным для разработчиков:

• Улучшенная производительность: WebGPU позволяет более эффективно использовать ресурсы GPU, что приводит к повышению производительности приложений.
• Низкоуровневый доступ: API предоставляет более детализированный контроль над процессами рендеринга и вычислений, позволяя разработчикам оптимизировать свои приложения.
• Кроссплатформенность: WebGPU работает в современных браузерах, что позволяет создавать приложения, которые могут работать на различных устройствах и платформах.

С помощью WebGPU разработчики могут реализовывать такие функции, как параллельные вычисления, что значительно повышает производительность по сравнению с традиционными методами. Например, используя WebGPU, можно значительно ускорить обработку графики в играх и визуализациях.

Для начала работы с WebGPU необходимо убедиться, что ваш браузер поддерживает данный API. На данный момент WebGPU поддерживается в таких браузерах, как Chrome и Firefox. Далее, мы рассмотрим простой пример создания контекста WebGPU и рендеринга треугольника.

const canvas = document.getElementById('canvas');
const context = canvas.getContext('webgpu');
const device = await navigator.gpu.requestDevice();
const swapChainFormat = 'bgra8unorm';
const swapChain = context.configureSwapChain({ format: swapChainFormat });
const vertexData = new Float32Array([
  0,  1,
 -1, -1,
  1, -1,
]);
const vertexBuffer = device.createBuffer({
  size: vertexData.byteLength,
  usage: GPUBufferUsage.VERTEX,
  mappedAtCreation: true,
});
const mappedRange = vertexBuffer.getMappedRange();
new Float32Array(mappedRange).set(vertexData);
vertexBuffer.unmap();
const renderPassDescriptor = {
  colorAttachments: [{
    view: undefined,
    loadValue: [0, 0, 0, 1],
    storeOp: 'store',
  }],
};
function frame() {
  const swapChainTexture = swapChain.getCurrentTexture();
  renderPassDescriptor.colorAttachments[0].view = swapChainTexture.createView();
  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setPipeline(pipeline);
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.draw(3, 1, 0, 0);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

В данном примере мы создаем контекст WebGPU, настраиваем буфер для вершин треугольника и запускаем цикл рендеринга. Таким образом, WebGPU позволяет легко интегрировать высокопроизводительные графические возможности в веб-приложения, значительно улучшая пользовательский опыт.