13. Html5的局:WebGL的模糊边界

简介: #紧接上文 WebGL是一套跨平台的渲染技术,向上提供统一的标准API,向下屏蔽了硬件厂商的差异,最大化的降低OpenGL的移植成本,同时也失去了一些特色的高级GL功能。 先看看常用的纹理数据的变化。 #WebGL的标准的落地与否 ## 标准不代表WebKit支持 就像JavaScript的E6标准不是所有浏览器都支持一样,WebGL的很多标准在不同的平台不一定支持,比如Textur

紧接上文

WebGL是一套跨平台的渲染技术,向上提供统一的标准API,向下屏蔽了硬件厂商的差异,最大化的降低OpenGL的移植成本,同时也失去了一些特色的高级GL功能。
先看看常用的纹理数据的变化。

WebGL的标准的落地与否

标准不代表WebKit支持

就像JavaScript的E6标准不是所有浏览器都支持一样,WebGL的很多标准在不同的平台不一定支持,比如Texture的GL_BGR格式,在PC的WebKit上是支持的,在移动端的WebKit上就不一定支持,因为这一特性属于OpenGL ,但不是OpenGL ES2.0的标准。
查看OpenGL的gl.h文件,我们可以找到:

/* bgra */
#define GL_BGR                            0x80E0
#define GL_BGRA                           0x80E1

但在OpenGL ES2.0的gl.h却没有这个属性的定义,反而是在扩展文件glext.h找到了不完整的定义:

#if GL_APPLE_texture_format_BGRA8888
#define GL_BGRA_EXT                                             0x80E1
#endif

不仅属性名称发生了变化,是否支持也成了硬件的可选条件。

bold 结论:
标准是扩平台的,硬件是有差异的,标准不一定会实现。

标准在硬件上的差异

WebGL只是将OpenGL在不同硬件平台做了一套,基于OpenGL和OpenGL ES2.0的统一的规范,OpenGL 与OpenGL ES2.0在标准和用法上存在差异,而ES2.0是GL的子集。那么同一个API必然在某些场景下的用法,会存在差异。
比如,我们最常用的glTexImage2D在OpenGL的定义为:

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

在GL中,internalformat和format参数可以不一致;level可以是正整数;pixels可以为空;
但在OpenGL ES2.0的规范中,API的定义可谓是完全相同:

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

可是真正使用起来,参数解释就不同了,比如:在ES2.0中,internalformat和format必须相同;level必须是0;pixels在某些平台为了安全不能为空。
bold 结论
因为GL是跨平台的标准,不可能只采用ES2.0的规范,每当遇到GL与ES2.0的边缘场景,事情就会变得复杂化,再加上不同的硬件的支持不完全一致,这个时候,怎么办呢?

标准在软件上的差异

纵观网络的技术博客,我们仍然以glTexImage2D为例,关于internaformat与format参数是否一致的情况,网上出现了两种结论:

1. 以实际主义为事实的说法:可以不一致:

http://blog.csdn.net/csxiaoshui/article/details/27543615
提到:

internalFormat:指定OpenGL是如何管理纹理单元中数据格式的。网络上很多解释说这个参数必须和后面的format参数一样,这个说法是不正确的

2. 各大厂商的标准文档:必须保持一致

https://msdn.microsoft.com/zh-cn/library/dn302435(v=vs.85).aspx
提到:

format [in]
Type: Number
Contains the format for the source pixel data. Must match internalformat (see above).

这其实是OpenGL与WebGL的差异,也就是OpenGL的开发者转到WebGL开发,也是需要改变很多的,那么各大浏览器厂商在实现上,采用哪种说法呢?

3. WebKit VS FireFox:各自为政

对于internalformat与format,WebKit是直接拿来使用,不做强制约束:

    texImage2DBase(target, level, internalformat, width, height, border, format, type, data, ec);

而FireFox是严格的遵守WebGl标准,做了严格的判断:

    if (format != internalformat)
        return ErrorInvalidOperation("texImage2D: format does not match internalformat");

总结:
WebGL只是H5领域的一个标准, 无法做到对OpenGLES2.0完美的兼容,甚至有些标准属于Web独有的。熟悉WebGL的标准对于前端开发是很有帮助的,同事Native与H5的代码移植,技术挑战很大。

下回再见

WebGL弱化了OpenGL与硬件的差异,形式上统一了GL在前端的用法。WebGL的路上,既然有凸起,那么一定有凹坑,WebGL标准通过舍去一些高级特性达到统一的目的,那么就会有弥补凹坑,把一些硬件不支持的特性补充完整。
下一回,我们谈谈如何使用CPU来弥补WebGL的不足。

目录
相关文章
|
JavaScript 前端开发 Web App开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
4月前
|
移动开发 监控 前端开发
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
|
5月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
58 0
webgl学习笔记3_javascript的HTML DOM
|
Web App开发 移动开发 iOS开发
如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
156 0
|
存储 移动开发 数据可视化
使用 WebGL 为 HTML5 游戏创建逼真的地形
在本文中,我将分享我们应对这些有趣挑战之一的方法:一种创建逼真的大型地形的简单方法。
72 0
|
移动开发 小程序 图形学
如何在HTML5中使用WebGL实现3D效果?底层原理是什么?
如何在HTML5中使用WebGL实现3D效果?底层原理是什么?
275 0
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之三:学习使用Three.js中的光源
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
JavaScript HTML5 移动开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之二:构建Three.js应用的基本组件
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
移动开发 HTML5 容器
基于 HTML5 WebGL 的 3D 网络拓扑结构图
现在,3D 模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型;电影行业将它们用于活动的人物、物体以及现实电影;视频游戏产业将它们作为计算机与视频游戏中的资源;在科学领域将它们作为化合物的精确模型;建筑业将它们用来展示提议的建筑物或者风景表现;工程界将它们用于设计新设备、交通工具、结构以及其它应用领域;在最近几十年,地球科学领域开始构建三维地质模型,而且 3D 模型经常做成动画,例如,在故事片电影以及计算机与视频游戏中大量地应用三维模型。
2096 0