当前位置: 首页 > news >正文

WebGPU入门

1. 引言

前序博客:

  • CUDA入门
  • WebGPU+ZKP:客户端证明

WebGPU——Draft 2023.7.17 由苹果、谷歌、Mozilla团队发起,当前处于草稿阶段,旨在成为W3C推荐标准。

WebGPU为 在图形处理单元(GPU)上执行诸如渲染和计算之类的操作 提供了API。

GPU支持丰富的渲染和并行计算应用。WebGPU是通过API,将GPU的硬件能力 供Web使用。WebGPU API为对原生GPU API进行高效映射。WebGPU与WebGL无关,且不明确锚定OpenGL ES (OpenGL for Embedded Systems)。

WebGPU:

  • 1)将物理GPU硬件看成是GPUAdapter。
  • 2)通过GPUDevice来连接GPUAdapter。
  • 3)GPUDevice的GPUQueue用于执行指令。
  • 4)GPUDevice可能有自身的内存,可高速访问处理器单元。
  • 5)GPUBuffer和GPUTexture是由GPU内存支持的物理资源。
  • 6)GPUCommandBuffer和GPURenderBundle是用户录制(user-recorded)指令的容器。
    GPU执行编码在GPUCommandBuffer内的指令,通过pipeline来喂入数据。
    • 6.1)GPUCommandBuffer:由fixed-function和programmable stages混合组成。
      • Programmable stages执行shaders,shaders为设计运行于GPU硬件上的特定程序。shaders代码运行在GPU硬件的计算单元内。
    • 6.2)pipeline:大多数pipeline状态由GPURenderPipeline或GPUComputePipeline对象定义。
      不包含在pipeline对象中的状态则通过指令编码阶段设定,如beginRenderPass()或setBlendConstant()。
  • 7)GPUShaderModule包含着色器(shader)代码。
  • 8)GPUSampler或GPUBindGroup,用于配置GPU使用物理资源的方式。
  • 9)未来将通过Web Workers来支持多线程。

2. 坐标系统

渲染(rendering)操作可采用如下坐标系统:【注意,WebGPU的坐标系统 与 某graphics pipeline内的DirectX坐标系统 匹配。】

  • 1)归一化设备坐标(Normalized device coordinates(NDC)):具有3个维度:

    • − 1.0 ≤ x ≤ 1.0 -1.0\leq x \leq 1.0 1.0x1.0
    • − 1.0 ≤ y ≤ 1.0 -1.0\leq y \leq 1.0 1.0y1.0
    • 0.0 ≤ z ≤ 1.0 0.0\leq z \leq 1.0 0.0z1.0
    • 左下角坐标为 ( − 1.0 , − 1.0 , z ) (-1.0, -1.0, z) (1.0,1.0,z)
  • 2)Clip space坐标:具有4个维度 ( x , y , z , w ) (x,y,z,w) (x,y,z,w)

    • 2.1)Clip space坐标可:
      • 用作某vertex的clip position(即某vertex shader的position output)。
      • 用作clip volume。
    • 2.2)Clip space坐标 与 归一化设备坐标 之间的关系为:
      • 若point p = ( p . x , p . y , p . z , p . w ) p=(p.x,p.y,p.z,p.w) p=(p.x,p.y,p.z,p.w)在clip volume内,则其归一化设备坐标为 ( p . x ÷ p . w , p . y ÷ p . w , p . z ÷ p . w ) (p.x\div p.w, p.y \div p.w, p.z \div p.w) (p.x÷p.w,p.y÷p.w,p.z÷p.w)
  • 3)Framebuffer坐标:用于对framebuffer内的pixels进行寻址:

    • 3.1)具有2个维度。
    • 3.2)每个pixel在 x x x y y y维度的单位为1。
    • 3.3)左上角坐标为 ( 0.0 , 0.0 ) (0.0, 0.0) (0.0,0.0)
    • 3.4) x x x向右侧增长。
    • 3.5) y y y向下侧增长。
  • 4)Viewport坐标:在Framebuffer坐标 x , y x,y x,y维度的基础上,增加了depth z z z

    • 通常 0.0 ≤ z ≤ 1.0 0.0\leq z\leq 1.0 0.0z1.0,但可通过setViewport()来修改minDepth和maxDepth。
  • 5)Fragment坐标:与vIewport坐标匹配。

  • 6)UV坐标:用于sample textures,具有2个维度:

    • 0 ≤ u ≤ 1.0 0\leq u\leq 1.0 0u1.0
    • 0 ≤ v ≤ 1.0 0\leq v\leq 1.0 0v1.0
    • ( 0.0 , 0.0 ) (0.0, 0.0) (0.0,0.0)为texture内存地址顺序上的首个texel。
    • ( 1.0 , 1.0 ) (1.0, 1.0) (1.0,1.0)为texture内存地址顺序上的最后一个texel。
  • 7)Window坐标 或 present坐标:与framebuffer坐标匹配,用于与外部显示等接口交互。

3. WebGPU编程模型

3.1 Timeline

WebGPU的行为以“timeline”来表示。算法内的每个操作都发生在某timeline。timeline会明确定义操作顺序以及某操作对应某state。
WebGPU的timeline类型有:【Immutable value可用于任意timeline】

  • 1)Content timeline:与Web script执行关联。包含了调用本协议的所有方法。
  • 2)Device timeline:与User agent发布的GPU device operations关联。包括:
    • 创建adapters、devices、GPU resources以及state objects。从user agent角度来看,这些为经典的同步操作。
  • 3)Queue timeline:与GPU计算单元内的操作执行关联。包含实际运行在GPU之上的draw、copy、compute jobs。

如GPUDevice.createBuffer():

  • 1)用户填充GPUBufferDescriptor 并为其创建一个GPUBuffer。这发生在Content timeline。
  • 2)User agent在Device timeline创建一个底层buffer。

3.2 内存模型

一旦在应用初始化阶段获得了某GPUDevice,则可将WebGPU平台描述为如下层次:

  • 1)User agent:用于实现本协议。
  • 2)具有该设备底层原生API驱动的操作系统。
  • 3)实际的CPU和GPU硬件。

不同层次具有不同的内存类型,user agent在实现本协议时需考虑到:

  • 1)script-owned内存:如由script创建的某ArrayBuffer,通常对GPU驱动不可访问。
  • 2)user agenet可能有不同的进程来负责运行与GPU驱动的content和communication。此时,使用跨进程共享内存来传输数据。
  • 3)特定的GPU有其自身的高带宽内存,这些集成GPU通常与系统共享内存。

为使GPU的渲染或计算高效,大多数物理资源都以内存形式分配。当用户需要为GPU提供新数据时:【以下为最差情况,实际实现时,通常不需要跨越进程边界、或者可将驱动管理内存直接暴露给用户的ArrayBuffer,从而可避免数据拷贝。】

  • 1)数据可能首先得跨越进程边界,到达与GPU驱动通信的user agent部分。
  • 2)然后,可能需要使其对驱动可见,有时需要将其拷贝到驱动分配的staging memory中。
  • 3)最后,可能需要将数据传输到GPU专用内存中,可能会将内部layout转换为对GPU来说更可高效处理的方式。

所有以上数据转换同时通过WebGPU的user agentLai shixian d .

参考资料

[1] WebGPU——Draft 2023.7.17

http://www.lryc.cn/news/99416.html

相关文章:

  • React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式
  • 跨境独立站如何应对恶意网络爬虫?
  • C# SourceGenerator 源生成器初探
  • 网络安全/信息安全—学习笔记
  • 【Visual Studio】无法打开包括文件: “dirent.h”: No such file or directory
  • asp.net MVC markdown编辑器
  • 论文浅尝 | 预训练Transformer用于跨领域知识图谱补全
  • 算法工程师-机器学习面试题总结(2)
  • 低成本32位单片机空调内风机方案
  • 读发布!设计与部署稳定的分布式系统(第2版)笔记25_互联层之路由和服务
  • AI面试官:LINQ和Lambda表达式(二)
  • Mysql原理篇--第二章 索引
  • 保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识
  • 【iOS】单例、通知、代理
  • 从Vue2到Vue3【五】——新的组件(Fragment、Teleport、Suspense)
  • PostgreSQL——sql文件导入
  • [SQL挖掘机] - 全连接: full join
  • SpringDataJpa 实体类—主键生成策略
  • 【LeetCode 算法】Parallel Courses III 并行课程 III-拓扑
  • 进行消息撤回功能的测试时,需要考虑哪些?
  • C语言动态内存管理(三)
  • 通过cmake工程生成visual studio解决方案
  • STM32CubeMX配置STM32G031多通道ADC + DMA采集(HAL库开发)
  • Vue入门项目——WebApi
  • 【电源专题】电量计参数RSOC/RM/FCC定义
  • 实际开发中,React应用常见问题【持续更新中】
  • HTML5前端开发工程师的岗位职责说明(合集)
  • Go编写服务监管程序
  • API商品详情:详尽呈现产品信息的利器
  • Cisco 路由器配置管理