從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還需要注意一下幾點:

可采用嵌入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 FrameDeveloper 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的方式

目前我遇到的就這些坑了,有摔倒在其他坑的同學可以繼續補充,采用threejsbabylonjsHightopoHT for Web等3D引擎封裝的框架自然都會幫我們應用層屏蔽這些坑,但相信很多引擎並還未對IE11做考慮,畢竟這哥們市場占有率還不高,等足夠高了值得考慮時也許微軟自己已經填補好了坑,無需我們再操心了,但已微軟發布新瀏覽器版本的節奏,我只能說我們有生之年肯定等得到。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM