网易严选一镜到底讲述《一颗子弹的故事》

企业项目已上线2017-09举报961

网易严选一镜到底讲述《一颗子弹的故事》

扫描,分享朋友圈

Sep . 2017

A bullet story | 一颗子弹的故事 |  

网易严选一镜到底讲述《一颗子弹的故事》

一颗子弹的故事 | The story of the bullet

「 这场名为「发电机行动」的战役已经进行到了第六天。 」

《敦刻尔克》在九月成为了电影界的热门。40 万英法盟军被敌军围困于敦刻尔克的海滩之上,面对敌军步步逼近的绝境,形势万分危急。英国政府和海军发动大批船员,动员人民起来营救军队。而此次我们就以敦刻尔克为背景故事制作了这一支H5。

网易严选一镜到底讲述《一颗子弹的故事》


网易严选一镜到底讲述《一颗子弹的故事》

1940 年,6 月 1 日。这场名为「发电机行动」的战役已经进行到了第六天。

沙滩、灰蓝的军舰、暗色调的飞机、阴霾的天气、士兵脏而厚的军服都渲染着战争的残酷困局。

网易严选一镜到底讲述《一颗子弹的故事》

终于轮到了士兵 J 登船,他带着他的行李箱赶紧爬上了甲板,此刻他毫无与战友挥手告别的心情,只想快点回到海峡对岸。借着涨潮,船离开了海滩,朝对岸驶去。

网易严选一镜到底讲述《一颗子弹的故事》

此刻,一架德军士兵开着机枪对着水面一路扫射,士兵 J 无处可躲,只好蹲下,并把行李箱举过头顶,试图在枪林弹雨中做最后的拼搏。

网易严选一镜到底讲述《一颗子弹的故事》

网易严选一镜到底讲述《一颗子弹的故事》

然而,子弹打断了桅杆,打破了游艇顶部的探照灯,穿过了身旁的救生圈,毫无意外地,也击中士兵 J 的行李箱。

网易严选一镜到底讲述《一颗子弹的故事》

网易严选一镜到底讲述《一颗子弹的故事》

网易严选一镜到底讲述《一颗子弹的故事》1506503448327042.jpg

作为一个很有历史感的题材,在短短15秒内既要表现战场惨烈同时还要兼具微小的一颗子弹穿梭的细节,这是一个在顾大局同时还要兼细节的画面。为了凸显主次,我们决定使用二维的剪影使画面元素成为高度概括的逆光造型,让观众聚焦到我们想呈现的元素上。加上昏黄的色调和颗粒质感的处理,更能渲染出二战时期的年代感以及战争的残酷困局。

引导页面.jpg

1506503900340258.jpg

1506503903986951.jpg

111.gif

交互内容.jpg

子弹击中一个士兵的行李箱,然后一层层穿过其中的物品,时间和空间在这里被不断地变慢和放大,物品和文字间隔穿插,通过大概 10 个物件的故事,讲述这个行李箱承载的故事和意义。

1506504041210790.jpg

在后半部分的我们决定让用户自行交互去了解更多这个时代的故事。一个人旅行箱里的物品可以反映出他的性格,他所处的这个时代。护照、圣经、战友的吊牌等等,每一件物品都有着自己的来历与故事。

1506504461714010.jpg

333.gif

1506504269799981.jpg

我们运用了WebGL技术来营造一个真正的三维行李箱空间。当用户滑动空间的时候,我们采用WebGL的Shader,对整个场景添加黑白&旧电视机的后期效果,既作为交互反馈,同时也增加H5的年代代入感。除此之外,我们利用自定义的ShaderMaterial,让行李箱空间里的文字,随着滑动出现火烧效果,更增加了H5的神秘感和可玩性。

1506504342651226.jpg

在H5内容营销已经渐入疲惫的今天,我们一直力求将故事内容更加形象生动地展示在观众面前。新技术的应用面临着许多阻力,硬件的支持、不同系统的兼容以及持续不断地学习等等。技术与艺术的并重是我们一直追求的目标。在保持技术不断尝新的同时,每一次项目中我们也让更多人见到属于我们的风格。然而一直以来并没有一个完整的介绍,其实我们是一支由95后成员组成的团队(全体成员都是今年刚大学毕业),所以不落俗套也一直是我们作品所保持的态度。

网易严选

HOTSAR 上海

ClaireZhang

 

网易严选一镜到底讲述《一颗子弹的故事》

扫描,分享朋友圈