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

紧接上文

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

常见的纹理格式

我们引用12章:WebGL跨平台的取与舍的图片:

这些在OpenGL平台都是支持的,但在WebGL中做了裁剪。

裁剪了纹理格式

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

裁剪了纹理的类型

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

仅支持以下格式和类型


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

纹理的扩展格式

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

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是如何做格式转换的。

时间: 2024-11-08 23:28:03

14. Html5的局:WebGL的纹理格式的相关文章

15. Html5的局:WebGL的纹理格式的转换

紧接上文 WebKit为了统一WebGL的书写规范,对OpenGL的标准进行四书五入,推出了平台无关的API标准,同时为了简化底层硬件的差异,又新增了一些纹理格式的支持,由内核提供高性能的图像转换,扩展了OpenGL得标准. 那么,WebGL在底层做了些什么呢?复杂吗?可以自己实现吗? 纹理格式转换计算量大 这是WebGL为前端同学提供的福利,上层开发可以更加专注业务书写,充分挖掘C/C++语言的能力. UNPACK_FLIP_Y_WEBGL 重新生成一张内存图片,将纹理像素上下颠倒的复制到新图

12. Html5的局:WebGL跨平台的取与舍

紧接上文 在阅读WebKit源码中,讨论了Canvas在iOS平台使用的CoreGraphics框架作为渲染的工具,它运行在CPU上.WebGL是直接运行在GPU上的API,因此优化空间更大,对程序员要求更高.这次我们看看,WebGL如何对格式转换的,为我们后续three.js导入数据模型做铺设. 常见的纹理格式 OpenGL ES2.0在多终端的差异 在WebKit中,默认支持纹理格式,主要有: 现实却是很残酷,iOS设备以上格式都是支持的,Android设备差异化就不同了,简单的说,要想确认

Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 我等 Web 前端之外行,解决起来这类问题,确实有些辣手! 幸好,还能查到一些有

19. Html5的局: 手把手写一个100行的VR程序

紧接上文 WebVR扩展了WebGL的标准,增加了HMD.PS等组件,让开发者可以在H5上开发VR程序.高级VR设备往往拥有了比手机更高精度的传感器.显示器.GPU等,让用户可以更加真实的感受虚拟世界.本节是<Html5的局>最后一节,我们手把手的写一段VR代码,感受WebVR的便捷. 本次Demo所需二维码 用户可以本地启动HTTP服务,将URL填写到播放路径 3D地球 环境准备 Three.js 到http://www.threejs.org下载最新源码,这里使用three.min.js作

ETC1压缩纹理格式详解

本来以为,ETC1作为Android 设备的OpenGL标准,开源且最常用的的一种压缩纹理格式,总会有人去翻译一下khronos的文档,读一下代码,给大家作个普及的,不料就是搜不到.没办法,尽管英文不好,还是硬啃了下文档,把 ETC1压缩纹理的实现原理弄清楚了. https://www.khronos.org/registry/gles/extensions/OES/OES_compressed_ETC1_RGB8_texture.txt 至于什么是压缩纹理,如何使用,可以参考: http://

手机游戏开发中如何选择适合的纹理格式

为毛要写这个 本来觉得像这样的问题,是无法归类的,因为不同的项目有不同的需求,但今天因为quick论坛中的一个技术疑问贴,钩起了我整理这篇文章的兴趣 http://www.cocoachina.com/bbs/read.php?tid=214811 于是,我决定尽力描述一下纹理格式选择方面的问题,一是起到一个科普的作用,因为目前没有发现十分完整的讲这方面的文章.二是整理一下自己的思路. 当然,这些东西肯定不是我自己凭空YY出来的,我也是参考了不少文章,也从项目中总结了一些问题.在此先列出一些链接

c# 怎么获取当前时间 比如今天是2015年9月10号 14点30分 我想的格式是

问题描述 c# 怎么获取当前时间 比如今天是2015年9月10号 14点30分 我想的格式是 c# 怎么获取当前时间 比如今天是2015年9月10号 14点30分 我想的格式是 20150910 怎么获取?不要几点几分 解决方案 时间可以调用toString("yyyyMMdd"); 解决方案二: C#获取当前时间的各种格式 解决方案三: toolStripStatusLabel1.Text = "当前时间:" + DateTime.Now.ToString(&qu

html5 用video标签播放mp4格式的视频有些能放出来有些放不出来是怎么回事啊?

问题描述 html5 用video标签播放mp4格式的视频有些能放出来有些放不出来是怎么回事啊? html5 用video标签播放mp4格式的视频有些能放出来有些放不出来是怎么回事啊? 用转换器把视频编码格式转成了H264 音频编码专成了 AAC 也还是放不出来 解决方案 播放不出来,应该是格式有问题,具体可参考:http://www.w3school.com.cn/html5/html_5_video.asp

10. Html5的局:这些年,WebGL替我们做的那些事

(一)Html5新功能 最重要的功能之一当属WebGL了,和3D图形规范OpenGL.通用计算规范OpenCL一样,来自Khronos Group,2011年对外公布,到现在已经开始有WebGL2.0规范的雏形了. 这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,为Html5的Canvas提供硬件3D加速渲染,如下图所示:WebGL (二)WebGL与品类繁盛的openXX家族 简单列举一下:OpenGL 1/2/3/4.. OpenGL ES 1/2/3..