您当前的位置:首页 > 电脑百科 > 电脑知识

WebGPU 是 2023 年 Web 的未来!

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

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

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 房地产漫游等,但它也存在一些限制和挑战,例如:

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

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:

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

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 支持。对包括 linuxAndroid 在内的其他平台的 WebGPU 支持将在之后进行添加。

WebGPU对Web 3开发的影响

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

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

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 示例和演示的集合,展示了如何使用 WebGPU 的各种功能和技术。可以浏览代码、在线运行示例或将它们下载到本地计算机。这些示例还包括一个 WebGPU 帮助程序库,可以简化一些常见的任务和操作。地址:https://austineng.Github.io/webgpu-samples/。
  • WebGPU Playground:WebGPU 的在线编辑器和 Playground,可让在浏览器中编写和运行 WebGPU 代码。还可以与其他人共享代码。地址:https://webgpu-playground.NETlify.app/。
  • WebGPU 文档:WebGPU 的官方文档,解释了 API 的概念、术语和功能。还可以在 WebGPU 上找到指向其他资源和教程的链接。地址:https://gpuweb.github.io/gpuweb/。
  • WebGPU 着色语言 (WGSL) 规范:WGSL 的官方规范,WebGPU 的着色语言,它定义了 WGSL 的语法、语义和特性。还可以找到指向 WGSL 的其他资源和工具的链接。地址:https://gpuweb.github.io/gpuweb/wgsl/。
  • WGSL Playground:WGSL 的在线编辑器,可让在浏览器中编写和运行 WGSL 代码。还可以与其他人共享代码。地址:https://timjones.io/wgsl-playground/。

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

  • Babylon.js:一个功能强大且功能丰富的 Web 3D 引擎,支持将 WebGPU 作为渲染后端。官网:https://www.babylonjs.com/。
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();
});
  • Three.js:一个流行的轻量级 Web 3D 库,支持将 WebGPU 作为实验性渲染器。官网:https://threejs.org/
 
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();
  • Filament:基于物理的实时渲染引擎,适用于 Android、IOS、Windows、Linux、macOS 和 WebGL/WebGPU,支持高质量图形和光照效果。官网:https://google.github.io/filament/。
 
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();
  • TensorFlow.js:一个用于机器学习的 JavaScript 库,支持 WebGPU 作为加速计算的后端。官网:https://www.tensorflow.org/js/。
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、可视化、模拟等领域的一个引人注目的选择继续向前发展。



Tags:WebGPU   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
WebGPU 是 2023 年 Web 的未来!
WebGPU 为 Web 平台上的高级图形和高性能计算提供了无限可能。尽管目前浏览器支持仍然有限,但 WebGPU 在如今是非常值得探索的,并且在未来只会变得更加强大和广泛支持。WebGPU...【详细内容】
2023-06-08  Search: WebGPU  点击:(359)  评论:(0)  加入收藏
WebGPU:在浏览器中解锁现代 GPU 访问
近日,Chrome 支持了 WebGPU,新的 WebGPU API 在图形和机器学习工作负载方面实现了巨大的性能提升。本文将探讨 WebGPU 如何改进当前 WebGL 解决方案,并展望未来的发展方向。Web...【详细内容】
2023-05-17  Search: WebGPU  点击:(336)  评论:(0)  加入收藏
▌简易百科推荐
云计算和边缘计算
云计算和边缘计算是两种不同的计算模型,它们各有特点,适用于不同的场景和需求。云计算是一种基于互联网的计算模型,它将计算资源、存储资源和应用服务集中在云端,用户可以通过网...【详细内容】
2024-03-01    简易百科  Tags:云计算   点击:(28)  评论:(0)  加入收藏
云计算与边缘计算:有何不同?
公共云计算平台可以帮助企业充分利用全球服务器来增强其私有数据中心。这使得基础设施能够扩展到任何位置,并有助于计算资源的灵活扩展。混合公共-私有云为企业计算应用程序...【详细内容】
2024-02-28  通信产品推荐官    Tags:云计算   点击:(21)  评论:(0)  加入收藏
量子计算机是什么?跟现在的计算机相比优缺点是什么?
量子计算机是什么?跟现在的计算机相比优缺点是什么? 随着科技的不断发展,计算机技术也取得了巨大的进步。然而,随着摩尔定律的趋近于极限,传统的计算机技术面临着许多挑战。这时...【详细内容】
2024-02-23    简易百科  Tags:量子计算机   点击:(38)  评论:(0)  加入收藏
量子计算机:未来电脑的革命性技术
在科技的广袤天空中,量子计算机如一颗璀璨的新星,以其独特的光芒预示着未来电脑的革命性变革。这项令人瞩目的技术不仅代表着计算机科学的最前沿,更承载着人类对于速度和效率的...【详细内容】
2024-02-23  小浩长得帅    Tags:量子计算机   点击:(41)  评论:(0)  加入收藏
为什么计算机需要十六进制?
今天简单聊聊十六进制。实际上计算机本身是不需要十六进制的,计算机只需要二进制,需要十六进制的是人。每个十六进制中的数字代表4个比特,你可以非常直观的从十六进制中知道对...【详细内容】
2024-02-22  码农的荒岛求生  微信公众号  Tags:计算机   点击:(49)  评论:(0)  加入收藏
多模态RAG应用:跨越文本与图片的智能交互
近年来,多模态RAG(Retrieval-AugmentedGeneration)应用的兴起引发了人们对人工智能技术发展方向的广泛关注。传统的RAG应用主要基于文本的输入和输出,而随着GPT4-V的发布,多模态R...【详细内容】
2024-01-29  况成放    Tags:多模态RAG   点击:(72)  评论:(0)  加入收藏
量子计算机真相揭秘,一篇文章颠覆你的认知
你看过《三体》吗?在刘慈欣笔下,三体人用一种叫“智子”的黑科技干扰了人类的实验,从而锁死了人类的技术。而在现实世界,一把无形的“锁”其实也悄然逼近了我们,它就是芯片。随着...【详细内容】
2024-01-23  天才简史  今日头条  Tags:量子计算机   点击:(25)  评论:(0)  加入收藏
生成对抗网络(GAN)在计算机视觉领域中的应用
生成对抗网络(GAN)是一种在计算机视觉领域中广泛应用的深度学习模型。它由一个生成器网络和一个判别器网络组成,通过对抗训练的方式实现图像的生成和判别。GAN在计算机视觉中的...【详细内容】
2024-01-15  数码小风向    Tags:生成对抗网络   点击:(74)  评论:(0)  加入收藏
如何免费生成logo?
Logo设计对于一个品牌来说非常重要,它是品牌的身份标识,可以帮助人们迅速识别和记住一个品牌。同时还可以帮助建立品牌认知度,传达出品牌的专业形象。无论是大公司还是刚起步的...【详细内容】
2024-01-05  阳仔问文    Tags:logo   点击:(89)  评论:(0)  加入收藏
自然语言处理中的句法分析方法研究与实现
自然语言处理(NLP)中的句法分析方法是NLP领域的重要研究内容之一,它旨在通过对句子结构的分析和理解,揭示句子中单词之间的语法关系,为后续的语义理解和信息提取提供基础支撑。本...【详细内容】
2024-01-04  毛晓峰    Tags:自然语言处理   点击:(55)  评论:(0)  加入收藏
站内最新
站内热门
站内头条