WebGL 和 WebGPU[2] - 初始化篇

岭南灯火

已于 2022-02-09 15:46:09 修改

阅读量848

点赞数

CC 4.0 BY-SA版权

分类专栏：漫谈 WebGPU 文章标签： webgl webgpu

于 2022-02-09 15:45:25 首次发布

本文链接：https://blog.youkuaiyun.com/cRGBc/article/details/122843567

漫谈 WebGPU 专栏收录该内容

34 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文对比了WebGL和WebGPU在初始化过程中的异同，重点介绍了如何获取WebGL的上下文对象和WebGPU的设备对象。WebGPU通过GPUAdapter和GPUDevice进行操作，支持在WebWorker中使用，且在请求设备时可指定性能和功能需求。

文章目录

1. 获取高频操作对象
- 1.1 WebGL 获取上下文对象
- 1.2 WebGPU 获取设备对象
2. 初始化参数的异同
3. 总结

1. 获取高频操作对象

1.1 WebGL 获取上下文对象

WebGL 获取的是 WebGLRenderingContext/WebGLRenderingContext2 对象，必须依赖于有合适宽度和高度的 HTMLCanvasElement，通常命名为 gl，gl 变量有非常多方法，允许修改 WebGL 的全局状态

const gl = document.getElementById("id")?.getContext("webgl"

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

岭南灯火

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

WebGL 与 WebGPU比对[5] - 渲染计算的过程

树后树前

02-28

492

文章目录1. WebGL1.1. 使用 WebGLProgram 表示一个计算过程1.2. WebGL 没有通道 API2. WebGPU2.1. 使用 Pipeline 组装管线中各个阶段2.2. 使用 PassEncoder 调度管线内的行为2.3. 使用 CommandEncoder 编码多个通道2.4. PassEncoder 和 Pipeline 的关系3. 总结前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的（纹理留到下一篇），当渲染所需的原材料

WebGL 与 WebGPU 比对[1] 前奏

「虚幻私塾」

01-15

1699

Python微信订餐小程序课程视频 https://edu.youkuaiyun.com/course/detail/36074 Python实战量化交易理财系统 https://edu.youkuaiyun.com/course/detail/35475 目录* 1 为什么是 WebGPU 而不是 WebGL 3.0 + 显卡驱动 + 图形 API 的简单年表 + WebGL 能运行在各个浏览器的原因 + WebGPU 的名称由来 2 与 WebGL 比较编码风格 OpenGL 的编码风格 CPU 负载问题 WebGPU 的

参与评论您还未登录，请先登录后发表或查看评论

WebGPU与WebGL全方位对比：为什么现在是迁移时机？

最新发布

gitblog_00376的博客

09-22

734

你是否还在为WebGL的性能瓶颈而烦恼？是否因过时的API设计而被迫编写冗长的兼容性代码？WebGPU的出现正在彻底改变这一现状。作为新一代Web图形API，WebGPU不仅带来了2-5倍的性能提升，更重新定义了浏览器与GPU的交互方式。本文将从架构设计、性能表现、开发体验和未来趋势四个维度，深入对比WebGPU与WebGL的核心差异，为你提供一份详尽的迁移指南。读完本文，你将能够： - 清晰理...

webGL和webGPU 对比，短期看二者共存，长期看webGPU 取代webGL

2401_82881178的博客

03-06

1521

WebGL 和 WebGPU 是两种用于在浏览器中实现图形渲染和计算的 Web API，但它们在设计目标、技术能力和适用场景上有显著差异，近期webGL独大，中期webGPU上位，远期取代webGL。

WebGL 与 WebGPU

o67f2wpkvdf3bpe8的博客

06-10

484

WebGPU是一种新的Web标准，旨在为Web开发人员提供更高效、更灵活和更现代的图形编程接口。WebGPU具有以下优势：更高效：WebGPU使用GPU来加速图形处理，从而提供比传统的Web图形API更高的性能。更灵活：WebGPU提供了更灵活的编程模型，使开发人员可以更轻松地控制GPU操作，以及更好地利用GPU并行性。更现代：WebGPU利用了现代GPU的功能，包括异步计算、纹理压缩和着色器模块化等特性，这使得它成为开发更现代Web应用程序的理想选择。

初始WebGL

mhc20201554114的博客

09-12

185

光栅: 几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。像素: 一个像素对应图像上的一个点它通常保存图像上的某个具体位置的颜色等信息。帧缓存: 在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。CPU: 中央处理单元，负责逻辑计算。GPU: 图形处理单元，负责图形计算。由于cpu串行处理，因此在计算图形时并不好用，因为图形计算要计算大量的简单的计算。

WebGL 初始化着色器

dabaooooq的博客

09-21

655

1. 创建着色器对象（gl.createShader（））。2. 向着色器对象中填充着色器程序的源代码（gl.shaderSource（））。3. 编译着色器（gl.compileShader（））。4. 创建程序对象（gl.createProgram（））。5..为程序对象分配着色器（gl.attachShader（））。6. 连接程序对象（gl.linkProgram（））。7. 使用程序对象（gl.useProgram（））。虽然每一步看上去都比较简单，但是放在一起显得复杂了，我们将逐条讨论。首先，你

从WebGL迁移到WebGPU

ms44的专栏

09-22

1367

迁移到即将推出的 WebGPU 不仅仅意味着切换图形 API。这也是迈向 Web 图形未来的一步。但如果做好准备并理解，迁移将会更加顺利 — 本文将帮助您做好准备。/wp:image在本文中，我们将讨论 WebGL 和即将推出的 WebGPU 之间的区别，并阐述如何为项目迁移做好准备。

WebGL 与 WebGPU比对[4] - Uniform

weixin_45566993的博客

02-19

1125

Python微信订餐小程序课程视频 https://edu.youkuaiyun.com/course/detail/36074 Python实战量化交易理财系统 https://edu.youkuaiyun.com/course/detail/35475 目录* 1. WebGL 1.0 Uniform + 1.1. 用 WebGLUniformLocation 寻址 + 1.2. 矩阵赋值用 uniformMatrix[234]fv + 1.3. 标量与向量用 uniform[1234][fi][v] + 1.4. 传递纹理

计算机图形学笔记：从 WebGL 到 WebGPU

小谷的日常随笔集

01-27

2597

目前 WebGPU 的标准还没有完全确定下来，需要下载开发者版本的 Chrome Canary 才能开启 WebGPU。(目前正式版中 Chrome 96 / 97 其实已经支持 WebGPU了，但并不是完全支持，98 (据说）会正式支持 WebGPU）。 WebGL 与 WebGPU WebGL 的基础是 OpenGL。OpenGL 的初始版本可以追溯到 1992 年，整个 OpenGL 的设计是基于状态机模型。状态驱动的 OpenGL 难以利用今天 GPU 并行的特点。对于今天的多核计算的设备，使用.

【超图】SuperMap iClient3D for WebGL/WebGPU ——地形影像

冰美式当作酒

12-19

2467

作者：taco对于一个代码小白来讲，设置可能是刚接触开发的人（还没接触准备接触）的人来说。对于读代码或是在对产品的使用上会存在许许多多的疑惑。接下来的话准备开个新坑，帮大家了解超图官方示例中不同功能的数据是如何制作的。每一句代码都是什么意思。方便大家更好的入门。更好的开发。本系列博客从示例代码直接入手，关于环境配置，下载等内容。可以参考以前的博客——新产品使用指南中环境配置相关部分。

[WebGL入门]七，context的初始化

热门推荐

lufy小屋

08-01

1万+

这一次，只是获取一下WebGL的context，然后将使用黑色将画面清空一下。但是事实上，这样就可以开始使用WebGL了。接下来，会更具体更详细的介绍WebGL相关的处理，但不管做什么，基础都是很重要的，这次的内容还是需要彻底理解一下的。

webgl与webgpu比较

09-10

1908

WebGPU 虽然也有一个总管家一样的对象 —— device，类型是 GPUDevice，表示可以操作 GPU 设备的一个高层级抽象，它负责创建操作图形运算的各个对象，最后装配成一个叫 “CommandBuffer（指令缓冲，GPUCommandBuffer）”的对象并提交给队列，这才完成 CPU 这边的劳动。在 WebGL 中，始终会调用着色器的入口main函数，但在 WebGPU 中，当使用着色器时，可以指定要调用的函数。当然，仍然可以自己检查错误，但即使什么都不做，仍然可以获得一些有用的信息。

从WebGL到WebGPU

qq_34754747的博客

11-16

833

1、Chrome和safari最多同时使用16个WebGL画布，Firefox最多可创建200个，而WebGPU画布没有限制。2、WebGPU可以共享纹理，将 GPUDevice 对象输出到任意数量的画布。

WebGL 和WebGPU 有什么区别?

ZFZ5720

03-14

1016

总之，WebGL和WebGPU都是用于在Web浏览器中进行图形渲染的技术，但它们在性能、功能、兼容性和未来发展方向等方面有所不同，开发人员可以根据具体需求来选择使用哪种技术。

WebGpu VS WebGL

ygtu2018的博客

08-29

362

首先是Web 和 WebGPU 上的图形简史.如果您还没有阅读，请阅读 - 这篇文章在很大程度上是从那篇文章开始的。我将介绍WebGPU在实践中与WebGL的比较，我在Web游戏引擎Construct中添加WebGPU支持时学到的东西，以及它对未来的意义。

初识web3D--webGL/webGPU

weixin_43980651的博客

07-04

2938

当今互联网时代，我们已经逐渐习惯了浏览和享受丰富多样的网络内容。从文字、图片到视频，我们可以在Web上畅游于各种信息和娱乐资源之间。然而，随着科技的不断进步，一个全新而令人兴奋的概念正在崭露头角——Web3D。Web3D是一种革命性的技术，它将三维图形、虚拟现实和互联网融为一体，为用户带来前所未有的沉浸式体验。无需离开我们熟悉的浏览器，我们可以穿越虚拟的景观、与三维模型互动，甚至在虚拟现实中体验全新的世界。想象一下，你可以在浏览器中漫步于古老的城堡，探索神秘的森林，或者在沙滩上与海豚嬉戏。

从WEBGL 迁移到 WEBGPU

fatcat123的博客

01-13

1847

本文介绍从webgl 迁移到 webgpu的要点，指出了webGL 与 WebGPU 在着色器方面，顶点属性，资源传递，渲染管线等方面的不同。

作为web3D的核心，webGL会被webGPU取代吗？

贝格前端工场的博客

08-16

1480

WebGPU技术是WebGL的进一步发展，它是一种新的Web图形API标准，旨在为Web开发者提供更高级别的图形编程接口，以获得更好的性能和更多的图形功能。WebGPU的设计目标是提供一种低级别的、跨平台的图形和计算API，以便开发者可以更好地利用现代GPU硬件的能力。更高级别的抽象：相比WebGL，WebGPU提供了更高级别的图形编程接口，简化了开发者的工作。更好的性能：WebGPU旨在提供更好的性能和更低的延迟，以满足对图形和计算性能要求更高的应用场景。

webGL，webGPU，unity3D和UE4

05-22

// 示例代码片段：初始化一个基本的 WebGL 上下文 function initWebGL(canvasId) { const canvas = document.getElementById(canvasId); let gl; try { gl = canvas.getContext('webgl') || canvas.getContext('...