openGL之API学习(一九一)webgl到webgpu

WebGPU是W3C正在开发的一个新标准,旨在为Web提供现代3D图形和计算能力,基于Vulkan、Metal和Direct3D 12。不同于WebGL,WebGPU设计为高性能API,跨越移动和桌面平台。谷歌、苹果、Mozilla等公司参与其开发,推动了从WebGL到WebGPU的转变,预示着网页图形的新时代。

WebGPU是未来用于加速图形和计算的web标准和JavaScript API的工作名称,旨在提供“现代3D图形和计算能力”。它是由W3C的GPU为来自苹果、Mozilla、微软、谷歌和其他公司的工程师开发的

与WebGL不同,WebGPU不是任何现有的本地API的直接端口。它基于Vulkan、Metal和Direct3D 12中的概念,旨在为这些跨移动和桌面平台的现代图形api提供高性能

2016年6月8日,谷歌向WebGL工作组展示了“显式web图形API”(在两年一次的面对面会议期间)。探讨了构建一个新的API来最终取代WebGL的基本思想和原则,即“WebGL Next”。

2017年1月24日,在温哥华举行的WebGL工作组会议上,Khronos主持了一场旨在讨论“WebGL Next”想法的无ip会议(IP-free meeting)。谷歌团队展示了NXT原型,实现了一个新的API,它可以在基于OpenGL的Chromium中运行,也可以在OpenGL和Metal中独立运行。NXT借鉴了所有Vulkan、Direct3D 12和Metal原生api的概念。苹果和Mozilla的代表也展示了他们基于Safari和Servo的原型,这两款产品都与Metal API非常相似。

2017年2月7日,苹果公司的WebKit团队提议成立W3C社区小组来设计API。与此同时,他们以“WebGPU”的名义宣布了一项概念和提案的技术证明,该证明基于苹果公司的Metal概念。这个WebGPU的名字后来被社区团体采用作为未来标准的工作名称,而不仅仅是苹果最初的提议。为了避免更多的混乱,最初的提议被重命名为“WebMetal”

W3C的“WebGPU”社区组织于2017年2月16日成立。此时,所有的Apple、谷歌和Mozilla都在该领域进行了试验,但只有Apple的建议被正式提交到“gpuweb-proposal”存储库。不久之后,在2017年3月21日,Mozilla在Khronos储存库中提交了一个WebGL Next的提案,基于Vulkan的设计。

2018年6月1日,谷歌的Chrome团队以跨浏览器标准化工作中“最高层问题的解决方案”为例,宣布了实施未来WebGPU

### WebGLWebGPU与Naga的关系及差异 #### 技术概述 WebGL 是一种基于 OpenGL ES 的 JavaScript API,用于在网页浏览器上渲染高性能交互式的 3D 和 2D 图形[^1]。它允许开发者通过 HTML5 Canvas 元素来创建复杂的图形效果。 WebGPU 则是一个更现代的接口设计,旨在提供更高性能和更低延迟的操作方式给 GPU 访问。相比起 WebGL, WebGPU 提供了一个更加接近底层硬件抽象层 (HAL) 的编程模型,这使得应用程序能够更好地利用当代显卡的能力并实现更高的效率。 Naga 是一个开源项目,主要作用是对着色器代码进行编译优化以及验证等工作。它可以处理多种输入格式(如 GLSL、WGSL),并将它们转换为目标平台所需的中间表示形式(IR),从而简化跨不同环境下的开发流程。 #### 性能对比 由于 WebGPU 设计之初就考虑到了多线程支持等问题,在某些场景下可以显著优于 WebGL 表现;而 Naga 主要专注于提高着色器程序的质量而非直接影响运行时性能。因此当涉及到具体应用中的实际表现时,更多取决于所使用的算法和技术细节而不是单纯依赖于某项特定标准本身。 #### 使用案例分析 对于希望快速构建简单视觉特效或游戏原型的新手来说,WebGL 可能仍然是最容易入门的选择之一因为它有着丰富的社区资源和支持文档可供参考学习。然而如果追求极致的画面质量和流畅度,则应该关注 WebGPU 发展趋势,并尝试将其引入到自己的项目当中去探索其潜力所在。 至于 Naga ,虽然不直接参与最终图像呈现过程之中,但在任何需要频繁编写复杂着色逻辑的地方都能发挥重要作用——无论是为了确保兼容性还是提升执行速度等方面都不可或缺。 ```javascript // 示例:使用WebGL绘制三角形 const canvas = document.getElementById('glcanvas'); const gl = canvas.getContext('webgl'); if (!gl) { console.error('无法初始化 WebGL'); } // 创建顶点着色器源码 const vertexShaderSource = ` attribute vec4 aVertexPosition; void main(void) { gl_Position = aVertexPosition; } `; // 编译着色器... ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值