WebGL 与 WebGPU比对[6] - 纹理

最新推荐文章于 2025-04-01 20:54:27 发布
最新推荐文章于 2025-04-01 20:54:27 发布
阅读量384 收藏
点赞数
分类专栏： 漫谈 WebGPU 文章标签： 贴图 webgpu webgl texture
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cRGBc/article/details/123470129
版权
本文探讨了WebGL和WebGPU中纹理的创建、数据传递、着色器使用及Mipmapping技术。WebGL使用纹理对象，通过绑定、设置采样参数、数据写入与拷贝等操作。WebGPU引入了GPUTexture和纹理视图，提供了更灵活的数据写入与拷贝方法。两者在Mipmapping上有相似之处，但WebGPU不提供一键生成Mipmap的API。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

图形编程中的纹理，是一个很大的话题，涉及到的知识面非常多，有硬件的，也有软件的，有实时渲染技术，也有标准的实现等非常多可以讨论的。

受制于个人学识浅薄，本文只能浅表性地列举 WebGL 和 WebGPU 中它们创建、数据传递和着色器中大致的用法，格式差异，顺便捞一捞压缩纹理的资料。

1. WebGL 中的纹理

1.1. 创建二维纹理与设置采样参数

创建纹理对象 texture，并将其绑定：

const texture = gl.createTexture()
gl.bindTexture
了解本专栏 订阅专栏 解锁全文 超级会员免费看
WebGL 与 WebGPU比对[8] - 系列完结总结与感想
树后树前
03-14 2179
文章目录系列完结后记之后要做什么 系列完结后记 林林总总写了一些文章来对比 WebGL 与 WebGPU 的常规功能，兴许在 API 的理解上有些业余，甚至不排除有表述错误，但是写对的部分，我希望对读者与未来的图形开发者有所启迪。 过去，WebGL 给 Web 图形开发者打开了一扇新的大门： 原来浏览器可以不借助插件搞酷炫的三维效果！ 这离不开各大厂商的努力，虽然他们肯定有一部分原因是想更好卖产品，但不否认这的的确确是技术的迈进。 诚然，图形有门槛，WebGL 给这十年来的开发者留下一个蚀刻进骨子里的
WebGL 与 WebGPU比对[5] - 渲染计算的过程
树后树前
02-28 401
文章目录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 1636
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 的
WebGL 和WebGPU 有什么区别?
ZFZ5720
03-14 826
总之，WebGL和WebGPU都是用于在Web浏览器中进行图形渲染的技术，但它们在性能、功能、兼容性和未来发展方向等方面有所不同，开发人员可以根据具体需求来选择使用哪种技术。
webgl与webgpu比较
09-10 1402
WebGPU 虽然也有一个总管家一样的对象 —— device，类型是 GPUDevice，表示可以操作 GPU 设备的一个高层级抽象，它负责创建操作图形运算的各个对象，最后装配成一个叫 “CommandBuffer（指令缓冲，GPUCommandBuffer）”的对象并提交给队列，这才完成 CPU 这边的劳动。在 WebGL 中，始终会调用着色器的入口main函数，但在 WebGPU 中，当使用着色器时，可以指定要调用的函数。当然，仍然可以自己检查错误，但即使什么都不做，仍然可以获得一些有用的信息。
WebGPU vs. WebGL：前端图形技术的进化与数字孪生的崭新前景
weixin_44803406的博客
04-03 1851
在现代互联网时代，图形渲染在网页应用和数字孪生的开发中起着至关重要的作用。深度学习和AI集成：智能决策的未来 随着深度学习和人工智能的飞速发展，WebGPU的高性能计算能力将成为数字孪生模型中集成机器学习算法的理想平台。WebGPU：现代多核GPU的革命性进展 WebGPU是Web的下一代图形API，旨在为现代多核GPU提供更直接的访问，以实现更高的性能和更丰富的功能。可扩展性和云计算：大规模并行计算的云支持 WebGPU的并行计算能力使得数字孪生模型可以在云端进行大规模的并行计算，而无需昂贵的专用硬件。
WebGL 与 WebGPU比对[4] - Uniform
weixin_45566993的博客
02-19 1051
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比对[7] - 渲染的目的地
树后树前
03-14 435
文章目录1. 综述2. WebGL 中的绘图区3. WebGPU 中配置 canvas 的连接关于改变 canvas 大小后的行为 1. 综述 其实，写到第六篇比对基本上常规的 API 就差不多比对完了（除了 GPGPU、查询方面的 API 未涉及），但是有一个细节仍然值得我开一篇比对文章进行思考、记录，那就是渲染到何处。 WebGL 的上下文对象是与 canvas 元素强关联的，没有 canvas 创建不了上下文，也就是说，WebGL 在设计之初就是拿来绘图的（的确如此），没考虑 GPU 的其它功能，后
6. WebGPU 纹理(Textures )
xuejianxinokok的专栏
06-12 1610
纹理通常表示二维图像。二维图像只是颜色值的二维数组，因此您可能想知道，为什么需要二维数组的纹理？可以将存储缓冲区用作二维数组。纹理的特别之处在于它们可以通过称为。
探索 WebGPU — Web 开发的最新高性能图形接口
桂月二二博客
01-02 1248
WebGPU 是一个由 W3C GPU for the Web Community Group 推动的标准，旨在替代 WebGL 和 WebGL 2。它使用现代 GPU 的计算和图形能力，提供更高效的性能和更灵活的设计。
WebGPU[4] 纹理三角形
weixin_48967543的博客
04-05 178
代码见：https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/04-texture-triangle 原创，发布日 2021年4月5日，@秋意正寒。若代码失效请留言，或自行到官网根据最新 API 修改。 数据预览免费优惠券 m.cps3.cn NDC 坐标和 纹理坐标（原点、朝向、值域）基础不再补充。 0.1 VBO const vbodata = new Float32Array([ -1.0, -1.0, 0.0,..
WebGPU 规范篇 04 纹理
树后树前
09-22 213
系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614 文章目录1 纹理的创建举例创建时参数不合法的情况2 纹理视图 GPUTextureView创建时参数不合法的情况*简述创建过程3 纹理格式 GPUTextureFormat4 为纹理输入图片/视频数据使用 GPUQueue.copyExternalImageToTexture 方法使用 GPUQueue.writeTexture 方法使用 GPUDevice.importExterna
WebGPU和WebGL详细区别初识
cuijiying的博客
12-27 1192
WebGPU 和 WebGL 是用于在浏览器中实现图形渲染的两种 API，它们在设计理念、功能特性和应用场景上存在显著差异
作为web3D的核心，webGL会被webGPU取代吗？
贝格前端工场的博客
08-16 1256
WebGPU技术是WebGL的进一步发展，它是一种新的Web图形API标准，旨在为Web开发者提供更高级别的图形编程接口，以获得更好的性能和更多的图形功能。WebGPU的设计目标是提供一种低级别的、跨平台的图形和计算API，以便开发者可以更好地利用现代GPU硬件的能力。更高级别的抽象：相比WebGL，WebGPU提供了更高级别的图形编程接口，简化了开发者的工作。更好的性能：WebGPU旨在提供更好的性能和更低的延迟，以满足对图形和计算性能要求更高的应用场景。
WebGPU 纹理与纹理类型基础 （D3D对纹理的描述比较详细）
fatcat123的博客
06-09 1522
文中对纹理的概念做了详细讲解，介绍了一维纹理，二维纹理，三维纹理，纹理数组的概念和逻辑表示。
计算机图形学笔记：从 WebGL 到 WebGPU
小谷的日常随笔集
01-27 2474
目前 WebGPU 的标准还没有完全确定下来，需要下载开发者版本的 Chrome Canary 才能开启 WebGPU。(目前正式版中 Chrome 96 / 97 其实已经支持 WebGPU了，但并不是完全支持，98 (据说）会正式支持 WebGPU）。 WebGL 与 WebGPU WebGL 的基础是 OpenGL。OpenGL 的初始版本可以追溯到 1992 年，整个 OpenGL 的设计是基于状态机模型。状态驱动的 OpenGL 难以利用今天 GPU 并行的特点。对于今天的多核计算的设备，使用.
WebGPU 到底是什么?
hsany330的专栏
06-14 3955
顾名思义，WebGPU是GPU硬件（显卡）向Web（浏览器）开放的低级应用程序接口（API），包括图形和计算两方面的接口。而WebGL是OpenGL ES低级3D图形API的Web版本。WebGPU和WebGL两者都是对GPU功能的抽象，都是为了提供操作GPU的接口。区别主要在于： WebGPU是基于Vulkan、Metal和Direct3D 12，而WebGL基于OpenGL。前者的引擎较新，设计上更好的反映了GPU硬件技术这些年新的发展，能提供更好的性能，支持多线程，采用了偏面向对象的编程风格。 我
WebGL 入门-WebGL简介与3D图形学
10-31 854
什么是WebGL？ WebGL是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。 WebGL基于OpenGL ES 2.0，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通...
Open GL ES -＞纹理贴图，顶点坐标和纹理坐标组合到同一个顶点缓冲对象中进行解析
最新发布
sunshine_guo的博客
04-01 305
Open GL ES -＞纹理贴图，顶点坐标和纹理坐标组合到同一个顶点缓冲对象中进行解析的Kotlin代码
webgl与webgpu对比
04-20
WebGL 和 WebGPU 都是用于在浏览器中实现图形渲染的技术，但它们有许多不同之处。WebGL 是一种基于OpenGL的API，主要用于在浏览器中渲染3D和2D图像。它是使用GLSL（OpenGL Shading Language）进行着色和渲染的。WebGPU则是一种全新的、可编程的3D图形API，目前还在标准化进程中。它将会利用现代硬件的特性，以更高效的方式渲染图像。与WebGL相比，WebGPU采用了异步计算方式，支持更多的GPU计算机制，效率更高。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值