从IE6到IE11上运行WebGL 3D遇到的各种坑
来源:互联网 发布:python sys.exit 编辑:程序博客网 时间:2024/05/22 00:35
这篇《基于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做考虑,毕竟这哥们市场占有率还不高,等足够高了值得考虑时也许微软自己已经填补好了坑,无需我们再操心了,但已微软发布新浏览器版本的节奏,我只能说我们有生之年肯定等得到。
- 从IE6到IE11上运行WebGL 3D遇到的各种坑
- spark-submit到yarn上遇到的各种坑
- 运行theano遇到的各种坑
- IE6升级到IE11兼容性问题和操作手册
- react-table组件入门和在IE11上遇到的坑
- Lights:奇妙的WebGL 3D体验
- 让IE6 ~IE11支持Bootstrap的解决方法
- resnet10 从tk1 上移植到linux 上 上遇到的问题
- windows7如何从IE11恢复到IE8
- 从Eclipse迁移到Android studio(还有遇到的各种问题)
- 移动端上遇到的各种坑与相对解决方案
- Android 发布项目到 JCenter 遇到的各种坑
- 自己做IE各个版本兼容的时候用的解决办法方法,IE6到IE11都可以【亲测】
- WebGL My 3D House
- 微软的基于webgl的H5 3D游戏引擎
- 遇到的各种坑
- 一款基于Webgl实现的3D类网页游戏
- [WebGL入门]三,3D绘图的基础知识
- linux文件系统(四)——软连接与硬连接
- 【NOI2012】美食节
- code forces 401A Vanya and Cards
- 修改嵌入式linux启动画面(二)
- 如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们?
- 从IE6到IE11上运行WebGL 3D遇到的各种坑
- Python 网络爬虫5 ---- 第一次实现抓取数据并且存放到mysql数据库中
- android 开发问题----avd按钮无法按
- struts1(5)----表单校验与回显
- hive 本地MapReduce(local mr)
- Morgan IT 笔试面试汇总
- OSX: HP的打印机工具程序安全漏洞(HP Utility.app)?
- Java中的枚举Enum
- OpenCv学习之利用ORB算法完成图像拼接