URL：http://www.nissanusa.com/the-detour/
為宣傳推廣2014全新日產(chǎn)Rogue SUV，尼桑近日推出一款交互式的無線虛擬試駕網(wǎng)站——“The Detour”。The Detour 是獨(dú)創(chuàng)性的數(shù)字活動，內(nèi)設(shè)谷歌地圖和街景地圖，為世界各地每一位參與者提供了專屬的虛擬試駕體驗(yàn)。
來源: Unit9
編譯: Sherry @DIGITALING
(轉(zhuǎn)載請注明來自數(shù)英DIGITALING)
這個(gè)項(xiàng)目啟用了重量級大咖——頂尖的代理商、谷歌的應(yīng)用軟件、奧斯卡最佳攝影導(dǎo)演Guillermo Navarro、來自美國最著名的電影特效工作室Digital Domain的3D動畫師、UNIT9的內(nèi)部程序員、設(shè)計(jì)師和美工組成的小團(tuán)隊(duì)、著名導(dǎo)演AnrickBregman。
顧客能在一個(gè)html5的網(wǎng)站上體驗(yàn)Nissan全新Rogue SUV的試駕，包括實(shí)景拍攝、3D動畫、界面設(shè)計(jì)、音樂和音效以及每個(gè)用戶的個(gè)人數(shù)據(jù)。對于Nissan來說，這是一個(gè)優(yōu)秀的宣傳推廣方案，也是一次創(chuàng)新。
The Detour 內(nèi)設(shè)的谷歌地圖和最新的API V3版街景地圖。但我們從API上獲得的谷歌地圖僅僅是單一的靜態(tài)的全景圖。因此我們第一個(gè)任務(wù)就是運(yùn)用全景裝置制作動態(tài)的全景影片，為此我們創(chuàng)建的新裝置將允許攝像機(jī)拍攝出動態(tài)的映射圖像，結(jié)合運(yùn)用光學(xué)特效和景深等拍攝技巧使畫面呈現(xiàn)出最佳的視覺效果。
除了全景圖片外，從谷歌地圖API上獲得的反饋信息包含了A、B兩地之間的詳細(xì)路況。我們編制的程序會利用這些信息為你的旅途選擇最佳路線。
系統(tǒng)運(yùn)作第一步便是使用街景服務(wù)來檢查目的地的全景圖像是否可用。然后我們會用汽車圖標(biāo)在地圖上劃出配合旅途的完整路線，同時(shí)過濾和移除系統(tǒng)無法識別或用戶不需要的步驟，比如我們刪除了在隧道里保持街道拍攝這一步驟。
在谷歌地圖上劃出路線圖后，我們就要在路線上加上汽車，從項(xiàng)目開始到編程之前，我們與好萊塢的數(shù)字特效公司DIGITAL DOMAIN的團(tuán)隊(duì)緊密合作。Nissan必須在舊金山完成Rogue系列的拍攝同時(shí)要完成3D動畫形象的制作。
即拍攝一組汽車的連續(xù)鏡頭然后疊加于谷歌街景地圖上。這就需要制定非常詳盡的計(jì)劃，因?yàn)橐獎?chuàng)作出一系列放在任何街道都準(zhǔn)確適用并能適配任意給定街景的拍攝角度的汽車動畫形象是一項(xiàng)艱巨的任務(wù)。
但對于我們來說更重要和更復(fù)雜的是必須準(zhǔn)確無誤地追蹤攝像機(jī)的動向——對于汽車和背景這兩層畫面，任何鏡頭都必須完美匹配。我們知道在這兩個(gè)圖層之間不論是攝像機(jī)的位置還是鏡頭的移動只要有一丁點(diǎn)的偏差，整個(gè)畫面都會被破壞。
當(dāng)兩個(gè)圖層都到位后，我們又開始了新一輪的挑戰(zhàn)：我們該如何保證這兩個(gè)圖層看起來一致？如何確保他們有相同的成色和光線？街景地圖圖像的顏色及飽和度取決于拍攝點(diǎn)的地理位置。亞利桑那州是明黃色，而紐約則是溫和的藍(lán)色。為了要在不同地點(diǎn)之間創(chuàng)建出一種自然過渡的感覺，我們增加了一個(gè)特定的色值，使汽車看起來總是連貫行駛的。
除了標(biāo)準(zhǔn)的成像配置,我們還對大范圍的街景圖片進(jìn)行傳統(tǒng)的后期制作，找到通用的特效，希望使畫面呈現(xiàn)出更高端的視覺質(zhì)感。在HTML5的有限功能下，我們運(yùn)用了非常簡單的技術(shù)來制作街景地標(biāo)，比如顏色、飽和度以及一些巧妙的色彩裝飾物。
然后我們將這種通用特效轉(zhuǎn)譯成代碼，在服務(wù)器應(yīng)用端上進(jìn)行實(shí)時(shí)調(diào)整，實(shí)現(xiàn)每一層畫面都緊密結(jié)合。除了顏色上的貼合，我們還運(yùn)用了其他編碼的效果使分層盡可能不那么明顯。
由于汽車表面和紅色路面上都有反色，因此我們還能建立起街景場景的實(shí)時(shí)跟蹤，每個(gè)街道視圖都需要加倍繁雜的數(shù)學(xué)運(yùn)算來營造自然的反射，正是對細(xì)節(jié)的高度重視，才會讓用戶產(chǎn)生仿佛置身真實(shí)世界駕駛著Rogue的感覺。
所有這些又將迎來一個(gè)新難題：我們該如何為所有用戶提供一個(gè)流暢的互動體驗(yàn)？這些兩個(gè)圖層中所有動態(tài)效果要適用于高清全屏并不是件容易的事兒。但不管用戶的計(jì)算機(jī)設(shè)置怎么樣，我們優(yōu)先考慮的就是要盡最大努力在HTML5有限的瀏覽器兼容支持下使The Detour運(yùn)行流暢。
網(wǎng)站原型通過測試后，我們把關(guān)注重點(diǎn)放在了如何在谷歌街景全景裝置上方安置透明的視頻播放渠道的問題上。很難想象，并不是所有最新的瀏覽器都支持Html5 視頻的透明度。我們運(yùn)用HRML5的canvas元素繪制一個(gè)圖像序列，但這將產(chǎn)生巨大的網(wǎng)絡(luò)流量。因此我們用spritesheet圖集來代替Nissan Rogue的png大圖使網(wǎng)站進(jìn)一步優(yōu)化——最終網(wǎng)站加載的時(shí)間明顯縮短了。
能和M.I.A合作對我們來說真是意外的驚喜，我們非常喜歡她的風(fēng)格，從更實(shí)際的角度來說，她的專輯和The Detour簡直是天作之合。關(guān)于背景音樂的的設(shè)置我們面臨著雙重挑戰(zhàn)：
首先，創(chuàng)建完美的音效與慢鏡頭的無縫過渡將是個(gè)棘手的難題，它要求我們必須重新編輯用戶進(jìn)入和退出時(shí)的音樂，以及慢動作操作Nissan Rogue時(shí)的音頻。我們用多層聲音和音樂來創(chuàng)建一個(gè)無聲剪切，部分采集源自原始音軌，使聲音聽起來更加完美。
其次，從技術(shù)角度來說，在交互式網(wǎng)站中同步聲效是一項(xiàng)很復(fù)雜的工作。
Nisson Rogue此次的活動和一般的商業(yè)活動有一個(gè)關(guān)鍵的區(qū)別：你可以在任何地方選擇參與這個(gè)商業(yè)活動。對于這個(gè)看似簡單的互聯(lián)網(wǎng)活動卻集齊了來自世界各地有才華的牛人為此而努力。
在The Detour上每完成一次虛擬試駕體驗(yàn)，用戶都可以找到當(dāng)?shù)氐慕?jīng)銷商，并安排一次試駕，你還可以到NiassnUSA.com上下載M.I.A的專輯或者分享網(wǎng)站邀請好友一起來試駕。
項(xiàng)目信息
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）