从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的页面增加一行<meta http-equiv=”X-UA-Compatible” content=”chrome=1″>代码即可，或者从服务器下发该页面是对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

的问题

<OBJECT ID="ChromeFrame" WIDTH=500 HEIGHT=500 CODEBASE="http://www.google.com"
CLASSID="CLSID:E0A900DF-9611-4446-86BD-4B1D47E7DB2A">
<PARAM NAME="src" VALUE="http://www.google.com">
<embed ID="ChromeFramePlugin" WIDTH=500 HEIGHT=500 NAME="ChromeFrame"
SRC="http://www.google.com" TYPE="application/chromeframe">
</embed>
</OBJECT>

以上是我使用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做考虑，毕竟这哥们市场占有率还不高，等足够高了值得考虑时也许微软自己已经填补好了坑，无需我们再操心了，但已微软发布新浏览器版本的节奏，我只能说我们有生之年肯定等得到。