14. Html5的局:WebGL的纹理格式

简介: #紧接上文 WebGL作为通用的标准,屏蔽了一些硬件厂商的高级特性,有舍就会有取,那么在一些比较常用的功能上,如果硬件无法满足通用,那么就会通过CPU来弥补硬件的不足。 图片的纹理格式,就是其中的一个点。 #常见的纹理格式 我们引用12章:[WebGL跨平台的取与舍](http://www.atatech.org/articles/45792)的图片: ![screenshot](h

紧接上文

WebGL作为通用的标准,屏蔽了一些硬件厂商的高级特性,有舍就会有取,那么在一些比较常用的功能上,如果硬件无法满足通用,那么就会通过CPU来弥补硬件的不足。
图片的纹理格式,就是其中的一个点。

常见的纹理格式

我们引用12章:WebGL跨平台的取与舍的图片:
screenshot
这些在OpenGL平台都是支持的,但在WebGL中做了裁剪。

裁剪了纹理格式

screenshot

这些格式在FireFox中严格的不支持,但在WebKit中,WebKit虽然在代码上支持了这些格式,最终是否支持,看各个平台的硬件特性了。

裁剪了纹理的类型

screenshot

没想到纹理还有浮点数格式。。

仅支持以下格式和类型

screenshot
上图列出的是主要支持的纹理格式和类型,其他类型也可能支持,最好不要使用。

纹理的扩展格式

在WebGL的使用中,我们会经常使用以下三种纹理参数:
screenshot

UNPACK_FLIP_Y_WEBGL

众所周知,OpenGL的原点坐标在屏幕的左下角,X轴向右,Y轴向上,Z轴向外。
在OS的世界中,坐标原点在屏幕左上角,X轴向右,Y轴向下,Z轴向外。
这样导致我们使用一张图片的时候,默认是从左上角为bitmap的起始点。这样到了OpenGL的世界,就变成了上下颠倒的图片,本质就是Y轴翻转导致。

UNPACK_PREMULTIPLY_ALPHA_WEBGL

为了提供OpenGL的性能,我们在CPU中提前把颜色的alpha乘以RGB,OpenGL在显示时,无需每次实时技术RGB颜色通道,进一步提升GPU性能。

UNPACK_ALIGNMENT

纹理像素的对齐参数,比如上图中我们提到GL_RGB是3个字节的长度,如果图片是3x3大小,那么数据在内存中,以GL_unsigned_byte为单位存储,大小为:9*9。
在OpenGLES1.0的时代,纹理大小只能是2的整数倍,这样的图片在OpenGL中是无法识别的。就要做转换:

  1. GL_RGBA:转换后,每个像素成为4个字节
  2. GL_RGB:不转换,图片的每行,我们增加一个byte。在增加一个空白行,成为10x10的图片
  3. ALIGNMENT:在OpenGL ES2.0以后可以设置UNPACK_ALIGNMENT,它表示像素对齐最小公因子,我们设置为1,告诉GPU只要是1的整数倍即可。(这点会影响GPU的性能,因为GPU也像CPU一样,喜欢字节对齐的数据)

总结

看完了WebGL的纹理格式,就会发现,很多已经成熟的技术制作的3D模型,如果格式或者类型不匹配,就会导致WebGL出现兼容性问题,无法显示图片,甚至会出现崩溃。
遇到问题的同学,请牢记以上信息。

下一回

看完了这些,感觉很简单的样子。仔细看看:
UNPACK_FLIP_Y_WEBGL
UNPACK_PREMULTIPLY_ALPHA_WEBGL
是不是末尾都添加了WebGL得标志?
对的,这些不是OpenGL的功能,是CPU帮忙我们实现的,如果同学们直接使用OpenGL开发,那么就有可能在WebGL上不兼容。
另外,还记得上一节中我们提到的吗:

void glTexImage2D (GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels);

internalformat和format到底存在什么关系?如果他们真的必须保持一致,那么这个接口只需要写一个参数就好了,何必要预留两个入参呢?难道程序员脑袋秀逗了?

想要弄清楚,请持续关注下一章,我们一起看看CPU是如何做格式转换的。

相关实践学习
基于阿里云DeepGPU实例,用AI画唯美国风少女
本实验基于阿里云DeepGPU实例,使用aiacctorch加速stable-diffusion-webui,用AI画唯美国风少女,可提升性能至高至原性能的2.6倍。
目录
相关文章
|
1月前
|
Java 网络安全 数据安全/隐私保护
javaMai+Springl实现给QQ邮箱发邮件(带附件,html格式)
javaMai+Springl实现给QQ邮箱发邮件(带附件,html格式)
11 0
webp格式图片在html里不显示的解决方法
webp格式图片在html里不显示的解决方法
1200 0
webp格式图片在html里不显示的解决方法
|
1月前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
|
8月前
|
Web App开发 移动开发 iOS开发
如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
119 0
|
5月前
|
XML 数据采集 JavaScript
基于.Net开源Html解析器,此外还支持SVG、XML等格式
基于.Net开源Html解析器,此外还支持SVG、XML等格式
24 0
|
6月前
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
36 0
|
7月前
|
存储 移动开发 数据可视化
使用 WebGL 为 HTML5 游戏创建逼真的地形
在本文中,我将分享我们应对这些有趣挑战之一的方法:一种创建逼真的大型地形的简单方法。
49 0
|
9月前
|
测试技术
08-Jmeter生成HTML格式报告
08-Jmeter生成HTML格式报告
|
10月前
|
JSON JavaScript 小程序
微信小程序网络请求api中HTML格式问题
微信小程序网络请求api中HTML格式问题
106 0
|
10月前
|
JSON 数据格式
vscode自定义HTML页面自动生成格式
vscode自定义HTML页面自动生成格式
108 0