云游大美中国H5,AIGC创作幕后分享

举报 2023-12

1703740072140788.jpg

你见过怎样的大美中国?科技与艺术碰撞又会产生怎样的涟漪?用AIGC重绘中国大美自然风光、人文历史、城市印象。结合3D沉浸式体验东方美学中传统文化之美。

互动录屏

扫码体验3D互动


关于《云游大美中国系列互动作品

随着元宇宙、3D虚拟展厅概念渐渐归于理性,与其说我们在这些项目上获得成功经验,不如说是积累了“踩坑”经验更为恰当。

加载久、用户互动成本高、体验不流畅、跳出率高是这类项目的通病。但是web3D能实现的效果远不止于此,我们希望产出一个尽可能扬长避短的web3D沉浸式演绎的互动内容。

结合当下热门的AIGC,我们联合数字艺术家安史AN-AI,以大美中国AIGC画作展示为核心内容,一起完成《云游大美中国》系列互动作品。

数字艺术家安史AN-AI 大美中国系列 部分作品


项目思考

首先我们排除了“展厅”模式,历史项目经验告诉我们:艺术馆、博物馆等画作展出形式,在模拟真实世界走到画作前点击查看的互动过程,非常繁琐用户极易流失。

“走”到画作前点击观看的互动成本非常高

其次我们复盘了自己的另一个项目《数创南翔 古韵新象》2023上海AIGC大赛获奖作品云展厅的实际效果。这个项目我们将用户的互动成本缩减到2步。

点击导航按钮直达对应展区/点击地面自由移动

就像逛淘宝那样只需要2步:滑动浏览、点击查看。没有复杂的上手教学,虽然B端C端效果都还不错,但是我们结合大美中国这个主题,还达不到我们想要展现的效果。


画面呈现创意

初期创意碰撞阶段,围绕本期青山绿水这个主题很自然地就联想到“千里江山图”,同时又受到“轻舟已过万重山”画面感的叠加,第一版创意很快地就画了出来。

初版线稿

1703745482931262.jpg

但是在模拟镜头推演过程中,我们认为这样缺少了一些变化,运镜上没有太多发挥空间,导致视觉疲劳而跳出。所以我们把“顺江而行”上升到了“御剑飞行”。

AI出图“打样”

1703749617676484.jpg


项目执行

场景和画作呈现方式确定后,我们发现画作在场景里不够突出,我们选择了用“动态”方式来增加视觉重点引导。于是我们给画作添加了物理引擎让画作像布料那样“生动”起来。

视觉效果、性能测试DEMO


为了保证3d场景在手机上的流畅运行不卡顿,迅捷的加载速度,这对我们三维场景制作以及整体优化要求非常高(非常多的黑科技这里就不多说啦),总的来说就是需要团队紧密配合。

 SVG加载效果。 5秒以内完成加载

初代iPhone XR 维持60fps

高度雾与粒子雾增加写意感


花功夫的优化

视觉部分:所有web3D项目都面临的难题:加载速度、渲染流畅度、机型兼容的考虑,美术往往也需要让步。目前的场景虽然看上去不小,但元素几乎都一样的。场景内所有山体、房子、树、粒子雾、画作模型都是复用。通过程序随机干扰大小、角度等等方式来制造一种“不同”。

非常感谢Shahriar Shahrabi 在模型上的支持

互动部分:比如用户可以自由旋转镜头、更多的“飞行”路线、自由控制前进后退等。这些互动功能虽然能给到用户更大的自由度,但是实测下来绝大多用户并没有这些感知,同时还会打断操作连贯性并增加大量体验学习成本所以我们坚定的去掉了这些“互动”。

体验营造:就像下方这个运镜,使第一视角有一种御剑飞行、翻山越岭、豁然开朗的感观,同时正好放在15-20秒左右的位置,尽可能地让即将产生视觉、体验疲劳的用户"留下来"。

运镜模拟御剑飞行、翻山越岭、豁然开朗的感观



写在最后

云游大美中国依然还有不少可优化的地方,我们还会继续推出系列作品。同时也希望有更多机会与“您”一起去共创。


创作名单

CONTACT
禾喵广告
AN-AI
奇域Al

CREATIVE STAFF
3D GENERALIST: 汪肖熊
3D ENGINEER: 蒋之曦
PROJECT MANAGER: Math

THANKS
Shahrair Shahrabi

MEO 上海

MEO 上海

MEO 上海

阿毛酱的三行代码

 

参与评论

文明发言,无意义评论将很快被删除,异常行为可能被禁言
DIGITALING
登录后参与评论

参与评论

文明发言,无意义评论将很快被删除,异常行为可能被禁言
800

推荐评论

全部评论(2条)