HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

2016-02-19 11:19 12 1 收藏

下面图老师小编跟大家分享一个简单易学的HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件。WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文,准备数据,在canvas中绘制对象并渲染。与2D不同的就是3D涉及的知识更多了,例如世界、光线、纹理、相机、矩阵等专业知识。WebGL有一个很好的中文教程,就是下面使用参考中的第一个链接,所以这里不再班门弄斧,后面的内容只是简单的总结一下学习的内容。

浏览器的支持
由于微软有自己的图形发展计划,一直不支持WebGL,所以IE目前除了安装插件外,是无法运行WebGL的。其他的主流浏览器如Chrome、FireFox、Safari、Opera等,都装上最新的版本就可以了。除了浏览器要装最新的外,还要保证显卡的驱动也是最新的。
装上这些以后,可以打开浏览器,输入下面的网址验证一下浏览器对WebGL的支持情况:http://webglreport.sourceforge.net/。

在正常安装以上浏览器之后还是不能运行WebGL,那你可以强制开启WebGL支持试一试。开启方法如下:
Chrome浏览器
我们需要为Chrome加入一些启动参数,以下具体操作步骤以Windows操作系统为例:找到Chrome浏览器的快捷方式,右键点击快捷方式,选择属性;在目标框内,chrome.exe后面的引号后面,加入以下内容:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files

点击确定后关闭Chrome,然后用此快捷方式启动Chrome浏览器。
几个参数的含义如下:
--enable-webgl的意思是开启WebGL支持;
--ignore-gpu-blacklist的意思是忽略GPU黑名单,也就是说有一些显卡GPU因为过于陈旧等原因,不建议运行WebGL,这个参数可以让浏览器忽略这个黑名单,强制运行WebGL;
--allow-file-access-from-files的意思是允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,那你可以不添加这个参数。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Firefox浏览器
Firefox的用户请在浏览器的地址栏输入about:config,回车,然后在过滤器(filter)中搜索webgl,将webgl.force-enabled设置为true;将webgl.disabled设置为false;在过滤器(filter)中搜索security.fileuri.strict_origin_policy,将security.fileuri.strict_origin_policy设置为false;然后关闭目前开启的所有Firefox窗口,重新启动Firefox。
前两个设置是强制开启WebGL支持,最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,那你可以不设置此项。

Safari浏览器
在菜单中找到属性→高级,选中显示开发菜单,然后到开发菜单,选中开启WebGL。

开发步骤

下面的代码只是简单总结一下相关的概念,它

来源:http://www.tulaoshi.com/n/20160219/1597080.html

延伸阅读
标签: PS PS教程
640){this.resized=true;this.style.width=640;}" border=0>
标签: flash教程
第5节 水晶球 一颗颗晶莹剔透的水晶球一闪一闪的,并且可以使用鼠标对其进行拖动,最终效果如图1所示; 图1 水晶球最终效果 1.首先启动,设置影片舞台大小为400px*400px(单位为象素),影片背景颜色为紫色,颜色代码为#660099. 2.新建一个图形元件命名为Bubble,进入元件的编辑区后,选择椭圆...

经验教程

668

收藏

79

精华推荐

视觉欺骗---3D矩阵

视觉欺骗---3D矩阵

shine拯救视界

当鲜花恋上3D底妆

当鲜花恋上3D底妆

dahai010gg

Miscellaneous 3D人物欣赏

Miscellaneous 3D人物欣赏

张某某灬

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部