<返回更多

WebGPU 是 2023 年 Web 的未来！

2023-06-08  微信公众号  前端充电宝
加入收藏
WebGPU 为 Web 平台上的高级图形和高性能计算提供了无限可能。尽管目前浏览器支持仍然有限，但 WebGPU 在如今是非常值得探索的，并且在未来只会变得更加强大和广泛支持。

WebGPU 是用于 Web 的下一代图形和计算 API。它提供对现代 GPU 的基础访问，从而在 Web 平台上实现高性能 3D 图形、图像处理和通用计算。经过多年的开发和测试，WebGPU 已经到了推荐阶段，可以被主流浏览器采用。谷歌宣布 Chrome 从版本 113 开始提供 WebGPU 支持，从而在 ChromeOS、windows 和 macOS 设备上实现惊人的视觉效果和复杂的计算。

WebGPU 为 Web 开发开辟了很多新的可能性。它可以为身临其境的虚拟世界、交互式数据可视化、高级图像和视频编辑、物理模拟、机器学习等提供支持——所有这些都在浏览器中运行。WebGPU 还支持围绕 web 3、隐私和安全性的新用例，这在以前是不可行的。

Web 平台继续突破在线可能性的界限。借助 WebGPU 和 WebXR、WebTransport 和 WebCodecs 等相关标准，未来的 Web 将比以往任何时候都更加强大和开放。虽然这仍是一项新兴技术，但 WebGPU 展示了开放 Web 上图形和计算的广阔前景。

WebGPU 提供基础 API，需要了解图形编程和 GPU 架构才能有效使用。然而，在库、工具和资源的帮助下，Web 开发人员可以使用 WebGPU。Babylon.js、Three.js、TensorFlow.js 和 Filament 等 WebGPU 采纳者展示了如何将 WebGPU 包装到更高级别的框架中，以构建交互式 3D 场景、运行机器学习模型等。

WebGPU 的历史

WebGPU 的诞生源于对更现代和高效的 Web 图形 API 的需求，以取代基于 OpenGL API 家族的 WebGL。WebGL 在网页上实现了许多令人惊叹的体验，例如 google 地球、交互式音乐视频、3D 房地产漫游等，但它也存在一些限制和挑战，例如：

2016 年，谷歌向 WebGL 工作组展示了一个 PPT，探讨了构建一个最终取代 WebGL 的新 API 的基本思想和原则，又名“WebGL Next”。该演示文稿提出了一个低级 API，它将公开现代 GPU 的底层功能，例如命令缓冲区、管道、描述符等。API 也将是显式的，这意味着开发人员将对 GPU 资源的使用方式有更多的控制权 管理和同步。

2017 年，Apple 的 WebKit 团队提议创建 W3C 社区组来设计 API。同时，他们基于 Apple Metal 中的概念，宣布了一项名为“WebGPU”的概念和提案的技术证明。WebGPU 名称后来被社区采纳为未来标准名称。最初的提案已重命名为“WebMetal”以避免进一步混淆。

W3C 社区小组开始着手定义 WebGPU 规范和 API，Mozilla、Apple、Intel 和 Microsoft 等主要公司都做出了贡献。该小组还收到了 Web 开发人员和行业专家的反馈。目标是创建一个 API：

Chromium 团队于 2017 年初展示了名为 NXT 的第一个概念原型。NXT 实现了一个新的 API，它可以在带有 OpenGL 的 Chromium 中运行，或者与 OpenGL 和 Metal 独立运行。NXT 借鉴了所有 Vulkan、Direct3D 12 和 Metal 原生 API 的概念。

2020 年，WebGPU 进入第一个公共工作草案阶段，这意味着该规范足够稳定，可以接受公众审查和反馈。该规范定义了 JAVAScript API 和基于 SPIR-V 的 WebGPU 着色语言 (WGSL)，旨在与现有的着色语言（如 HLSL 和 GLSL）兼容。

在2021年，WebGPU 达到了候选推荐阶段，这意味着规范已经可以进行实现测试和互操作性评估。规范还定义了一些可选特性，这些特性可以根据浏览器的平台支持进行启用，例如深度钳位、各向异性滤波、纹理压缩 BC 等。

2023 年，WebGPU 进入提议推荐阶段，这意味着该规范已准备好接受 W3C 主席的认可。该规范还定义了一些实验性功能，浏览器可以在标志或前缀下启用这些功能，例如光线追踪或可变速率着色。

2023 年 4 月 6 日，Google 宣布 Chromium/Chrome 浏览器将从 Chromium/Chrome 113 开始在支持 Vulkan 的 ChromeOS 设备、macOS 和具有 Direct3D 12 的 Windows 设备上启用 WebGPU 支持。对包括 linux 和 Android 在内的其他平台的 WebGPU 支持将在之后进行添加。

WebGPU对Web 3开发的影响

WebGPU 对 Web 3 开发有这深远的影响，因为它实现了 WebGL 不可能或不可行的新可能性和场景。WebGPU 的一些用例如下：

WebGPU 入门

要开始使用 WebGPU，需要一个支持它的浏览器（例如 Chrome 113 或更高版本）和一个具有兼容 GPU 的设备（例如支持 Vulkan 的 Chromebook）。还需要一些 JavaScript 和图形编程的基本知识。

以下是使用 WebGPU 在 canvas 元素上绘制三角形的例子：

// 获取 canvas 元素的引用
const canvas = document.getElementById("canvas");

// 从 canvas 获取 WebGPU 上下文
const context = canvas.getContext("webgpu");
// 从上下文中获取默认适配器 (GPU)
const adapter = awAIt context.getAdapter();
// 从适配器获取设备（GPU 的逻辑表示）
const device = await adapter.requestDevice();
// 从上下文中创建交换链（一组用于显示帧的缓冲区）
const swapChainFormat = "bgra8unorm";
const swapChain = context.configureSwapChain({
  device,
  format: swapChainFormat,
});
// 从设备创建着色器模块（着色器代码的容器）
const shaderModule = device.createShaderModule({
  code: `
    // 顶点着色器
    [[stage(vertex)]]
    fn main([[builtin(vertex_index)]] index: u32) -> [[builtin(position)]] vec4<f32> {
      // 定义三角形顶点的位置
      var positions: array<vec2<f32>, 3> = array<vec2<f32>, 3>(
        vec2<f32>(0.0, 0.5),
        vec2<f32>(-0.5, -0.5),
        vec2<f32>(0.5, -0.5),
      );
      // 返回当前顶点的位置
      return vec4<f32>(positions[index], 0.0, 1.0);
    }
    // 片段着色器
    [[stage(fragment)]]
    fn main() -> [[location(0)]] vec4<f32> {
      // 返回三角形的颜色（红色）
      return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    }
  `,
});
// 从设备创建管道（用于渲染的一系列操作）
const pipeline = device.createRenderPipeline({
  // 指定顶点阶段（着色器模块和入口点）
  vertex: {
    module: shaderModule,
    entryPoint: "main",
  },
  // 指定片段阶段（着色器模块和入口点）
  fragment: {
    module: shaderModule,
    entryPoint: "main",
    // 指定输出格式和位置
    targets: [
      {
        format: swapChainFormat,
      },
    ],
  },
  // 指定原始拓扑（顶点如何连接）
  primitive: {
    topology: "triangle-list",
  },
});

// 从设备创建命令编码器（用于记录命令的辅助对象）
const commandEncoder = device.createCommandEncoder();

// 从交换链中获取当前纹理（缓冲区）
const texture = swapChain.getCurrentTexture();

// 从命令编码器创建渲染通道（一组用于渲染的命令）
const renderPass = commandEncoder.beginRenderPass({
  // 指定输出纹理和颜色
  colorAttachments: [
    {
      view: texture.createView(),
      loadValue: [0.5, 0.5, 0.5, 1], // gray
      storeOp: "store",
    },
  ],
});

// 为渲染过程设置 pipeline
renderPass.setPipeline(pipeline);

// 绘制三角形（3 个顶点，1 个实例）
renderPass.draw(3, 1, 0, 0);

// 结束渲染过程
renderPass.endPass();

// 从命令编码器获取命令缓冲区（命令的容器）
const commandBuffer = commandEncoder.finish();

// 将命令缓冲区提交到设备队列（要执行的命令列表）
device.queue.submit([commandBuffer]);

// 请求一个动画帧来渲染下一帧
requestAnimationFrame(render);

WebGPU 资源和工具

要构建 WebGPU，需要一些工具和资源来完成开发过程。可以使用的一些工具和资源如下：

使用这些工具和资源，可以了解有关 WebGPU 的更多信息并创建自己的示例和应用。还可以探索其他使用 WebGPU 的示例和项目，例如：

const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();


const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

const material = new BABYLON.StandardMaterial("material", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);

sphere.material = material;

engine.runRenderLoop(() => {
    scene.render();
});
  
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
  
const engine = Filament.Engine.create(canvas);

const scene = engine.createScene();

const camera = engine.createCamera();

const view = engine.createView();
view.setCamera(camera);
view.setScene(scene);

const skybox = engine.createSkyFromKtx('venetian_crossroads_2k_ibl.ktx');
scene.setSkybox(skybox);

const indirectLight = engine.createIblFromKtx('venetian_crossroads_2k_ibl.ktx');
scene.setIndirectLight(indirectLight);

const material = engine.createMaterial('lit.filamat');

const renderable = Filament.EntityManager.get().create();
scene.addEntity(renderable);

Filament.fetch('DamagedHelmet.glb', (buffer) => {
  const loader = new Filament.gltfio.AssetLoader(engine);
  const asset = loader.createAssetFromBinary(buffer);
  loader.delete();
  asset.getEntities().forEach((entity) => {
    scene.addEntity(entity);
  });
});

function render() {
  requestAnimationFrame(render);
  view.setViewport([0, 0, canvas.width, canvas.height]);
  renderer.render(view);
}
render();
import * as tf from '@tensorflow/tfjs';

import '@tensorflow/tfjs-backend-webgpu';

await tf.ready();

tf.setBackend('webgpu');

const a = tf.tensor([1, 2, 3, 4]);
const b = tf.tensor([5, 6, 7, 8]);

const c = a.add(b);
c.print();

这些只是使用 WebGPU 的一些示例和项目。随着 WebGPU 得到更广泛的采用和支持们可以期待在未来看到更多使用 WebGPU 的惊人和创新的 Web 应用。

小结

WebGPU 为 Web 平台上的高级图形和高性能计算提供了无限可能。尽管目前浏览器支持仍然有限，但 WebGPU 在如今是非常值得探索的，并且在未来只会变得更加强大和广泛支持。Web 作为 3D、可视化、模拟等领域的一个引人注目的选择继续向前发展。

声明：本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系，我们将立即删除或处理。
▍相关推荐
更多资讯 >>>
Copyright @ 简易百科 V 2.0 京ICP备14042104号