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

从IE6到IE11上运行WebGL 3D遇到的各种坑的更多相关文章

  1. 突袭HTML5之WebGL 3D概述

    WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文 ...

  2. 透过WebGL 3D看动画Easing函数本质

    50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道 ...

  3. [整理]IE11中的WebGL探秘:渲染速度超Chrome

    http://www.csdn.net/article/2013-12-19/2817854-IE11-WebGL-and-more 摘要:IE11开始支持WebGL,并且效果非常好,IE11的Web ...

  4. HTML5定稿了,终于有一种编程语言开发的程序可以在Android和IOS两种设备上运行了

    2007 年 W3C (万维网联盟)立项 HTML5,直至 2014 年 10 月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5 颠覆了 PC 互联网的格局,优化了移动互联网的体验,接下 ...

  5. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  6. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

    今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...

  7. 通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  8. 使用 VirtualBox 虚拟机在电脑上运行 Android 4.0 系统,让电脑瞬间变安卓平板

    Ref: http://www.iplaysoft.com/android-v4-ics-for-virtualbox.html 随着 Android 手机的各种软件应用越来越多,很多没有购买的朋友都 ...

  9. 分享收集的WebGL 3D学习资源

    大家好,我在本文中分享了我收集的WebGL 3D相关的博客.书籍.教程.demo等内容,希望对大家学习WebGL和3D有所帮助,谢谢- 相关博客 Wonder技术 Wonder是我们的产品,包含Web ...

随机推荐

  1. DRAM 内存介绍(三)

    参考资料:http://www.anandtech.com/show/3851/everything-you-always-wanted-to-know-about-sdram-memory-but- ...

  2. java string转为xml

    一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XML String xmlStr = \"......\"; StringReader s ...

  3. TCP/IP 端口号大全

    常用端口: 20 ftp-data FTP 数据端口 21 ftp 文件传输协议(FTP)端口:有时被文件服务协议(FSP)使用 22 ssh 安全 Shell(SSH)服务 23  telnet T ...

  4. 奇怪吸引子---WangSun

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  5. 如何通过Socket TCP发送并接收一个文件?

    一.小结 1.大包发小包收,只发一次. 2.发时把文件扩展名,文件长度也随同一起发送,方便接收端接收时另存为正确的文件类型,并判断是否已经接收完毕. 如果不一起发送,分为文件扩展名,文件长度,文件内容 ...

  6. 怎么在阿里云服务器部署多个tomcat

    部署前准备: 1.到阿里云官网购买一台服务器 2.给阿里云服务器挂盘,阿里云有教程这里不讲解,自己看. Linux 系统挂载数据盘 视频:Linux服务器挂载数据盘 3.下载tomcat  http: ...

  7. C# inline-hook / api-hook

    我查阅了一下相关C#方面的资料,却没有发现有提供过关于api-hook方面的资 料包括应用库由此本人编写一套inline-hook的库用于支持x64.x86上的基于在 clr的公共语言,如: c#.c ...

  8. 手机前端页面js

    (function () { var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; va ...

  9. 【国内独家首发】iPhone4 iOS7不完美越狱教程新鲜出炉

    准备工作: 1.Mac (OSX 10.8以上系统): 2.iPhone 4 (iPhone3, 1 iOS 7.0.2): 3.iPhone 4数据线一根: 4.下载越狱工具包:ios7_jb_ki ...

  10. HttpModule生命周期示意图