HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > HTML5+WebGL:构建3D网页新世界

HTML5+WebGL:构建3D网页新世界

       今年下半年, HTML5 和 WebGL 变成极热门词语,3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D 网页技术方案的发展,各种实验性项目层出不穷。这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D物体形象的展示。

  何谓 WebGL ?

  WebGL 是网页开发语言 JAVA Script 形式的绘图 API 接口,提供设备硬件图形能力的直接调用。HTML5 则是网页开发语言新标准,提供了网页上的 Canvas “画布”供网页上的 3D 对象展现。

  简单的说,在此之前,3D 物体形象在网页上不能直接展示,必须使用非标准的特殊网页语言语法或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案,使程序员可以直接在网页上展示物体的 3D 形象,并且这种展现直接使用设备的图形处理器的处理能力,其绘图性能能够得到保证。3D网页技术应用很广,体验 3D 网页也非常简单,我们只需要桌面电脑支持现代的图形显示设备,同时,必须安装足够高版本的新型浏览器,诸如 firefox 和 Chrome 即可。

  3D 网页游戏

  先说说 3D 网页游戏,在这场技术浪潮中,先知先觉的游戏厂商真正积极研发 WebGL 游戏引擎,为 3D网页游戏潮流的到来提前进行技术储备。Mozilla 社区的 Paladin 项目组正在开发名为“Gladius”WebGL 3D 游戏引擎,CopperLicht 则是一个快速 JAVAScript 的 WebGL 游戏引擎,在其网站上提供了一批 WebGL 游戏场景范例,其中不少的3D 场景甚至可以媲美传统的 PC 桌面游戏。它们的效果可以在 ResureFox 和 ambiera 网站看到。

  3D 地图

  而 3D 地图是另外一个关键应用。和目前的枯燥平面地图相比,3D 地图可以以旋转的视角查看街景、建筑物的立体形状,用户有身临其境的感觉,体验非华丽、无以形容。在 MapsGL 项目中,3D 地图的先行者 Google 正利用 WebGL 技术提供 3D 街景地图。按照 Google 的说法,他们在“重新打造了Google 地图……提供更强大的性能、更丰富的 3D 图形、更流畅的图像过渡效果和 45° 视图旋转效果,以及能更方便地访问街景视图。”

  要查看其效果,你可以直接访问 Google Maps 网页,并选择打开 MapsGL 功能。当地图的比例放大到一个街道路口大小的时候,平面的地图就会展示成 3D 的街景。下面是使用 MapsGL 功能访问美国曼哈顿周围的地图看到景观截图,转动图上的罗盘或者移动鼠标,查看的视角随之转动,其效果仿佛本人在曼哈顿的街道上闲逛。

  可以想象,当每个城市都完成了 3D 的建模,并通过网页提供服务,3D 地图之上能够叠加各种有趣的服务,例如:3D 寻路导航,虚拟旅游,美食查找、网络社交、网络游戏等等。这些应用有目前的 2D的版本,安装插件可以实现不怎么流畅的 3D 效果,但在未来的 3D 网页中,逼真的 3D 城市街景呈现了流畅的视角转换后,它将带来迥异的用户体验。

【HTML5+WebGL:构建3D网页新世界】相关文章

1. HTML5+WebGL:构建3D网页新世界

2. Mozilla正开发Gladius3D网页游戏引擎

3. Ludei:HTML5平台将于今夏支持WebGL 3D

4. Superhero.js:构建大型 JavaScript 应用程序的最佳资源

5. 开发者应该关注的五项Web新兴技术:WebGL和SVG名列其中

6. WebGL和HTML5在未来需要面对的挑战

7. 八大疯狂的HTML5 Canvas及WebGL动画效果

8. IE10不支持WebGL,Chrome的HTML5游戏性能是其22倍

9. 关于HTML5(WebGL)的那点事

10. 使用 HTML5 WebGL 实现逼真的云朵效果

本文来源:https://www.51html5.com/a1952.html

点击展开全部

﹝HTML5+WebGL:构建3D网页新世界﹞相关内容

「HTML5+WebGL:构建3D网页新世界」相关专题

其它栏目

也许您还喜欢