視頻

手機(jī)識(shí)別下方二維碼體驗(yàn)

或點(diǎn)擊：體驗(yàn)入口

PART 01 導(dǎo)讀

在接到“五大名酒”之一的洋河想要打造白酒虛擬展館的需求時(shí)，我們就在思考：現(xiàn)在的年輕人真的不愛喝白酒了嗎？白酒年輕化究竟要怎么做？虛擬空間這類創(chuàng)新型數(shù)字化產(chǎn)品能給酒企帶來(lái)什么......

在看到近期白酒行業(yè)的系列熱點(diǎn)事件，比如茅臺(tái)醬香味冰淇淋、聯(lián)名瑞幸的醬香拿鐵等，幾近是全民狂歡，就連那些不喜歡白酒辛辣口味的年輕人都表現(xiàn)出極大興趣，讓其成為了他們的第一口茅臺(tái)。這讓我們意識(shí)到，與其說(shuō)年輕人不愛喝白酒，不如說(shuō)是平日里“年輕人第一口酒”的打開方式不對(duì)。白酒年輕化不是光考慮怎么賣酒給年輕人，而是要更注重讓用戶基于心理偏好率來(lái)率先建立對(duì)“第一口酒”的品牌認(rèn)知。

而虛擬空間則是用更酷的數(shù)字化方式來(lái)建立這品牌認(rèn)知。我們?cè)O(shè)想，洋河元宇宙展館不止是一個(gè)線上展館，而是一個(gè)可以“沉浸式體驗(yàn)品牌文化、白酒釀造工藝+游玩式社交互動(dòng)、玩酒藏酒+一鍵式查看、下單商品”的數(shù)字化地基。

現(xiàn)今洋河元宇宙展館上線僅3天，體驗(yàn)次數(shù)超50萬(wàn)，用戶數(shù)達(dá)22萬(wàn)。上線2周，互動(dòng)次數(shù)超過(guò)200萬(wàn)，平均訪問(wèn)時(shí)長(zhǎng)達(dá)3：30秒，收獲了極高的關(guān)注度和好評(píng)。

未來(lái)，我們將會(huì)繼續(xù)在此地基上不斷更新和完善內(nèi)容（圣誕節(jié)活動(dòng)、新年慶、新品發(fā)布），讓這個(gè)空間能夠成為年輕人打開白酒的第一個(gè)場(chǎng)景；并且鏈接品牌官網(wǎng)陣地，里外呼應(yīng)，加上電商和直播，逐步建立起完整的數(shù)字陣地，助力爭(zhēng)奪“年輕人第一口酒”。

PART 02 項(xiàng)目策劃

一、整體規(guī)劃

在立項(xiàng)階段，我們就在想：怎么把長(zhǎng)輩們愛喝的白酒，也能在我們年輕人眼里煥發(fā)時(shí)尚、個(gè)性化的魅力呢？最終敲定了這幾個(gè)目標(biāo)：

在交互創(chuàng)意上，要有一條貫穿全場(chǎng)的主線，要簡(jiǎn)單清晰，要每步互動(dòng)有不一樣的體驗(yàn)；

在視覺設(shè)計(jì)上，要講好白酒品牌的故事，要展現(xiàn)白酒的文化底蘊(yùn)、現(xiàn)代科技、時(shí)尚美感；

在技術(shù)升級(jí)上，要有更流暢的操作，要讓交互更有趣，讓視覺呈現(xiàn)更上一層樓。

據(jù)此我們整合各方創(chuàng)意想法，讓項(xiàng)目?jī)?nèi)容呈現(xiàn)如下：

二、用戶旅程

洋河股份元宇宙展館-主線劇情：用戶通過(guò)體驗(yàn)不同互動(dòng)場(chǎng)景，獲得自己私藏酒，完成“私藏封壇儀式”，抽取夢(mèng)之藍(lán)獎(jiǎng)品。

01 媒體推廣入口

虛擬空間能以鏈接、二維碼的形式配置在圖片、視頻、文章中，投放到微信公眾號(hào)&朋友圈、微博、抖音、小紅書、電商店鋪、官網(wǎng)、百度等多個(gè)社媒平臺(tái)，并能快速訪問(wèn)。

02 元宇宙展館

（一）主線流程

1.做任務(wù)

（1）品牌文化體驗(yàn)

將品牌文化與標(biāo)志性物品相結(jié)合，以3D交互的方式呈現(xiàn)給用戶，告別強(qiáng)制性植入品牌文化的方式。

靠近「天下第一壇」，觸發(fā)場(chǎng)景互動(dòng)

滑動(dòng)屏幕體驗(yàn)3D品牌文化內(nèi)容

（2）商品互動(dòng)購(gòu)買

在富有「曲水流觴」意境的場(chǎng)景下，還原超逼真的產(chǎn)品實(shí)物，將產(chǎn)品的形態(tài)和賣點(diǎn)完美呈現(xiàn)在用戶面前，同時(shí)提供一鍵跳轉(zhuǎn)京東購(gòu)買功能，做到看酒也能把酒買了。

靠近酒，點(diǎn)擊查看酒詳情

一鍵跳轉(zhuǎn)到京東商城進(jìn)行購(gòu)買

（3）“微醺“氛圍體驗(yàn)

通過(guò)技術(shù)在畫面上制造重影、炫光等效果，從視覺層面上讓用戶體驗(yàn)到一種獨(dú)特微醺感。

走進(jìn)微醺通道，體驗(yàn)微醺氛圍

2.完成私藏酒封壇儀式

體驗(yàn)完前面3個(gè)核心互動(dòng)，將會(huì)觸發(fā)封壇儀式，在私藏區(qū)里解鎖個(gè)人專屬的夢(mèng)之藍(lán)封壇酒！

在專屬封壇酒上簽名，開啟封壇儀式

3.抽獎(jiǎng)

光有虛擬的封壇酒怎么夠，得要有真有機(jī)會(huì)喝上的夢(mèng)之藍(lán)M6+！把抽獎(jiǎng)和封壇酒結(jié)合，讓抽獎(jiǎng)就像是聚集天地精華的能量來(lái)獲取寶物，充滿儀式感。

長(zhǎng)按注入能量，抽取夢(mèng)之藍(lán)等獎(jiǎng)品

（二）參觀體驗(yàn)

1.釀酒工藝全流程

用窯池、窯泥、酒曲、酒甑等釀酒元素搭建場(chǎng)景，配合上場(chǎng)景內(nèi)釀酒工藝的相關(guān)視頻，讓用戶完整感受洋河的好酒是如何釀造出來(lái)的。

復(fù)刻釀酒工藝

2.洋河航天數(shù)字藏品

洋河股份作為中國(guó)航天事業(yè)合作伙伴，為了踐行共筑航天夢(mèng)的理念，我們以夢(mèng)之藍(lán)M6+航天數(shù)字藏品為核心元素，在場(chǎng)景內(nèi)打造專屬航天展區(qū)，不僅讓用戶能夠沉浸式體驗(yàn)太空失重，感受航天的魅力，還能將航天數(shù)字藏品的概念展示給用戶。

走進(jìn)航天展區(qū)，感受太空失重

（三）社交體驗(yàn)

1.多人交流

這里就像在線下逛展一樣是個(gè)社交場(chǎng)所，可以和他人進(jìn)行聊天互動(dòng)，也可以用表情和動(dòng)作來(lái)輔助表達(dá)情緒。

聊天、發(fā)表情、做動(dòng)作

2.拍照分享

能夠打卡拍照，分享照片到社交平臺(tái)上與別人互動(dòng)。

拍照分享至社交平臺(tái)

三、創(chuàng)意亮點(diǎn)

01 國(guó)風(fēng)屬性與現(xiàn)代元素的融合

在場(chǎng)景設(shè)計(jì)上，首先要符合洋河的品牌顏色、白酒的國(guó)風(fēng)屬性，其次要帶有現(xiàn)代元素，降低國(guó)風(fēng)的復(fù)雜度保證展館易于傳播。最終我們?cè)趫?chǎng)景設(shè)計(jì)上以洋河的藍(lán)色為主色調(diào)（品牌顏色），元素上主要結(jié)合了國(guó)畫的曲水流觴（國(guó)風(fēng)屬性）和具有科技感的漫天星光（現(xiàn)代元素）。

02 極具儀式感的主線互動(dòng)

為了能在展館中加入白酒銀行的理念，我們搭建了私藏區(qū)場(chǎng)景。場(chǎng)景中陳列著帶有用戶簽名的私壇酒，并且在主線流程上，我們以封壇酒為核心要素，讓用戶能完整體驗(yàn)到整個(gè)封壇流程，同時(shí)還能看到其他人的封壇酒，營(yíng)造白酒銀行的氛圍。

在主線互動(dòng)中融入線下的儀式感的方式，讓洋河白酒銀行的價(jià)值理念，以一種自然的形態(tài)進(jìn)入到用戶的體驗(yàn)過(guò)程中。

03 趣味交互豐富用戶體驗(yàn)

為了豐富用戶在展館中的體驗(yàn)，我們?cè)谝恍﹫?chǎng)景上設(shè)計(jì)了一些趣味的交互設(shè)計(jì)，比如用戶從其他區(qū)域進(jìn)入到航天展區(qū)時(shí)會(huì)離地漂浮，感受在太空中的失重體驗(yàn)。

趣味交互的加入，在不經(jīng)意間給用戶帶來(lái)驚喜，引導(dǎo)進(jìn)一步探索展區(qū)。

以上幾個(gè)方面的創(chuàng)意設(shè)計(jì)，在不同程度上帶來(lái)了更豐富的用戶體驗(yàn)，用戶更愿意在展館停留、漫游，平均訪問(wèn)時(shí)長(zhǎng)高達(dá)3：30秒。

四、視覺設(shè)計(jì)

01 場(chǎng)景設(shè)計(jì)

1.1 情緒版

在場(chǎng)景主題上，展現(xiàn)符合洋河品牌的歷史文化感，以及系列產(chǎn)品如海洋天空的柔美和夢(mèng)幻感，并融入科技、潮流的元素，讓人眼前一亮，感受酒文化與科技的和諧交融。

1.2 白膜效果圖

整體結(jié)構(gòu)借鑒隋唐建筑風(fēng)格，讓場(chǎng)景古樸大氣且富有現(xiàn)代活力。

1.3 過(guò)程稿

整個(gè)酒展區(qū)以“山水卷軸、曲水流觴”為主題，營(yíng)造歷史文化和現(xiàn)代夢(mèng)幻交融的氛圍。

更多展區(qū)過(guò)程稿

1.4 高精度酒瓶

超精細(xì)地還原酒瓶的色彩和玻璃質(zhì)感。

點(diǎn)擊查看酒瓶效果

1.5 動(dòng)態(tài)效果

通過(guò)增加流水、螢火蟲、山霧、光效等的動(dòng)態(tài)效果，給場(chǎng)景注入生命活力。

流水夢(mèng)幻

星光點(diǎn)點(diǎn) 云煙縹緲

飛流直下

流光如夢(mèng)

1.6 建筑紋理

建筑上的花紋、雕刻、地毯、天花板等地方，都用了大量國(guó)風(fēng)文化元素，如山水畫、寶相花紋、白酒酒瓶貼花等。

02 虛擬人角色

在原有現(xiàn)實(shí)宇航員人物的基礎(chǔ)上，加入部分中國(guó)風(fēng)元素，主題風(fēng)格保持科技風(fēng)，造型上減輕笨重感，整體更加輕盈，縮小了背包的尺寸與繁瑣的結(jié)構(gòu)，讓整個(gè)角色顯的更靈活，色彩上以洋藍(lán)為主色，添加白色融合，感官上更靚麗干凈整潔。

03 宣發(fā)物料

主視覺以中國(guó)風(fēng)為主，聚焦山水國(guó)畫來(lái)營(yíng)造古風(fēng)寫意，并融入20%科技氛圍，在巨大的宇宙星空映襯下傳統(tǒng)與科技熠熠生輝。

畫面采用平衡式三角構(gòu)圖，以凸顯對(duì)稱美感，再?gòu)闹?strong>適當(dāng)破壞些對(duì)稱性（如畫軸左側(cè)額外點(diǎn)綴松柏）讓畫面更有個(gè)性與活力。

為使畫面聚焦在畫軸中心區(qū)域，對(duì)其著重細(xì)化，并弱化兩側(cè)建筑，做虛實(shí)對(duì)比，讓山水畫軸更為突出，國(guó)風(fēng)寫意躍然紙上。

04 UI 動(dòng)效

UI動(dòng)效的設(shè)計(jì)是以水和酒為主題，應(yīng)用多種曲線元素，并通過(guò)調(diào)配合適的緩動(dòng)函數(shù)，用CSS原生實(shí)現(xiàn)，以追求讓動(dòng)效呈現(xiàn)出更為柔美、舒緩、流暢的效果。

五、技術(shù)升級(jí)

01 高精度還原玻璃材質(zhì)

酒瓶主要是玻璃材質(zhì)，要渲染出真實(shí)玻璃質(zhì)感是個(gè)不小的技術(shù)挑戰(zhàn)。為此我們采用PBR材質(zhì)（PBR材質(zhì)是一種基于物理原理的材質(zhì)系統(tǒng)，能夠更真實(shí)地模擬光線對(duì)材質(zhì)的反射、折射和吸收等物理特性，以呈現(xiàn)更逼真的視覺效果），精細(xì)地調(diào)試其金屬度、粗糙度、透射等參數(shù)，最終真實(shí)模擬出不遜色真實(shí)玻璃的質(zhì)感效果。

除此之外，本次展館還同屏展示14款洋河酒產(chǎn)品，如果仍采用PBR材質(zhì)，就會(huì)對(duì)移動(dòng)端性能消耗十分嚴(yán)重。于是我們采用貼圖混合的方式（如混合光照、粗糙度貼圖…）對(duì)玻璃材質(zhì)進(jìn)行了模擬，最終實(shí)驗(yàn)出實(shí)現(xiàn)了不亞于PBR材質(zhì)且性能優(yōu)秀的高精度渲染效果。

感興趣的可以點(diǎn)擊下方體驗(yàn)入口自由體驗(yàn)：

點(diǎn)擊體驗(yàn)入口

02 流暢的千人同屏實(shí)時(shí)在線

在網(wǎng)頁(yè)端要實(shí)現(xiàn)同屏千人流暢的實(shí)時(shí)互動(dòng)（能四處漫游、四處交流......），不同的環(huán)節(jié)都有巨大的挑戰(zhàn)。

技術(shù)組通過(guò)實(shí)現(xiàn)帶動(dòng)作人物模型的實(shí)例化繪制，來(lái)達(dá)到當(dāng)場(chǎng)景中有1000個(gè)人物時(shí)，draw call 數(shù)也不會(huì)像之前增加到1000，而仍然僅為1，極大地優(yōu)化了渲染層面的性能；還通過(guò)采用多細(xì)節(jié)層級(jí)（LOD）的技術(shù)方案，來(lái)大量減少渲染模型的面數(shù).....通過(guò)系列的技術(shù)處理和優(yōu)化，最終真正實(shí)現(xiàn)了上千人流暢的實(shí)時(shí)互動(dòng)體驗(yàn)。

（具體實(shí)現(xiàn)方案可點(diǎn)擊文章了解：《真·千人同屏-虛擬世界的“煙火氣”》）

03 在Three.JS上搭建新的相機(jī)系統(tǒng)

由于ThreeJS引擎本身相機(jī)系統(tǒng)的局限性，難以實(shí)現(xiàn)自由的運(yùn)鏡切換功能。技術(shù)組通過(guò)不斷的代碼迭代，加上Theatre.js插件的極致運(yùn)用，最終重新實(shí)現(xiàn)了一套自己的相機(jī)系統(tǒng)。

新的相機(jī)系統(tǒng)支持各個(gè)點(diǎn)位間的平滑切換，并提供可自定義的運(yùn)鏡編輯面板，可以很好的幫助實(shí)現(xiàn)畫面錄制的相關(guān)需求（如展館的開場(chǎng)動(dòng)畫）。

04 實(shí)現(xiàn)虛擬空間的全區(qū)域互動(dòng)

本次項(xiàng)目我們真正意義上實(shí)現(xiàn)了空間的全區(qū)域互通——把五個(gè)展區(qū)場(chǎng)景都在一個(gè)空間中，用戶訪問(wèn)不同展區(qū)不再需要跳轉(zhuǎn)重新加載，而打斷體驗(yàn)了。

這有賴于我們對(duì)空間場(chǎng)景進(jìn)行了深度的幀率優(yōu)化，比如合并模型降低drawcall，整合貼圖，根據(jù)相機(jī)距離控制模型顯隱、LOD等等。這不僅讓一個(gè)空間能有更多不同場(chǎng)景，有更高的可塑性，也在性能上做到了讓中低端機(jī)型（如iPhone8）能穩(wěn)定流暢體驗(yàn)。

數(shù)英獎(jiǎng)案例展示

創(chuàng)作名單

編輯：歐陽(yáng)、小蕓、子健、美曉
技術(shù)顧問(wèn)：馬世杰、海青、yy、馬志強(qiáng)
視覺顧問(wèn)：邱亮、山童、師輝、曾浩明