视频
手机识别下方二维码体验
或点击：体验入口
PART 01 导读
在接到“五大名酒”之一的洋河想要打造白酒虚拟展馆的需求时，我们就在思考：现在的年轻人真的不爱喝白酒了吗？白酒年轻化究竟要怎么做？虚拟空间这类创新型数字化产品能给酒企带来什么......
在看到近期白酒行业的系列热点事件，比如茅台酱香味冰淇淋、联名瑞幸的酱香拿铁等，几近是全民狂欢，就连那些不喜欢白酒辛辣口味的年轻人都表现出极大兴趣，让其成为了他们的第一口茅台。这让我们意识到，与其说年轻人不爱喝白酒，不如说是平日里“年轻人第一口酒”的打开方式不对。白酒年轻化不是光考虑怎么卖酒给年轻人，而是要更注重让用户基于心理偏好率来率先建立对“第一口酒”的品牌认知。
而虚拟空间则是用更酷的数字化方式来建立这品牌认知。我们设想，洋河元宇宙展馆不止是一个线上展馆，而是一个可以“沉浸式体验品牌文化、白酒酿造工艺+游玩式社交互动、玩酒藏酒+一键式查看、下单商品”的数字化地基。
现今洋河元宇宙展馆上线仅3天，体验次数超50万，用户数达22万。上线2周，互动次数超过200万，平均访问时长达3：30秒，收获了极高的关注度和好评。
未来，我们将会继续在此地基上不断更新和完善内容（圣诞节活动、新年庆、新品发布），让这个空间能够成为年轻人打开白酒的第一个场景；并且链接品牌官网阵地，里外呼应，加上电商和直播，逐步建立起完整的数字阵地，助力争夺“年轻人第一口酒”。
PART 02 项目策划
一、整体规划
在立项阶段，我们就在想：怎么把长辈们爱喝的白酒，也能在我们年轻人眼里焕发时尚、个性化的魅力呢？最终敲定了这几个目标：
在交互创意上，要有一条贯穿全场的主线，要简单清晰，要每步互动有不一样的体验；
在视觉设计上，要讲好白酒品牌的故事，要展现白酒的文化底蕴、现代科技、时尚美感；
在技术升级上，要有更流畅的操作，要让交互更有趣，让视觉呈现更上一层楼。
据此我们整合各方创意想法，让项目内容呈现如下：
二、用户旅程
洋河股份元宇宙展馆-主线剧情：用户通过体验不同互动场景，获得自己私藏酒，完成“私藏封坛仪式”，抽取梦之蓝奖品。
01 媒体推广入口
虚拟空间能以链接、二维码的形式配置在图片、视频、文章中，投放到微信公众号&朋友圈、微博、抖音、小红书、电商店铺、官网、百度等多个社媒平台，并能快速访问。
02 元宇宙展馆
（一）主线流程
1.做任务
（1）品牌文化体验
将品牌文化与标志性物品相结合，以3D交互的方式呈现给用户，告别强制性植入品牌文化的方式。
靠近「天下第一坛」，触发场景互动
滑动屏幕体验3D品牌文化内容
（2）商品互动购买
在富有「曲水流觞」意境的场景下，还原超逼真的产品实物，将产品的形态和卖点完美呈现在用户面前，同时提供一键跳转京东购买功能，做到看酒也能把酒买了。
靠近酒，点击查看酒详情
一键跳转到京东商城进行购买
（3）“微醺“氛围体验
通过技术在画面上制造重影、炫光等效果，从视觉层面上让用户体验到一种独特微醺感。
走进微醺通道，体验微醺氛围
2.完成私藏酒封坛仪式
体验完前面3个核心互动，将会触发封坛仪式，在私藏区里解锁个人专属的梦之蓝封坛酒！
在专属封坛酒上签名，开启封坛仪式
3.抽奖
光有虚拟的封坛酒怎么够，得要有真有机会喝上的梦之蓝M6+！把抽奖和封坛酒结合，让抽奖就像是聚集天地精华的能量来获取宝物，充满仪式感。
长按注入能量，抽取梦之蓝等奖品
（二）参观体验
1.酿酒工艺全流程
用窑池、窑泥、酒曲、酒甑等酿酒元素搭建场景，配合上场景内酿酒工艺的相关视频，让用户完整感受洋河的好酒是如何酿造出来的。
复刻酿酒工艺
2.洋河航天数字藏品
洋河股份作为中国航天事业合作伙伴，为了践行共筑航天梦的理念，我们以梦之蓝M6+航天数字藏品为核心元素，在场景内打造专属航天展区，不仅让用户能够沉浸式体验太空失重，感受航天的魅力，还能将航天数字藏品的概念展示给用户。
走进航天展区，感受太空失重
（三）社交体验
1.多人交流
这里就像在线下逛展一样是个社交场所，可以和他人进行聊天互动，也可以用表情和动作来辅助表达情绪。
聊天、发表情、做动作
2.拍照分享
能够打卡拍照，分享照片到社交平台上与别人互动。
拍照分享至社交平台
三、创意亮点
01 国风属性与现代元素的融合
在场景设计上，首先要符合洋河的品牌颜色、白酒的国风属性，其次要带有现代元素，降低国风的复杂度保证展馆易于传播。最终我们在场景设计上以洋河的蓝色为主色调（品牌颜色），元素上主要结合了国画的曲水流觞（国风属性）和具有科技感的漫天星光（现代元素）。
02 极具仪式感的主线互动
为了能在展馆中加入白酒银行的理念，我们搭建了私藏区场景。场景中陈列着带有用户签名的私坛酒，并且在主线流程上，我们以封坛酒为核心要素，让用户能完整体验到整个封坛流程，同时还能看到其他人的封坛酒，营造白酒银行的氛围。
在主线互动中融入线下的仪式感的方式，让洋河白酒银行的价值理念，以一种自然的形态进入到用户的体验过程中。
03 趣味交互丰富用户体验
为了丰富用户在展馆中的体验，我们在一些场景上设计了一些趣味的交互设计，比如用户从其他区域进入到航天展区时会离地漂浮，感受在太空中的失重体验。
趣味交互的加入，在不经意间给用户带来惊喜，引导进一步探索展区。
以上几个方面的创意设计，在不同程度上带来了更丰富的用户体验，用户更愿意在展馆停留、漫游，平均访问时长高达3：30秒。
四、视觉设计
01 场景设计
1.1 情绪版
在场景主题上，展现符合洋河品牌的历史文化感，以及系列产品如海洋天空的柔美和梦幻感，并融入科技、潮流的元素，让人眼前一亮，感受酒文化与科技的和谐交融。
1.2 白膜效果图
整体结构借鉴隋唐建筑风格，让场景古朴大气且富有现代活力。
1.3 过程稿
整个酒展区以“山水卷轴、曲水流觞”为主题，营造历史文化和现代梦幻交融的氛围。
更多展区过程稿
1.4 高精度酒瓶
超精细地还原酒瓶的色彩和玻璃质感。
1.5 动态效果
通过增加流水、萤火虫、山雾、光效等的动态效果，给场景注入生命活力。
流水梦幻
星光点点 云烟缥缈
飞流直下
流光如梦
1.6 建筑纹理
建筑上的花纹、雕刻、地毯、天花板等地方，都用了大量国风文化元素，如山水画、宝相花纹、白酒酒瓶贴花等。
02 虚拟人角色
在原有现实宇航员人物的基础上，加入部分中国风元素，主题风格保持科技风，造型上减轻笨重感，整体更加轻盈，缩小了背包的尺寸与繁琐的结构，让整个角色显的更灵活，色彩上以洋蓝为主色，添加白色融合，感官上更靓丽干净整洁。
03 宣发物料
主视觉以中国风为主，聚焦山水国画来营造古风写意，并融入20%科技氛围，在巨大的宇宙星空映衬下传统与科技熠熠生辉。
画面采用平衡式三角构图，以凸显对称美感，再从中适当破坏些对称性（如画轴左侧额外点缀松柏）让画面更有个性与活力。
为使画面聚焦在画轴中心区域，对其着重细化，并弱化两侧建筑，做虚实对比，让山水画轴更为突出，国风写意跃然纸上。
04 UI 动效
UI动效的设计是以水和酒为主题，应用多种曲线元素，并通过调配合适的缓动函数，用CSS原生实现，以追求让动效呈现出更为柔美、舒缓、流畅的效果。
五、技术升级
01 高精度还原玻璃材质
酒瓶主要是玻璃材质，要渲染出真实玻璃质感是个不小的技术挑战。为此我们采用PBR材质（PBR材质是一种基于物理原理的材质系统，能够更真实地模拟光线对材质的反射、折射和吸收等物理特性，以呈现更逼真的视觉效果），精细地调试其金属度、粗糙度、透射等参数，最终真实模拟出不逊色真实玻璃的质感效果。
除此之外，本次展馆还同屏展示14款洋河酒产品，如果仍采用PBR材质，就会对移动端性能消耗十分严重。于是我们采用贴图混合的方式（如混合光照、粗糙度贴图…）对玻璃材质进行了模拟，最终实验出实现了不亚于PBR材质且性能优秀的高精度渲染效果。
感兴趣的可以点击下方体验入口自由体验：
02 流畅的千人同屏实时在线
在网页端要实现同屏千人流畅的实时互动（能四处漫游、四处交流......），不同的环节都有巨大的挑战。
技术组通过实现带动作人物模型的实例化绘制，来达到当场景中有1000个人物时，draw call 数也不会像之前增加到1000，而仍然仅为1，极大地优化了渲染层面的性能；还通过采用多细节层级（LOD）的技术方案，来大量减少渲染模型的面数.....通过系列的技术处理和优化，最终真正实现了上千人流畅的实时互动体验。
（具体实现方案可点击文章了解：《真·千人同屏-虚拟世界的“烟火气”》）
03 在Three.JS上搭建新的相机系统
由于ThreeJS引擎本身相机系统的局限性，难以实现自由的运镜切换功能。技术组通过不断的代码迭代，加上Theatre.js插件的极致运用，最终重新实现了一套自己的相机系统。
新的相机系统支持各个点位间的平滑切换，并提供可自定义的运镜编辑面板，可以很好的帮助实现画面录制的相关需求（如展馆的开场动画）。
04 实现虚拟空间的全区域互动
本次项目我们真正意义上实现了空间的全区域互通——把五个展区场景都在一个空间中，用户访问不同展区不再需要跳转重新加载，而打断体验了。
这有赖于我们对空间场景进行了深度的帧率优化，比如合并模型降低drawcall，整合贴图，根据相机距离控制模型显隐、LOD等等。这不仅让一个空间能有更多不同场景，有更高的可塑性，也在性能上做到了让中低端机型（如iPhone8）能稳定流畅体验。
创作名单
编辑：欧阳、小芸、子健、美晓
技术顾问：马世杰、海青、yy、马志强
视觉顾问：邱亮、山童、师辉、曾浩明
专业评分
专业评分已截止
参与评论
参与评论
推荐评论
全部评论（22条）