投稿
  1. Paragoger衍生者 AIGC 训练营Home
  2. 随笔

WebGPU 2023年的视角

chris • • 随笔 • 85 views

介绍

经过多年的开发和测试，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 的需求，该 API 可以替代基于 1992 年首次开发的 OpenGL API 系列的 WebGL。WebGL在 Web 上实现了令人惊叹的体验，例如 Google Earth、交互式音乐视频、3D 房地产漫游等，但它也存在一些限制和挑战，例如：

  • 缺乏对较新的 GPU 功能的支持，例如计算着色器、光线追踪、可变速率着色等。
  • 由于需要验证每个 API 调用并在 CPU 和 GPU 内存之间复制数据，导致 CPU 开销和内存使用率过高。
  • 由于对 OpenGL 的支持和优化程度不同，不同浏览器和平台上的性能和行为不一致。

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

2017 年，苹果的 WebKit 团队提议成立 W3C 社区小组来设计 API。同时，他们宣布了一项技术概念验证和提案，名为“WebGPU”，基于苹果 Metal 中的概念。WebGPU 这个名字后来被社区小组采用作为未来标准的工作名称，而不仅仅是苹果的初步提案。为了避免进一步混淆，最初的提案已被重命名为“WebMetal”。

W3C 社区小组开始着手定义 WebGPU 规范和 API，并得到了 Mozilla、Apple、Intel 和 Microsoft 等主要公司的贡献。该小组还收到了来自 Web 开发人员和行业专家的反馈。目标是创建一个 API，该 API 应具有以下特点：

  • 安全：API 应该防止常见错误，例如内存泄漏、数据竞争或可能导致崩溃或安全​​问题的无效操作。
  • 可移植性：API 应该能够在不同的浏览器和平台上一致地工作，而不需要特定于供应商的扩展或解决方法。
  • 富有表现力：API 应该允许开发人员充分利用现代 GPU 的潜力，而不会牺牲性能或灵活性。

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

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

2021 年，WebGPU 进入候选推荐阶段，这意味着该规范已准备好进行实现测试和互操作性评估。该规范还定义了一些可选功能，浏览器可以根据其平台支持启用这些功能，例如深度限制、各向异性过滤、纹理压缩-bc 等。

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

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

WebGPU 如何影响 Web 3 开发

WebGPU 改变了 Web 3 开发格局，因为它实现了 WebGL 无法实现或无法实现的新可能性和场景。WebGPU 的一些优势和用例如下：

  • 高性能图形和计算：WebGPU 允许开发者利用现代 GPU 的强大功能在网络上创建令人惊叹的视觉效果和复杂的模拟。WebGPU 可以处理大量数据和并行计算，例如粒子系统、流体动力学、物理引擎、机器学习等。WebGPU 还可以支持高级渲染技术，例如光线追踪、阴影、反射、环境光遮蔽等。
  • 跨平台兼容性：WebGPU 可在不同的浏览器和平台上一致运行，无需特定于供应商的扩展或解决方法。WebGPU 还可以在支持 Vulkan、Metal 或 Direct3D 12 的移动设备上运行，这些设备涵盖了大多数现代智能手机和平板电脑。这意味着开发人员可以创建在任何设备上运行流畅且外观精美的 Web 应用程序。
  • 面向未来：WebGPU 旨在实现可扩展性，并适应未来的 GPU 功能和技术。WebGPU 可以将新功能作为可选扩展或实验性功能公开，浏览器可以根据其平台支持启用这些功能。这意味着开发人员可以使用最新、最强大的 GPU 功能，而无需等待标准跟上或冒兼容性问题的风险。
  • Web 3：WebGPU 可以使 Web 应用程序与去中心化的网络和协议进行交互，例如区块链、IPFS 等。WebGPU 还可以支持 Web 上的安全且可验证的计算，例如零知识证明、同态加密等。这意味着开发人员可以创建更加透明、可信和有弹性的 Web 应用程序。
  • Metaverse：WebGPU 可让 Web 应用程序在 Web 上创建沉浸式和交互式虚拟世界和体验。WebGPU 可支持大规模场景和环境、复杂的动画和交互、逼真的灯光和材质、空间音频和触觉等。这意味着开发人员可以创建更具吸引力、社交性和趣味性的 Web 应用程序。

如何开始使用 WebGPU

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

以下是如何使用 WebGPU 在画布元素上绘制三角形的简单示例：


// Get a reference to the canvas element
const canvas = document.getElementById("canvas");

// Get a WebGPU context from the canvas
const context = canvas.getContext("webgpu");
// Get the default adapter (GPU) from the context
const adapter = await context.getAdapter();
// Get a device (logical representation of the GPU) from the adapter
const device = await adapter.requestDevice();
// Create a swap chain (a set of buffers for displaying frames) from the context
const swapChainFormat = "bgra8unorm";
const swapChain = context.configureSwapChain({
  device,
  format: swapChainFormat,
});
// Create a shader module (a container for shader code) from the device
const shaderModule = device.createShaderModule({
  code: `
    // Vertex shader
    [[stage(vertex)]]
    fn main([[builtin(vertex_index)]] index: u32) -> [[builtin(position)]] vec4<f32> {
      // Define the positions of the triangle vertices
      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 the position of the current vertex
      return vec4<f32>(positions[index], 0.0, 1.0);
    }
    // Fragment shader
    [[stage(fragment)]]
    fn main() -> [[location(0)]] vec4<f32> {
      // Return the color of the triangle (red)
      return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    }
  `,
});
// Create a pipeline (a sequence of operations for rendering) from the device
const pipeline = device.createRenderPipeline({
  // Specify the vertex stage (shader module and entry point)
  vertex: {
    module: shaderModule,
    entryPoint: "main",
  },
  // Specify the fragment stage (shader module and entry point)
  fragment: {
    module: shaderModule,
    entryPoint: "main",
  // Specify the output format and location
    targets: [
      {
        format: swapChainFormat,
      },
    ],
  },
  // Specify the primitive topology (how the vertices are connected)
  primitive: {
    topology: "triangle-list",
  },
});

// Create a command encoder (a helper object for recording commands) from the device
const commandEncoder = device.createCommandEncoder();

// Get the current texture (buffer) from the swap chain
const texture = swapChain.getCurrentTexture();

// Create a render pass (a set of commands for rendering) from the command encoder
const renderPass = commandEncoder.beginRenderPass({
  // Specify the output texture and color
  colorAttachments: [
    {
      view: texture.createView(),
      loadValue: [0.5, 0.5, 0.5, 1], // gray
      storeOp: "store",
    },
  ],
});

// Set the pipeline for the render pass
renderPass.setPipeline(pipeline);

// Draw the triangle (3 vertices, 1 instance)
renderPass.draw(3, 1, 0, 0);

// End the render pass
renderPass.endPass();

// Get the command buffer (a container for commands) from the command encoder
const commandBuffer = commandEncoder.finish();

// Submit the command buffer to the device queue (a list of commands to execute)
device.queue.submit([commandBuffer]);

// Request an animation frame to render the next frame
requestAnimationFrame(render);

如何开始使用 WebGPU 进行构建

要构建 WebGPU，您需要一些工具和资源来帮助您完成开发过程。您可以使用的一些工具和资源包括：

  • WebGPU 示例：WebGPU 示例和演示的集合，展示了如何使用 WebGPU 的各种功能和技术。您可以浏览代码、在线运行示例或将其下载到本地计算机。这些示例还包括一个 WebGPU 帮助程序库，可简化一些常见任务和操作。您可以在https://austineng.github.io/webgpu-samples/找到这些示例。

  • WebGPU 着色语言 (WGSL) 规范：WebGPU 着色语言 WGSL 的官方规范。它定义了 WGSL 的语法、语义和功能。您还可以找到 WGSL 的其他资源和工具的链接。您可以在https://gpuweb.github.io/gpuweb/wgsl/找到该规范。

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


// Create a Babylon.js engine using WebGPU
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();

// Create a scene
const scene = new BABYLON.Scene(engine);
// Create a camera
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);
// Create a light
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Create a sphere
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
// Create a material
const material = new BABYLON.StandardMaterial("material", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);
// Apply the material to the sphere
sphere.material = material;
// Render the scene
engine.runRenderLoop(() => {
    scene.render();
});

// Create a Three.js scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Create a renderer
const renderer = new THREE.WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Render the scene
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// Create a Filament engine
const engine = Filament.Engine.create(canvas);

// Create a scene
const scene = engine.createScene();

// Create a camera
const camera = engine.createCamera();

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

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

// Create an indirect light
const indirectLight = engine.createIblFromKtx('venetian_crossroads_2k_ibl.ktx');
scene.setIndirectLight(indirectLight);

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

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

// Load a glTF model
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);
  });
});

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

// Import WebGPU backend
import '@tensorflow/tfjs-backend-webgpu';
// Wait for the backend to be ready
await tf.ready();
// Set the backend to WebGPU
tf.setBackend('webgpu');
// Create two tensors
const a = tf.tensor([1, 2, 3, 4]);
const b = tf.tensor([5, 6, 7, 8]);
// Add them and print the result
const c = a.add(b);
c.print();

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

结论

WebGPU 为 Web 平台上的高级图形和高性能计算带来了激动人心的机会。尽管浏览器支持仍然有限，但 WebGPU 值得探索，并且将来只会变得更加强大和得到广泛支持。Web 将继续向前发展，成为 3D、可视化、模拟等的有力选择。

RA/SD 衍生者AI训练营。发布者：chris，转载请注明出处：https://www.shxcj.com/archives/6144

Like (0)
0 0

关于作者

chris的头像

chris

641 文章
5 评论
1 粉丝
这个人很懒，什么都没有留下～
Previous 2024-09-18 3:01 下午
Next 2024-09-20 11:41 上午

相关推荐

发表回复

Please Login to Comment
本文授权以下站点有原版访问授权 https://www.shxcj.com https://www.2img.ai https://www.2video.cn