构建 3D 网页新世界

标签: 业界趋势/Trend 前缀分类 应用 3D HTML5 | 发表时间:2011-11-22 09:10 | 作者:shallon clowwindy
出处:http://www.ifanr.com

今年下半年, 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 应用开发者能否得益,那是今后值得思考的问题。

“阅读、记录、总结和分享”是我尝试理解现时世界如何演变成未来的一种方式。

© shallon for 爱范儿 · Beats of Bits | 原文 · 15 热评 · 新浪微博 · 订阅全文 · Google+ · #ifanrlive · 加入爱范社区!


相关 [3d 网页 新世界] 推荐:

构建 3D 网页新世界

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

Tilt:将2D网页变成3D

- sherlockshine - cnBeta.COM
感谢$1云VPS限时抢购的投递. Mozilla Hacks介绍了一个有趣的Firefox扩展程序Tilt, 它能将2D网页内容变成3D对象. 网页的可视化是基于WebGL,通过分析网页DOM树渲染出3D对象,对每个网页元素赋予不同的深度和纹理. 在安装之 后,用户可以按快捷键Ctrl+Shift+L(OS X是Cmd+Shift+L)启动3D浏览,按Esc键关闭浏览.

Chrome 将增加 Offscreen Tabs 模式,以 3D 形式预览网页

- Ivy - 谷奥——探寻谷歌的奥秘
chrome.experimental.offscreenTabs.*是最近增加的API模块,它可让网页以3D形式显示,且这些网页也是实时更新变化着的. 这种特效的网页预览形式可方便扩展作者在较小的空间里展示多个网页. 上面是这种被成为Offscreen Tabs视图模式的效果图,使用了WebGL和纹理API,似乎有点像Safari的Top Sites,不过将来可能还会改变.

一款基于Webgl实现的3D类网页游戏

- - 搜索研发部官方博客
摘要:本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏. 主要内容包括介绍three.js,如何运用three.js摆放相机,设置相机角度,相机视觉角度转移,场景中物体的位置摆放和贴皮,在3d世界中的直线运动,碰撞检测等. 关键词:3d数学, webgl, three.js,.

Chris Farmer:最新世界十大顶级VC排名

- mk - 36氪
今天,来自风险投资机构General Catalysy Partners的Chris Farmer发布了其通过InvestorRank规则统计出来的世界十大顶级VC机构,它们的排名分别是:. 这个排名是不是同人们一般印象中的排名不一样. 他采用的InvestorRank规则是这样的:. 就像Google的网页排名算法是根据一个网页从其他网站获得的链接多少来进行排名一样,他也根据VC机构之间相互创建的联系来对它们进行排名.

摧毁网页 Kick Ass

- Jerome - 无聊哦
是不是经常遇见一些烂的让你无法淡定的网页,正好有一款游戏Kick Ass可以让你发泄一下,如果看到那个网页不爽就可以用下面方法摧毁它~. 在地址栏中输入下面的代码并按下回车:. (IE用户粘贴到地址栏后需要删除“本文来源无聊哦 | 原文地址:http://www.wuliaoo.com/kick-ass.html”).

网页命名规则

- Bloger - 博客园-首页原创精华区
  内容:content/containe.   页面外围控制整体布局宽度:wrapper.   左右中:left right center.   登录条:loginbar.   友情链接:friendlink.   版权:copyright.   合作伙伴:partner.   容器: container.

Webbygram:网页版Instagram再生

- - 互联网的那点事
Webbygram是在Instagram被收购后,另外打造的网页版Instagram,这填补了过去Instagram网页版的空白,它为笔记本和台式用户带来了更强大的图片互动功能,让你轻松把图片互动应用从手机小屏幕搬到电脑大屏幕. 从Instagram Android平台上的巨大成功,我们意识到好的事情是值得我们等待的.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

Javascript抽取网页正文

- - 脚本爱好者
最近在开发http://www.sokers.com的时候需要抽取网页正文,在网上也看了很多算法,但效果感觉都不好,有的根本打不开无法看到效果,于是自己就试着写了一个,效果还不错,支持图片和Flash,不仅仅能抽取文字. 方法就是适用打分机制,把正文文字和标签的比例、标点符号、换行等因素累加起来,打分最高的就是正文,当然肯定有识别不出来的,这个是任何算法都无法避免的.