|
如果要在互聯(lián)網(wǎng)編年史上描述2011年的話，那么無需任何插件即可在瀏覽器中直接嵌入支持硬件加速的3D圖形一定會被記上重重的一筆。隨著大部分現(xiàn)代瀏覽器都增加了對WebGL的支持（微軟IE除外），以及最近發(fā)布的Flash 11，開發(fā)者終于可以開始把構(gòu)建高性能互動3D體驗(yàn)放上議事日程。讓我們用起來看看2011年20大3D網(wǎng)站吧！產(chǎn)品推廣類 廣告工業(yè)永遠(yuǎn)都在積極探索新穎刺激的方式去推廣各種產(chǎn)品，實(shí)時(shí)3D圖形網(wǎng)頁擁有強(qiáng)大的潛能，可以將與消費(fèi)者的互動提升到一個(gè)全新的境界。 1. Rome: 3 Dreams of Black 隨著音樂的響起，《Rome: 3 Dreams of Black》將我們帶入一個(gè)神奇的3D世界，奔跑著的小動物、隨風(fēng)搖曳的綠色植物……這一切一切仿佛來自于美麗的夢境之中。 這是由Chris Milk和Aaron Koblin監(jiān)督指導(dǎo)的互動電影，在Three.js的開發(fā)者M(jìn)r.doob的領(lǐng)導(dǎo)下，由North Kindom、Skellftae、Mirada以及Google Data Arts團(tuán)隊(duì)聯(lián)合開發(fā)。 雖然本文所列舉的作品沒有先后排名，但是如果讓我選擇一個(gè)最好的，那么毫無疑問應(yīng)該是這一個(gè)。稱其為一個(gè)劃時(shí)代的作品也無可厚非，它充分展現(xiàn)了WebGL在瀏覽器中的表現(xiàn)力。 
2. Nissan: The Planet Zero 這是由ROXIK使用自主開發(fā)的Sharikura引擎制作的3D交互作品，用于推廣尼桑的新一代綠色環(huán)保汽車。 我們可以在The Planet Zero這個(gè)星球上探尋新的可再生能源，這里是一個(gè)未來的零排放的世界。 這個(gè)作品是基于Flash 10開發(fā)的，這也是本文列舉的所有3D網(wǎng)站里唯一一個(gè)不支持硬件加速的作品，但視覺效果和交互體驗(yàn)卻絲毫不遜于其他作品。
3. Adidas: AdiZero f50 由Stopp為Adidas新足球鞋AdiZero f50開發(fā)的這個(gè)站點(diǎn)，是產(chǎn)品視覺化的一個(gè)偉大范例，我們仿佛可以從中看到網(wǎng)頁3D產(chǎn)品展示更加美好的未來。 在WebGL的渲染下，我們可以改變產(chǎn)品角度，仔細(xì)觀察球鞋的每個(gè)部分，固定或擴(kuò)展視角，查看新球鞋的種種特性。
4. Nissan: StageJUK3D 這一作品是在Flash 11發(fā)布時(shí)一同推出的，它允許我們在全3D環(huán)境中操控尼桑Juke。這是第一個(gè)使用Stage3D技術(shù)的商業(yè)項(xiàng)目。 它是由Adobe、Nissan Europe和Digitas France共同開發(fā)的，使用了Away3D引擎。
自我營銷類 慢慢的許多工作室也開始將創(chuàng)新特性帶入它們自己的網(wǎng)站，為客戶展示新的互聯(lián)網(wǎng)可能。 5. Nouvelle Vague 這是由法國工作室Ultranoir開發(fā)的一個(gè)基于Twitter的WebGL體驗(yàn)。 我們可以設(shè)置一個(gè)標(biāo)簽，然后所有帶有此標(biāo)簽的微博都會被飛艇、熱氣球等等帶來，降落在圍繞著女神像的緞帶上。
6. Les Chinois 這是由法國工作室Les Chinois基于Flash 11開發(fā)的作品，使用了Away3D引擎。 沁人的音響效果和創(chuàng)新的相機(jī)視角組合在一起，在Stage3D的渲染下，為我們帶來了一個(gè)由飛龍住在的未來場景。
在線工具類 7. 3DTin 3DTin是一個(gè)使用WebGL技術(shù)開發(fā)的3D建模工具，你可以在瀏覽器中創(chuàng)建自己的3D模型。 模型可以保存在云端或者導(dǎo)出為標(biāo)準(zhǔn)的3D文件格式，例如.obj文件或Collada。
8. My Robot Nation My Robot Nation結(jié)合了WebGL、機(jī)器人和3D打印。用戶可以在線制作一個(gè)機(jī)器人模型，然后通過3D打印制作出來，然后郵寄到家。 用戶可以自定義機(jī)器人的不同的身體部位、印記和顏色。所有的這些操作都是實(shí)時(shí)的，你可以拖拽、旋轉(zhuǎn)、放置這些裝飾印記。 這一作品將3D打印帶入了普羅大眾的生活，3D打印第一次變得這么簡單。和其開發(fā)者說的一樣，這還只是個(gè)開始！
數(shù)據(jù)可視化類 3D圖形的一個(gè)重要應(yīng)用就是數(shù)據(jù)可視化，其中存在著無限可能，讓我們來看看如下的范例。 9. BioDigital Human BioDigital Human是一個(gè)讓人耳目一新的3D人體瀏覽器，在多種交互方式下讓你更好的了解身體的構(gòu)造。 我們可是在其中探索、解剖，分享自定義視角，將3D圖像與具體的醫(yī)學(xué)描述結(jié)合起來，提供給病人、學(xué)生和醫(yī)生作為參考。
10. WebGL Bookcase WebGL Bookcase是由Google Data Arts團(tuán)隊(duì)開發(fā)的體驗(yàn)界面，旨在將傳統(tǒng)媒體轉(zhuǎn)換到3D空間之中。 開發(fā)者設(shè)計(jì)了一個(gè)螺旋上升的3D書柜，其中放置有超過10000本圖書。用戶可以瀏覽圖書的封面或者根據(jù)標(biāo)題搜索，打開單本書籍之后會顯示每本書的3D模型；同時(shí)還會顯示一個(gè)二維碼，方便你下載到手機(jī)上閱讀。
11. CNN Ecosphere CNN Ecosphere是一個(gè)實(shí)時(shí)的Twitter視覺化作品，可以顯示出有多少條和氣候變化相關(guān)的微博。 作品的主體部分是一個(gè)3D的球體，上面生長著若干顆由一條條微博組成的茁壯的樹木。這個(gè)作品是由Heimat-Berlin構(gòu)思的，由Minivegas和Stinkdigital工作室開發(fā)。
12. TwitterGraph Twitter Graph是一個(gè)交互的3D標(biāo)簽云，視覺化的展現(xiàn)了Twitter用戶之間共同關(guān)注的朋友。 開發(fā)者Daniel Pettersson在另外一個(gè)稱為ArtistGraph的作品中使用了來自last.fm的數(shù)據(jù)，來顯示音樂團(tuán)體和藝術(shù)家之前的相似度。
13. WebGL Globe WebGL Globe可以用3D的方式表現(xiàn)出我們這個(gè)星球上的數(shù)據(jù)，例如世界人口、地震分布和某個(gè)關(guān)鍵詞的搜索量。 這個(gè)作品也是由Google Data Arts團(tuán)隊(duì)開發(fā)的，這個(gè)項(xiàng)目同時(shí)也是開源的，任何人都可以基于這個(gè)數(shù)據(jù)視覺化平臺導(dǎo)入自己的數(shù)據(jù)制作出應(yīng)用。 基于其開發(fā)的其他應(yīng)用也越來越有趣，例如世界航班分布、天氣和互聯(lián)網(wǎng)流量。
在線地圖類 未來的地圖工業(yè)無疑應(yīng)當(dāng)是屬于3D的。目前我們已經(jīng)可以開始看到地圖應(yīng)用在硬件加速圖形系統(tǒng)的強(qiáng)大支持下，創(chuàng)立具有更加豐富細(xì)節(jié)的體驗(yàn)。 14. Nokia Maps 3D 目前Nokia Maps 3D僅僅支持一些主要城市的3D化。正如其名，它使用了WebGL技術(shù)來渲染地形和建筑物，你可以像在真實(shí)生活中一樣置身其中，隨意的移動和瀏覽。 比起來Google Maps，它更像是Google Earth，擁有360度全景瀏覽功能，點(diǎn)擊城市的名字可以前往該城市。
15. Google MapsGL 這是Google將整個(gè)世界鏡像到你的瀏覽器中的偉大夢想的第一步，新的MapsGL選項(xiàng)將WebGL的強(qiáng)大威力帶入到Google Maps中。 它增強(qiáng)了3D建筑物的瀏覽體驗(yàn)，建筑物的陰影也是根據(jù)當(dāng)?shù)貢r(shí)間實(shí)時(shí)計(jì)算出來的，可以平滑轉(zhuǎn)換到45度角的觀察模式，還可以進(jìn)入街景模式。 你可以點(diǎn)擊Google Maps左側(cè)的“邀您體驗(yàn)MapsGL”來進(jìn)入Google MapsGL。
16. Blocky Earth 作者Jaume Sanchez稱這個(gè)作品為“化整個(gè)星球?yàn)橐粋�(gè)區(qū)塊”，它可以把一個(gè)地區(qū)根據(jù)圖片或者高度數(shù)據(jù)用垂直像素的形式表現(xiàn)出來。 距離較近的視角中你只能看到你所在的地方，當(dāng)你縮小時(shí)圖之后你可以看到震撼的山高水深。
在線編程類 因?yàn)镴avaScript是運(yùn)行于瀏覽器中的，所以很多在線實(shí)時(shí)編程的站點(diǎn)涌現(xiàn)出來。下面的這兩個(gè)范例非常有趣，作為學(xué)習(xí)工具非常有潛力可挖。 17. GLSL Sandbox GLSL Sandebox是一個(gè)讓開發(fā)者可以直接在瀏覽器內(nèi)編寫片元著色器代碼的應(yīng)用。GLSL是著色器使用的語言，在這個(gè)應(yīng)用里你可以編寫片元著色器代碼并且能收實(shí)時(shí)看到效果反饋。 它的界面很簡單，效果作為背景顯示在瀏覽器中，上面是代碼。你編寫的代碼可以自動保存到服務(wù)器端。 最初這個(gè)項(xiàng)目是有Mr.doob建立的，目的是吸引更多的開發(fā)者創(chuàng)造出炫目的視覺效果、測試渲染甚至制作簡單的游戲。其中越來越多還在不斷增加的代碼示例迅速成為了絕佳的學(xué)習(xí)研究WebGL的工具。
18. WebGL Playground 和時(shí)下流行的編程工具一樣，WebGL Playground允許開發(fā)者可以直接在瀏覽器中調(diào)試代碼。實(shí)時(shí)的編輯器支持JavaScript和GLSL著色器語言，可以讓代碼編寫更加輕松。 這個(gè)工具的目的在于縮短開發(fā)周期，讓開發(fā)者可以將更多精力和時(shí)間放在創(chuàng)意上。所有需要的東西都會自動在后臺載入，代碼也會自動整理、格式化，包括語法高亮。 目前這個(gè)應(yīng)用還處于早期的測試階段，不過很有潛力能夠成為另一個(gè)優(yōu)秀的學(xué)習(xí)工具。
Demo類 這一年里我們看到了很多Demo，在這里我們列出其中兩個(gè)技術(shù)含量高并且超級吸引眼球的例子。 19. Chrysaora Chrysaora是一個(gè)實(shí)時(shí)的水母箱的模擬應(yīng)用，使用了逼真的渲染和模擬技術(shù)，由Aleksandar Rodic開發(fā)，在表現(xiàn)出作者極具天賦的創(chuàng)意的同時(shí)，也展示了高超的技術(shù)性。
20. WebGL Water 由Evan Wallace開發(fā)的WebGL Water是一個(gè)將諸如反射、折射、焦散、環(huán)境光遮蔽等高端渲染技術(shù)完美結(jié)合在一起，模擬一個(gè)水池的應(yīng)用。
BONUS & ENCORE 21. Lights by Ellie Goulding 一個(gè)為英國歌手Ellie Goulding的歌曲《Lights》制作的互動音樂電視，使用了WebGL技術(shù)。詳情可以參考我們之前的文章《時(shí)下 WebGL 的轟動作品 ——“Lights”的幕后故事》。
22. HelloRacer 一個(gè)高端的F1賽車模擬作品，同時(shí)有WebGL、Flash 11和Unity的三種版本。
23. Helloflower Online 這是一個(gè)可以設(shè)計(jì)花朵的3D編輯器。最初是為了用于iPad應(yīng)用，在線的版本需要安裝Unity插件。
結(jié)語 回顧這一年中的3D網(wǎng)站，我們可以看到一個(gè)有趣的趨勢正在慢慢浮現(xiàn)。致力于廣告、娛樂、產(chǎn)品展示和數(shù)據(jù)視覺化領(lǐng)域的開發(fā)者已經(jīng)開始利用支持硬件加速的3D圖形特性，為受眾帶來更豐富更有沉浸感的交互體驗(yàn)。此外，游戲和demo的開發(fā)者也制作出了讓人贊嘆不已的作品，不斷推進(jìn)著瀏覽器能力的技術(shù)前沿。 好事還不僅如此。另一方面，一些專業(yè)的3D開發(fā)工具，例如Unity和Unreal UDK都將支持Flash 11；而WebGL也獲得了巨大的動力，無數(shù)的開發(fā)社區(qū)在不斷增長，而且很快也將到達(dá)移動平臺。 不同的技術(shù)給予創(chuàng)新型團(tuán)隊(duì)足夠的選擇去完成他們的工作和需求。這是一個(gè)令人激動的時(shí)代，我們期待著明年更好的未來！ 原文地址：http://www.netmagazine.com/features/2011-review-20-sites-took-3d-next-level |
