Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

    • 服务端

    • 跨端技术

    • Web IDE

    • 中后台

    • 动效渲染

      • Canvas

      • WebGL

      • WebGPU

        • WebGPU 介绍
          • WebGPU 是什么
          • 为什么会出现 WebGPU
          • WebGPU vs WebGL
          • 如何学习 WebGPU
          • WebGPU 未来的发展方向
          • 参考资料
      • Web动画

      • 动效方案

    • 可视化

    • 埋点监控

    • 多媒体

    • 桌面技术

    • 游戏互动

    • 编辑器

    • 虚拟化与容器化

    • 设计系统

  • 业务场景

  • 大前端
  • 专业领域
  • 动效渲染
  • WebGPU
gahing
2023-06-26
目录

WebGPU 介绍草稿

  1. WebGPU 是什么以及出现的原因
  2. WebGPU 和 WebGL 的区别与联系
  3. 如何学习 WebGPU
  4. WebGPU 未来的发展方向

# WebGPU 是什么

WebGPU 是一套基于浏览器的图形 API,内部封装了现代 GPU API(微软的 Dx12、苹果的 Metal、科纳斯组织的 Vulkan),提供了更强大的 GPU 运算能力

# 为什么会出现 WebGPU

一句话:跨平台的 OpenGL 方案维护困难&进展缓慢,各大平台选择自研原生的 GPU API。主流平台支持上后,Web 直接打包这套 API 就直接实现了 WebGPU。

# WebGPU vs WebGL

兼容性、性能

webgpu 那套东西也是裁剪了不少现代图形api的功能, 也不是全部都用, 那么这就要求封装出另一套东西,像webgl一样。

# 如何学习 WebGPU

  • 新手教程:MDN (opens new window)

# WebGPU 未来的发展方向

一定会取代 WebGPU ,现在的 WebGL 三方库也在迭代成 WebGPU 版本了

# 参考资料

  • WebGPU 到底是什么? - Orillusion的回答 - 知乎 (opens new window)
  • WebGPU 的概念与使用 (opens new window)
编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
利用 WebGL 给图片增加光影效果
浅谈 Web 动画

← 利用 WebGL 给图片增加光影效果 浅谈 Web 动画→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式