從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上的幾個坑：

一、lineWidth不讓設置，只支持1個像素的連線，只能用一個像素將就着，或者把線採用構建模型的重方式來替代

二、Stencil buffers還不支持，clearStencil之類的函數就不要考慮用了

三、TRIANGLE_FAN類型不支持，這個還好辦，改用TRIANGLES替代頂多增長點頂點數據

四、不支持return語句，你妹的這個問題讓我苦苦找了半天才發現，只能改變代碼邏輯不用return的方式

目前我遇到的就這些坑了，有摔倒在其餘坑的同窗能夠繼續補充，採用threejs，babylonjs和Hightopo的HT for Web等3D引擎封裝的框架天然都會幫咱們應用層屏蔽這些坑，但相信不少引擎並還未對IE11作考慮，畢竟這哥們市場佔有率還不高，等足夠高了值得考慮時也許微軟本身已經填補好了坑，無需咱們再操心了，但已微軟發佈新瀏覽器版本的節奏，我只能說咱們有生之年確定等獲得。