2024年2月5日发(作者:)

如何在Chrome谷歌浏览器中开启WebGL体验3D之旅

为了更好的说明这个问题,先来介绍两个名词:

一、谷歌浏览器

Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。2013年9月,Chrome已达全球份额的43%,成为使用最广的浏览器。

自从微软公司停止XP系统的服务,一并就停掉了XP系统的浏览器IE8.0,所以现在还有很多坚持在使用XP系统的用户,就可以考虑抛弃老旧的IE浏览器了,使用谷歌浏览器等其他浏览器了。

另外,谷歌人体浏览器,使用支持 html5 的浏览器,最好是 Chrome。等成功开启WebGL后,就可以点击:/ 直接访问就行了。

在这里不得不感叹谷歌人体浏览器的强大,谷歌通过WebGL技术将人体将解剖学3D模型无比清晰的展现到了我们的眼前,让我们直接在网站中透过3D构图的方式来检视人体各部位、各种层面的构造,不管是外观、器官、血管、肌肉、骨骼或各种人体细节,不用翻阅书籍、看X光片或找模型来看,直接用电脑中的浏览器就能上上下下、里里外外把个层次人体构造的细节看个够。不仅为学医和绘画的人提供了巨大的帮助,也为普通人了解人体构造提供了方便。

可以说,谷歌地图让人们可以清晰的看到距离自己千里之外的房屋,通过谷歌街景视图还能够“侦察”到邻居的举动。而谷歌人体浏览器让人们可以清晰的看到人体内部及外部的一切三维立体结构。

二、WebGL

WebGL是一种3D绘图标准,可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面。

WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

WebGL标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中,这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景,以及3D网页游戏及复杂3D结构的网站页面。

下面言归正传。我们首先下载好Chrome谷歌浏览器并安装,就会发现默认的WebGL功能是关闭的,据官方说法是处于试验测试阶段,需要手工开启。

这里总结老版本和新版本的两种开启方式。

一、较老版本的开启方法

这里又有两种开启方法

第一种:打开cmd,切换到Chorme的安装目录,敲入 --enable –webgl,回车就会打开一个chrome浏览器窗口;

第二种:找到Chrome浏览器的快捷方式,如果没有就创建一个快捷方式(右键点击,选择“创建快捷方式”或者“发送到”→“桌面快捷方式”),右键点击快捷方式,选

择属性。

在目标编辑框中添加如下内容:

"C:Documents and SettingsAdministratorLocal SettingsApplication

" --enable-webgl --ignore-gpu-blacklist

--allow-file-access-from-files

然后点击确定即可。

其中:

--enable-webgl的意思是开启WebGL支持;

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

--allow-file-access-from-files的意思是允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,那你可以不添加这个参数。

二、较新版本的开启方法

直接在Chrome浏览器地址栏中输入 about:flags

然后开启:

覆盖软件渲染列表

覆盖内置的软件渲染列表,并对不支持的系统配置启用 GPU 加速。

设置开启,就可以了。

以上在Chrome谷歌浏览器中就开启WebGL了,但是我们怎么知道是否开启成功了呢?可以通过以下来测试验证是否开启成功。

在地址栏中输入:

如果显示的是Yay,则支持WebGL,如果显示的是Nay则不支持。

如果显示Yay,恭喜你,开启成功了,就可以进行WebGL的3D之旅了。下面显示几个,先来体验一下吧。

1、Canvas Cycle

最强大的展示例子,甚至可以有不同的天气效果,还有多个画面场景选择哦。

2、WebGL Water

3、Chrysaora

4、鱼缸

观赏鱼在鱼缸中游泳。

5、3D地球

观看地球围绕其轴线旋转。

6、分子旋转

这个例子为那些对科学和分子可视化感兴趣的人准备的。

7、万花筒实验

一个奇妙的万花筒效果的展示。