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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT平头哥联盟

小程序项目之再填坑记

  是的,真的,你没有看错,我就是上次那个加薪的,但是现在问题来了,最近又搞了个小程序的需求,又填了不少坑,其中的辛酸就不说了,说多了都是泪??,此处省略三千字...

1233
来自专栏BeJavaGod

以最简单的登录为例,诠释JS面向对象的简单实例

JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查...

3397
来自专栏编程微刊

经典小程序源码及其下载地址

7515
来自专栏王二麻子IT技术交流园地

手机网站开发相关介绍

随着无线网络技术的发展,手机上网的速度越来越快,手机的功能也越来越强大。今天就像大家介绍下手机网中的开发。 手机上网的特点 手机屏幕一般在240 * 320以上...

1997
来自专栏互联网杂技

帮你找好图!99%的互联网从业者都要学会的图片搜寻方法

收藏了十几个图库,依然搜不到好图片?那就别错过今天这个教程!这个「图片搜索」系列,不仅教你学会如何榨干一个优秀的图库,而且还附上了那些无法另存的图片的下载方法,...

2929
来自专栏顶级程序员

Android学习路上会遇到的各种瓶颈总结

前言 对于大多数大三学生来说,这个暑假是人生最后一个暑假。对于IT专业的学生来说,开学后就要面对各大IT企业的秋招,很多人会成为从0开始的An...

4858
来自专栏程序员叨叨叨

【8】如何写出一篇登得上大雅之堂的技术博客

写博客之前,一定要在心里好好地问自己:我为什么要写博客?我记得自己初入简书是受学长李响同學引导,因其奇佳的段子手天赋引来了诸多粉丝,尤其是《李响同學 #你的包里...

671
来自专栏工科狗和生物喵

微信小程序开发——跑步App+音乐播放

开篇语 好不容易,终于把所有的基础课程全部看完了!昨天,我很高兴地开始了看别人做的项目进行深度的学习。其实也说不上是项目吧,更多的像是一种给新手看的示例代码。然...

68412
来自专栏ATYUN订阅号

Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

Medium网友Peter Weinberg开发了一款名叫CS-Playground-React的应用程序,可以使大家更有意思、也更加轻松地学习算法和数据结构。...

4675
来自专栏V站

Emlog丨Kiss 二次元博客主题 1.1

下载地址:https://24bp.cn/download.php?id=2033

3210

扫码关注云+社区

领取腾讯云代金券