从IE6到IE11上运行WebGL 3D遇到的各种坑

阅读更多

这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心，但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题，毕竟作为企业应用，用户的机器运行着各式各样的办公及业务系统，有PB/Delphi之类的老CS应用，有安装了dll和ActiveX的各种安全认证和视频监控的插件，有装着flash或svg插件的flex和SVG应用，当然还有支持IE6却不支持任何非IE浏览器的各种OA办公软件，眼看着XP操作系统即将寿终正寝，结果还成了国内各家安全公司的新商机《围猎XP：谁在瞄准商机》，你说升级机器系统谈何容易？

对于我们无力要求升级的IE678910上要跑WebGL，我们只能采用Google Chrome Frame的解决方案，虽然该插件Google从2014年1月份起就不再维护更新了，但已经发布的版本也是31了，这个版本的WebGL功能已经足够完善了，当然这样的解决方案也一箭双雕的解决了2D的Canvas问题。

安装完该插件后，在你需要采用WebGL的页面增加一行代码即可，或者从服务器下发该页面是对HTTP头增加X-UA-Compatible: chrome=1的参数即可。

使用Google Chrome Frame还需要注意一下几点：

• Google Chrome Frame不支持直接从本地local file方式打开页面，必须把页面部署到Web服务器发布方式打开才能运行出效果
• Google Chrome Frame不支持64位的机器：Currently, 64-bit versions of IE are not supported. It’s worth pointing out that 32-bit IE is the default on 64-bit Windows 7.
• Google Chrome Frame不支持iframe方式： At this point ChromeFrame only supports the meta tag detection on top level URLs.
  

可采用嵌入OBJECT元素的解决方案，绕开Google Chrome Frame不支持iframe的问题

以上是我使用Google Chrome Frame解决老IE浏览器遇到的一些坑的解决方案，如果你还遇到其他问题可参考Google Chrome Frame的Developer Guide 和Troubleshooting 。

还好，我们遇到的不少项目还是允许购买新机器或者升级新浏览器系统的，但这并不以为这能上IE11就问题结束了，微软这哥们对新标准的支持要嘛落后半拍，要嘛明知标准就这样我TMD的就不实现你能咋地，相信preserve-3d的CSS3功能让多少人欣喜诺狂，的确如果CSS3的3D功能各家浏览器能好好实现很多应用也就没WebGL啥事了，例如著名的famo.us 的经典元素周期表例子，尼玛的IE使用者就无福享受，看看以下MS人的话，我知道preserve-3d是w3c标准，老子就不实现，想用的自己搞蹩脚的解决方案绕道：

http://msdn.microsoft.com/en-us/library/ie/hh673529(v=vs.85).aspx
Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element’s transform to each of the child elements in addition to the child element’s normal transform.

CSS3的问题下回再扯淡，那是个无穷无尽的话题，回到我们的号称支持WebGL的IE11，至从一年前有人泄露IE11将支持WebGL就引得业界一片兴奋，千呼万唤始出来后居然还有那么多缺陷，但终归还是大好事，迈出第一步是最难的，相信微软会慢慢完善，但毕竟活在当下的我们还得继续填Shading Language上的几个坑：

1、lineWidth不让设置，只支持1个像素的连线，只能用一个像素将就着，或者把线采用构建模型的重方式来替代

2、Stencil buffers还不支持，clearStencil之类的函数就不要考虑用了

3、TRIANGLE_FAN类型不支持，这个还好办，改用TRIANGLES替代顶多增加点顶点数据

4、不支持return语句，你妹的这个问题让我苦苦找了半天才发现，只能改变代码逻辑不用return的方式

目前我遇到的就这些坑了，有摔倒在其他坑的同学可以继续补充，采用threejs，babylonjs和Hightopo的HT for Web等3D引擎封装的框架自然都会帮我们应用层屏蔽这些坑，但相信很多引擎并还未对IE11做考虑，毕竟这哥们市场占有率还不高，等足够高了值得考虑时也许微软自己已经填补好了坑，无需我们再操心了，但已微软发布新浏览器版本的节奏，我只能说我们有生之年肯定等得到。