江苏龙网

  1. 主页 > 生活百科 > >

WebGPU 是 2023 年 Web 的未来！( 二 )

WebGPU


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 允许开发人员利用现代 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], // graystoreOp: "store",},],});// 为渲染过程设置 pipelinerenderPass.setPipeline(pipeline);// 绘制三角形（3 个顶点，1 个实例）renderPass.draw(3, 1, 0, 0);// 结束渲染过程renderPass.endPass();// 从命令编码器获取命令缓冲区（命令的容器）const commandBuffer = commandEncoder.finish();// 将命令缓冲区提交到设备队列（要执行的命令列表）device.queue.submit([commandBuffer]);// 请求一个动画帧来渲染下一帧requestAnimationFrame(render);


推荐阅读


上一篇：最强API调用模型来了！基于LLaMA微调，性能超过GPT-4

下一篇：一文解决所有「语言模型」疑问：能不能训多个epoch？怎么微调效率高？需要多少条数据？