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