【转】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 城市街景呈现了流畅的视角转换后,它将带来迥异的用户体验。
3D 社交网络
3D 技术能演变出有趣应用,其中,最有趣的当属基于 3D 地图的网络社交。目前现在的社交 SNS 网站是都是基于文字、图片、视频的内容,所使用的地图是平面的地图。试想一下,未来的网络社交的背景是逼真的 3D 街景,您在“街上”行走的时候,可以真实的推开其中的一扇店门,“真实”的去某个咖啡店买一杯咖啡,还能看到朋友的 3D 形象,坐在靠窗的桌子上看书,您可以走过去和“他/她”说话。
这并非痴人说梦,Google正在做这方面的尝试:在 YoubeQ 项目中构建 Google Earth 里的 3D 社交网络。用户化身为一个 3D 小人,在Google Earth展示的街景中闲逛,碰到朋友能聊聊天。这个项目在Google Earth能够支持网页模式之后,访问势必更加简单直接。
移动设备中的 3D
和我们日常相关的,还有平板电脑上的 3D 网页应用。相比其他设备,平板电脑更适合运行 3D 网页应用。在平板电脑中,三维的立体形象与手指的操作能够很好的结合在一起。比如,Google 的 3D 圆筒书架 是在 PC 电脑实现的 3D 网页应用,书架实现为巨大的柱状多层转筒, 鼠标拖曳可以模拟手转动书架找书。想象一下,如果该应用用在平版电脑上,用手指转动书架,然后使用一个手指向上的手势来取书,是不是更爽一些?

3D 我们的世界
可以想象,3D 网页技术普及之后,我们的世界将被充分的 3D 模型化,大到地球、宇宙天体、小到汽车、房子、电子产品、微生物、细菌,都可以有详尽的细节的 3D 形象,我们可以以此趣味的展示和探索周围精彩的世界。去年年底,Google 推出的人体浏览器 3D 网页应用,把人体进行 3D 建模,能够以各种视角 360 度查看人体每个器官,包括骨骼、肌肉、内脏器官、神经系统等。(此应用为 Google 实验室的成果,目前该应用的 Google 网页已经关闭,相关的人体 3D 医学影像由 Zygote 网站继续提供运营。有兴趣的朋友可以看看人体浏览器的运行视频)

瓶颈
然而,先进技术的发展需要一个漫长的过程。其中,复杂物体的 3D 建模是 3D 网页主要的应用瓶颈之一,举例来说,程序员需要展示一个 3D 的轮船,把这个轮船表示为计算机能理解的多边形平面的组合是一个复杂的事情,对网页开发程序员来说,最好有现成的轮船的 3D 模型可以使用,不需要关注建模的细节。3D 网页的世界也许需要一个价格低廉的巨大 3D 模型库,囊括周围世界的各种物体。对此,Google 的做法是发动全球的爱好者创建和共享 3D 模型,这种做法是否会造成资源垄断,和未来的中小 3D 应用开发者能否得益,那是今后值得思考的问题。
原文链接:http://www.iteye.com/news/23447
【转】HTML5+WebGL:构建 3D 网页新世界的更多相关文章
- 基于 HTML5 WebGL 构建 3D 智能数字化城市全景
前言 自 2011 年我国城镇化率首次突破 50% 以来,<新型城镇化发展规划>将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智慧城市.截至现今,全国 ...
- 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...
- 基于 HTML5 WebGL 构建智能数字化城市 3D 全景
前言 自 2011 年我国城镇化率首次突破 50% 以来,<新型城镇化发展规划>将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智慧城市.截至现今,全国 ...
- 基于 HTML5 WebGL 构建智能城市 3D 场景
前言 随着城市规模的扩大,传统的方式很难彻底地展示城市的全貌,但随着 3D 技术的应用,出现了 3D 城市群的方式以动态,交互式地把城市全貌呈现出来.配合智能城市系统,通过 Web 可视化的方式,使得 ...
- 基于 HTML5 + WebGL 的 3D 可视化挖掘机
前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...
- 基于 HTML5 + WebGL 实现 3D 挖掘机系统
前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...
- 基于 HTML5 + WebGL 实现 3D 可视化地铁系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于 HTML5 WebGL 的 3D 科幻风机
前言 许多世纪以来,风力机同水力机械一样,作为动力源替代人力.畜力,对生产力的发展发挥过重要作用.近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机发电机的发展缓慢下来. 70年代初期, ...
- 基于 HTML5 WebGL 的 3D 网络拓扑图
在数据量很大的2D 场景下,要找到具体的模型比较困难,并且只能显示出模型的的某一部分,显示也不够直观,这种时候能快速搭建出 3D 场景就有很大需求了.但是搭建 3D 应用场景又依赖于通过 3ds Ma ...
随机推荐
- sequence——强行推式子+组合意义
sequence 考虑长度<=x的方案数F(x),然后(F(x)-F(x-1))*x贡献到答案里 n平方的做法可以直接DP, 感觉有式子可言, 就推出式子:类似coat,每个长度为i的计算i次. ...
- Python--day66--内容回顾
3,python中的大小比较和js中的大小比较规则: python中a>b>c,就是先比较a>b,然后再比较b>c,都为true的话就返回true: js中的a>b> ...
- C# 操作XML学习笔记
1. Customers.xml <?xml version="1.0" encoding="utf-8"?> <cust:customers ...
- 【b703】矩阵取数游戏
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规 ...
- 查看laravel版本
方法1: 使用php artisan --version ,只要能看懂这个命令的人一定已经具有初步的Laravel知识.再介绍一种不需要命令,直接去文件中去查看的方法. 方法2: 在项目文件中找ven ...
- 12563 - Jin Ge Jin Qu hao——[DP递推]
(If you smiled when you see the title, this problem is for you ^_^) For those who don’t know KTV, se ...
- P1015 高精度乘法
题目描述 给你两个很大的正整数A和B,你需要计算他们的乘积. 输入格式 输入一行包含两个正整数A和B,以一个空格分隔(A和B的位数都不超过 \(10^4\)) 输出格式 输出一行包含一个整数,表示A和 ...
- H3C查看保存的配置文件
- thinter图形开发界面
tkinter编程步骤 导入Tkinter 创建控件 import thinter 创建主窗口 #win = tkinter.Tk() 设置标题 win.title("xiaoxin&quo ...
- vue-learning:27 - component - 组件三大API之二:event
组件三大API之二: event 在上一节中讲到prop单向下行数据绑定的特征,父组件向子组件传值通过prop实现,那如果有子组件需要向父组件传值或其它通信请求,可以通过vue的事件监听系统(触发事件 ...