如何启用WebGL

要运行WebGL，必须有一个支持它的浏览器。先来看看在桌面平台上有哪些设备和平台已经支持WebGL了

Google Chrome 9及以上版本

Mozilla Firefox 4以及上版本

Safari 5.1及以上版本（仅限于Mac OS X *** 作系统，不包括Windows *** 作系统；所有情况下必须强制开启WebGL支持，请参考下文）

Opera Next 即Opera 12 alpha及以上版本

IE并不支持WebGL(IE11支持WebGL)，但是可以下载并安装IEWebGL这个插件，或Google Chrome Framework来运行一些WebGL应用

那么这些浏览器该如何启用WebGL呢，请看下面解决方法：

Chrome浏览器

需要为Chrome加入一些启动参数，以下具体 *** 作步骤(以Windows *** 作系统为例)

1、找到Chrome浏览器的快捷方式，如果没有就创建一个快捷方式（右键点击chrome.exe，选择“创建快捷方式”或者“发送到”→“桌面快捷方式”），右键点击快捷方式，选择属性。

2、在目标框内，双引号的后边，空格，然后加入以下内容

--enable-webgl --ignore-gpu-blacklist --allow-file-access

点击确定

3、设置完成的后的快捷方式属性窗口看起来应当是这样的，注意“目标”文本框：

4、关闭目前开启的所有Chrome窗口，然后用此快捷方式启动Chrome浏览器。

其中：

--enable-webgl

的意思是开启WebGL支持

--ignore-gpu-blacklist

的意思是忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL

--allow-file-access-from-files

的意思是允许从本地载入资源

Firefox浏览器

1、Firefox的用户请在浏览器的地址栏输入“about:config”，回车

2、在过滤器（filter）中搜索“webgl”

3、通过双击的方式将webgl.force-enabled的值设置为true

4、通过双击的方式将webgl.disabled的值设置为false

5、在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”

6、通过双击的方式将security.fileuri.strict_origin_policy的值设置为false

7、关闭目前开启的所有Firefox窗口，然后重新启动Firefox。

其中前两个设置是强制开启WebGL支持，最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源

如果强制开启了WebGL，还是不能运行，更多信息可参考Mozilla Blocklisting/Blocked Graphics Drivers

我在Window XP上测试Firefox的WebGL时，在强制开启了WebGL后，仍然得到Error: WebGL: Error during ANGLE OpenGL ES initialization

悲催的发现Firefox对厂家的不支持和硬件不支持(分别在虚拟机上和显卡为Intel G31/G33 chipset)

On Windows

All vendors other than AMD/ATI, NVIDIA, Intel are blocked (bug 623338). This was required primarily by various crashes on virtual machines with unusual vendor names (bug 621411). We’re open to whitelisting more vendors if needed.

… …

If force-enabling a feature doesn’t work, that probably means that your hardware doesn’t support it. For example, layers acceleration currently requires support for 4Kx4K textures, which rules out some graphics cards, like the Intel G31/G33.

Safari浏览器

1、进入“偏好设置 (Preferences)”菜单并点击高级 (Advanced)

2、选中复选框“在菜单栏中显示‘开发’菜单 (Show Develop menu in the menu bar)”

3、从“开发 (Develop)”菜单中启用 webGL，勾选“启用WebGL”

4、允许从本地载入资源，勾选“停用本地文件限制”

这里要强调：如果电脑的显卡非常老旧，或者是板载的集成显卡，那么需要在浏览器中强制开启WebGL支持；另外因为其他的一些原因（比如 *** 作系统是Windows XP），在正常安装以上浏览器之后还是不能运行WebGL，最好也强制开启WebGL支持

方案一：有服务器环境，将项目部署在web服务器上，最简单的tomcat。

mono-design的目录中并直接移动到例如apache-tomcat-6.0.37\webapps\ROOT\下，然后浏览器打开后输入http://localhost/mono-design/即可。

方案二：设置浏览器

On Windows：

Chrome:

1、得到Chrome的安装路径，例如：

C:\Users\-your-user-name\AppData\Local\Google\Chrome\Application

2、在命令行窗口，输入安装路径，加上–allow-file-access-from-files参数，例如：

Chrome installation path\chrome.exe --allow-file-access-from-files

，回车执行，启动Chrome

3、测试的一个临时方法:：复制一个Chrome的快捷方式，右键->属性->目标的文本框中加上参数

--allow-file-access-from-files

，例如：

"Chrome installation path\chrome.exe" --allow-file-access-from-files

IE11：默认可以加载本地图片

Firefox：

1、Firefox的用户请在浏览器的地址栏输入“about:config”，回车

2、在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”

3、将security.fileuri.strict_origin_policy设置为false

4、关闭目前开启的所有Firefox窗口，然后重新启动Firefox。

On Mac：

Chrome：从命令行窗口中启动，启动命令为

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Safari：

1、Safari->偏好设置->高级->勾选“在菜单栏中显示‘开发’菜单”

2、开发->勾选“启用WebGL”

3、开发->勾选“停用本地文件限制”

Firefox：

1、Firefox的用户请在浏览器的地址栏输入“about:config”，回车

2、在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”

3、将security.fileuri.strict_origin_policy设置为false

4、关闭目前开启的所有Firefox窗口，然后重新启动Firefox。

---