构建 3D 网页新世界

<p>今年下半年， HTML5 和 WebGL 变成极热门词语，3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D 网页技术方案的发展，各种实验性项目层出不穷。这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D 物体形象的展示。</p>
<h3>何谓 WebGL ？</h3>
<p>WebGL 是网页开发语言 JAVA Script 形式的绘图 API 接口，提供设备硬件图形能力的直接调用。HTML5 则是网页开发语言新标准，提供了网页上的 Canvas “画布”供网页上的 3D 对象展现。</p>
<p>简单的说，在此之前，3D 物体形象在网页上不能直接展示，必须使用非标准的特殊网页语言语法或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案，使程序员可以直接在网页上展示物体的 3D 形象，并且这种展现直接使用设备的图形处理器的处理能力,其绘图性能能够得到保证。3D 网页技术应用很广，体验 3D 网页也非常简单，我们只需要桌面电脑支持现代的图形显示设备，同时，必须安装足够高版本的新型浏览器，诸如 firefox 和 Chrome 即可。</p>
<p style="TEXT-ALIGN: center" sizset="4" sizcache="7"><a href="http://alibuybuy-img11.stor.sinaapp.com/2011/11/d9c1_webgl_575px.jpg" sizset="4" sizcache="7"><img title="webgl_575px" alt="" src="http://alibuybuy-img11.stor.sinaapp.com/2011/11/d9c1_webgl_575px.jpg" width="575" height="320"/></a></p>
<p><strong>3D 网页游戏</strong></p>
<p>先说说 3D 网页游戏，在这场技术浪潮中，先知先觉的游戏厂商真正积极研发 WebGL 游戏引擎，为 3D 网页游戏潮流的到来提前进行技术储备。<br/>Mozilla 社区的 Paladin 项目组正在开发名为“Gladius”<a href="https://wiki.mozilla.org/Paladin" target="_blank">WebGL 3D 游戏引擎</a>，CopperLicht 则是一个快速 JAVAScript 的 WebGL 游戏引擎，在其网站上提供了一批 WebGL 游戏场景范例，其中不少的 3D 场景甚至可以媲美传统的 PC 桌面游戏。它们的效果可以在 <a href="http://rescuefox.mozillalabs.com/src/index.html" target="_blank">ResureFox</a> 和<a href="http://www.ambiera.com/coppercube/webgldemos.html" target="_blank"> ambiera</a> 网站看到。</p>
<h3>3D 地图</h3>
<p>而 3D 地图是另外一个关键应用。和目前的枯燥平面地图相比，3D 地图可以以旋转的视角查看街景、建筑物的立体形状，用户有身临其境的感觉，体验非华丽、无以形容。在 MapsGL 项目中，3D 地图的先行者 Google 正利用 WebGL 技术提供 3D 街景地图。按照 Google 的说法，他们在“重新打造了 Google 地图……提供更强大的性能、更丰富的 3D 图形、更流畅的图像过渡效果和 45° 视图旋转效果，以及能更方便地访问街景视图。”</p>
<p>要查看其效果，你可以直接访问 Google Maps 网页，并选择打开 MapsGL 功能。当地图的比例放大到一个街道路口大小的时候，平面的地图就会展示成 3D 的街景。下面是使用 MapsGL 功能访问美国曼哈顿周围的地图看到景观截图，转动图上的罗盘或者移动鼠标，查看的视角随之转动，其效果仿佛本人在曼哈顿的街道上闲逛。</p>
<p sizset="5" sizcache="7"><a href="http://www.ifanr.com/60391/jiejing" rel="attachment wp-att-60759" sizset="5" sizcache="7"><img class="aligncenter" title="jiejing" alt="" src="http://alibuybuy-img11.stor.sinaapp.com/2011/11/36c5_jiejing.jpg" width="551" height="300"/></a><a href="http://www.ifanr.com/60391/jiejing" rel="attachment wp-att-60759"></a></p>
<p><a href="http://www.ifanr.com/60391/jiejing" rel="attachment wp-att-60759"><br/></a></p>
<p>可以想象，当每个城市都完成了 3D 的建模，并通过网页提供服务，3D 地图之上能够叠加各种有趣的服务，例如：3D 寻路导航，虚拟旅游，美食查找、网络社交、网络游戏等等。这些应用有目前的 2D 的版本，安装插件可以实现不怎么流畅的 3D 效果，但在未来的 3D 网页中，逼真的 3D 城市街景呈现了流畅的视角转换后，它将带来迥异的用户体验。</p>
<h3>3D 社交网络</h3>
<p>3D 技术能演变出有趣应用，其中，最有趣的当属基于 3D 地图的网络社交。目前现在的社交 SNS 网站是都是基于文字、图片、视频的内容，所使用的地图是平面的地图。试想一下，未来的网络社交的背景是逼真的 3D 街景，您在“街上”行走的时候，可以真实的推开其中的一扇店门，“真实”的去某个咖啡店买一杯咖啡，还能看到朋友的 3D 形象，坐在靠窗的桌子上看书，您可以走过去和“他/她”说话。</p>
<p>这并非痴人说梦，Google正在做这方面的尝试：在 YoubeQ 项目中构建 Google Earth 里的 3D 社交网络。用户化身为一个 3D 小人，在Google Earth展示的街景中闲逛，碰到朋友能聊聊天。这个项目在Google Earth能够支持网页模式之后，访问势必更加简单直接。</p>
<h3>移动设备中的 3D</h3>
<p>和我们日常相关的，还有平板电脑上的 3D 网页应用。相比其他设备，平板电脑更适合运行 3D 网页应用。在平板电脑中，三维的立体形象与手指的操作能够很好的结合在一起。比如，Google 的<a href="http://workshop.chromeexperiments.com/bookcase" target="_blank">3D 圆筒书架</a> 是在 PC 电脑实现的 3D 网页应用，书架实现为巨大的柱状多层转筒， 鼠标拖曳可以模拟<a href="http://v.youku.com/v_show/id_XMzE0MjUwNTQ4.html" target="_blank">手转动书架找书</a>。想象一下，如果该应用用在平版电脑上，用手指转动书架，然后使用一个手指向上的手势来取书，是不是更爽一些？</p>
<p sizset="6" sizcache="7"><a href="http://www.ifanr.com/60391/bookcase" rel="attachment wp-att-60760" sizset="6" sizcache="7"><img class="aligncenter" title="bookcase" alt="" src="http://alibuybuy-img11.stor.sinaapp.com/2011/11/45f7_bookcase.jpg" width="550" height="395"/></a></p>
<h3>3D 我们的世界</h3>
<p>可以想象，3D 网页技术普及之后，我们的世界将被充分的 3D 模型化，大到地球、宇宙天体、小到汽车、房子、电子产品、微生物、细菌，都可以有详尽的细节的 3D 形象，我们可以以此趣味的展示和探索周围精彩的世界。去年年底，Google 推出的人体浏览器 3D 网页应用，把人体进行 3D 建模，能够以各种视角 360 度查看人体每个器官，包括骨骼、肌肉、内脏器官、神经系统等。（此应用为 Google 实验室的成果，目前该应用的 Google 网页已经关闭，相关的人体 3D 医学影像由 Zygote 网站继续提供运营。有兴趣的朋友可以看看<a href="http://v.youku.com/v_show/id_XMjMwOTgzODEy.html" target="_blank">人体浏览器的运行视频</a>）</p>
<p sizset="7" sizcache="7"><a href="http://www.ifanr.com/60391/bodybrowser" rel="attachment wp-att-60761" sizset="7" sizcache="7"><img title="bodybrowser" alt="" src="http://alibuybuy-img11.stor.sinaapp.com/2011/11/c8ad_bodybrowser.jpg" width="549" height="382"/></a></p>
<p></p>
<h3>瓶颈</h3>
<p>然而，先进技术的发展需要一个漫长的过程。其中，复杂物体的 3D 建模是 3D 网页主要的应用瓶颈之一，举例来说，程序员需要展示一个 3D 的轮船，把这个轮船表示为计算机能理解的多边形平面的组合是一个复杂的事情，对网页开发程序员来说，最好有现成的轮船的 3D 模型可以使用，不需要关注建模的细节。3D 网页的世界也许需要一个价格低廉的巨大 3D 模型库，囊括周围世界的各种物体。对此，Google 的做法是发动全球的爱好者<a href="http://sketchup.google.com/3dwarehouse/" target="_blank">创建和共享 3D 模型</a>，这种做法是否会造成资源垄断，和未来的中小 3D 应用开发者能否得益，那是今后值得思考的问题。</p>