logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 画布
    • 简介
    • 初始化参数
    • 场景图能力与生命周期
    • 内置对象
    • 坐标系
    • 画布事件
    • OffscreenCanvas 和服务端渲染
    • CustomElementRegistry
    • 常见问题
  • 渲染器
    • 简介
    • Canvas 渲染器
    • Canvaskit 渲染器
    • SVG 渲染器
    • WebGL 渲染器
    • WebGPU 渲染器
    • 自定义渲染器
  • 相机
    • 简介
    • 相机参数
    • 相机动作
    • 相机动画
  • 事件
    • 简介
    • 事件对象
    • 手势和拖放
    • 常见问题
  • 动画
    • Web Animations API
    • Lottie 动画
  • 基础图形
    • 基础概念
    • DisplayObject
    • Group 图形分组
    • Text 文本
    • Circle 圆形
    • Ellipse 椭圆
    • Rect 矩形
    • Image 图片
    • Line 直线
    • Polygon 多边形
    • Polyline 折线
    • Path 路径
    • HTML 内容
  • 样式系统
    • 简介
    • 继承机制
    • CSS Typed OM
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 三维世界
    • 材质
    • 几何
    • 光源
    • Mesh
    • 雾
    • 交互
  • 内置对象
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • 工具方法
  • GPGPU
    • 简介
    • 编程模型
    • Kernel API
    • 经典 GPGPU 的实现原理
    • webgpu-graph
  • 声明式用法
    • 使用 Web Components
  • 开发调试工具
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

经典 GPGPU 的实现原理

上一篇
Kernel API
下一篇
webgpu-graph

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

使用图形渲染 API 实现的经典 GPGPU 的原理可以简单总结为:用纹理映射实现的科学计算 (compulation by texturing)。考虑到兼容性,我们在 WebGL 中也使用了这个方式。

下图来自:「GPGPU 编程技术 - 从 GLSL、CUDA 到 OpenCL」 image

渲染到纹理

通常来说图形渲染 API 最终的输出目标就是屏幕,显示渲染结果。但是在 GPGPU 场景中我们只是希望在 CPU 侧读取最终的计算结果。因此会使用到渲染 API 提供的离屏渲染功能 --- 渲染到纹理,其中的关键技术就是使用帧缓存对象(Framebuffer Object - FBO)作为渲染对象。

但是这种方式存在一个明显的限制,对于所有线程,纹理缓存要么是只读的,要么就是只写的,没法实现一个线程在读纹理,另一个在写纹理。本质上是由 GPU 的硬件设计决定的,如果想要实现多个线程同时对同一个纹理进行读/写操作,需要设计复杂的同步机制避免读写冲突,势必会影响到线程并行执行的效率。

因此在经典 GPGPU 的实现中,通常我们会准备两个纹理,一个用来保存输入数据,一个用来保存输出数据。这也是为何我们只允许使用一个 @out 声明来输出变量。

我们的数据存储在显存中,使用 RGBA 的纹理格式,每一个图元包含 4 个通道,因此在 GWebGPU 中使用 vec4[] 是最省内存的数据格式。如果使用 float[],每个图元中 GBA 三个通道就被浪费了。当然数据类型的决定权在开发者,可以根据实际程序中访问方便程度决定。

调用绘制命令

我们的计算逻辑写在片元着色器(Fragment Shader)中,在渲染管线的光栅化阶段,每个像素被分配给一个线程进行着色,达到并行效果。

如果映射到 CPU 中的计算概念,纹理可以看作是数组,而片元着色器执行的程序就是循环语句。

什么是纹理映射

一个 3D 模型由很多个三角面组成,理论上每个三角面都可以继续无限细分,但给每个三角面着色是很消耗性能的。更快的做法是贴图,把一张二维位图(纹理)贴在模型的表面,这个过程就是纹理映射。我们不需要为模型每一个顶点定义纹理坐标,只需要定义四个角的坐标,剩余的交给渲染管线做插值即可。

乒乓技术

很多算法需要连续运行多次,例如 G6 中使用的布局算法需要迭代多次达到稳定状态。上一次迭代中输出的计算结果,需要作为下一次迭代的输入。在实际实现中,我们会分配两张纹理缓存,每次迭代后对输入和输出纹理进行 swap。

参考资料

  • 「GPGPU 编程技术 - 从 GLSL、CUDA 到 OpenCL」🔗
  • http://www.vizitsolutions.com/portfolio/webgl/gpgpu/