掘金首页动态话题小册活动搜索掘金搜索写文章登录注册_Hahn_年01月08日阅读《蜘蛛侠：平行宇宙》的视觉解析与滤镜实现早在四年前，索尼想要制作全新风格的“蜘蛛侠”电影这一消息被泄露时，一个显眼的词汇便被反复提及——“rejuvenate”，译为“使其恢复年轻”。当时，除去《蜘蛛侠：返校日》之外，由索尼出品的《蜘蛛侠》真人电影已有五部之多（托比·马圭尔主演《蜘蛛侠》三部曲，以及安德鲁·加菲尔德主演的两部《超凡蜘蛛侠》）。索尼高层希望以一部动画电影来让这个系列重新恢复活力。而为了拍摄这部动画电影，索尼找到了当时因《天降美食》系列以及《乐高大电影》等作品在业界小有名气的导演搭档——菲尔·罗德和克里斯托弗·米勒。有着天马行空的创意以及各种*才想法的这两位导演提出的要求则是：希望这部动画让观众感到“就像走进了漫画里一般”。他们同时也为能够在这部电影中使用到真人电影无法达成的叙事手段而感到兴奋。第一次看到《蜘蛛侠：平行宇宙》这部电影时，就被其中的十足创新的视觉动态效果所惊艳，跟以往3D动画追求自然流畅截然相反，《蜘蛛侠：平行宇宙》反而在往漫画观感体验靠拢，让3D动画2D化，而且不是单纯的2D化。正如在一篇文章里看到的评论：混搭上各类平行宇宙间不同的漫画风格，保留下了对话框、漫画分格、字幕特效，还尤其加强了手绘涂鸦的部分，并刻意打造出这部分的「稚拙感」。当这些再加上神奇到炸裂的分镜，足以让人看得目不暇接。接下来我们简单的解析下这电影的亮点：一、视觉表达的创新点1. 一拍二模拟2D动画在进入正题故事没多久，相信看惯了3D动画的大家都会有种稍稍不适应的感觉...「这电影是不是有些卡？」没错，它确实就是卡。这是电影第一个让人感觉有些「异常」的地方，却也是电影最特别的地方。仔细看你可以发现只有人物角色是有着卡顿感的，而它们的周围环境却很流畅，形成了一种微妙的对比。关于这一点，在知乎中有网友给我们作出了解答：电影一般采用的是24帧每秒的制式，也就是说如果是手绘2D动画片，需要每秒连续画24张画以使画面中动画流畅，这也就是动画中俗称的1拍1。但是有人发现我同样的动作只画第1，3，5，7....合计总共只画12帧，然后把每帧停留2倍时间，观众并不会明显察觉，而动画师却形来表现运动模糊的方式，但却不是那样做的。最后，采用了一些解决方案。Imageworks的线条工具允许艺术家绘制同样连接形状的运动线，也有从相机快门启发的技术。例如，迪米安说，快速相机平底镜上的背景，无论是合成还是借助特效，都会被涂上很大的污点和划线，但却会以一种非常块状的插图方式出现。我们基本上尽量避免任何看起来像是平滑的渐变或者因为运动模糊而变得模糊的东西。相反，这是一种非常图形化的处理。后面我们可以看到，电影里通过叠影（相机快门启发的方式）、场景的错位、速度线等方式来补充画面的动感，并保证了电影本身的风格语言。4. 色散/高光溢色实际上我们可以从电影画面里看到一般产生于比较老化或者早期的镜头拍摄的照片质感（高光溢色），还有一些镜头色散的效果，这其实也是电影工作室有意为之。导演PeterRamsey在接受采访时是这么对电影画面解释的：某种意义上说，你根本不用花费精力去注意什么，因为我们做的就是还原漫画，而我们在看漫画的时候会发现，有时候漫画里都有错误，有时候印刷不好，颜色都涂到了线条之外，所以看起来就觉得模糊不清。而且这和真人电影是相通的，比如有时镜头中一些东西是没有对上焦有些模糊，这样观众才会集中注意力在重要而清晰的画面上。色散/高光溢色的效果在这里就是起到虚化和模糊的作用。如导演提到的印刷不好的情况，在20世纪初中期的印刷行业经常出现，当时的CMYK4色印刷会因为有对版的误差出现导致喷色错版，这样的错版在后面发展中也成为了一种风格化的处理，导演注意到这点，并应用到了电影中，这既把漫画的质感还原得更到位，让观者产生共鸣同时也利用这样的错位生成一种视觉景深感，使得电影的层次更强，解决了向2D靠近后在电影显得平的问题。这部电影在视觉表达上有很多的突破，创作团队很大胆得把多种风格不一的人物混合在一起，使得平行宇宙的概念合理化，并通过平面漫画的方式把视觉语言和整个电影的题的结合达到了高度的统一。整个电影透露出一种处处不稳定的矛盾感，创作团队没有把这种矛盾消弱，而是把他们都展现了出来，这样的碰撞感受让人不得不佩服他们对于整体的把控和自信。二、视觉效果与滤镜实现电影从片头就迫不及待的展现出了它在表现形式上的创新，但仔细观察你会发现里面用到的效果并非从0到1的创新，只不过索尼的动画团队把这些视觉元素应用的淋漓尽致。由于工作中涉及了短视频滤镜和转场的OpenGLShader代码编写，所以在二刷电影的时候特别留意了电影里的特效，并思考有哪些是可以通过Shader来实现的。当然了，电影里的效果是动画设计师反复调整和多重加工出来的，绝非一段代码就能完美模拟。这里仅仅是从技术角度去探讨电影里一些效果在Shader代码层面的可行性。1.HalfTone半调滤镜电影高度还原了漫画应有的观赏体验，在画面的渲染上使用了Ben-Daydot(本戴点）让我们感受到了阅读纸质漫画书的质感。Ben-Daydot与HalfTone的不同之处在于Ben-Daydot在特定区域中的大小和分布总是相同，而HalfTone能根据图像的颜色细节呈现大小和渐变不一定点。我们可以用HalfTone半调滤镜去生成差不多的质感。下面截取几张截图可见一斑：科普下Ben-Daydot(本戴点），全名是「本戴点状制版法」，以插图画家和印刷商BenjaminHenryDay,Jr.（19世纪出版商BenjaminHenryDay的儿子）命名，在年被发明的印刷制版技术。它根据颜色和视错觉原理，通过小彩色点的间隔疏密、大小或重叠来生成所需要的效果。例如，洋红色圆点间隔比较宽就会形成粉红色。20世纪50年代和60年代的彩色漫画书很受欢迎，但是全彩漫画的成本很高的故障效果。索尼工作室在制作故障效果的时候使用了手绘图案+多层效果融合的方式来呈现，当然了，代码想要模拟这样的效果并不容易，如果可以找到一张合适的遮罩图也许可以大致模拟出来。不过这里只单纯展示常规的基于图像本身的故障效果（代码通过基于时间来做像素和颜色通道偏移来模拟故障效果）：precisionhighpfloat;uniformsampler2DinputImageTexture;uniformsampler2DinputImageTexture2;varyingvec2textureCoordinate;uniformfloattime;floatamountgl_FragColor=vec4(finalColor,1.0);}复制代码同样的，通过Demo右上角的滤镜开关可以看到前后效果：Demo23.RGBShift/SplitRGB分离细心可以发现，上面第二个Glitch效果同样用到了RGB颜色分离，在电影中出现了大量的这样的效果，把色彩变化应用到极致，有些魔性有些虚幻。Shader实现起来会相比上面两个滤镜更简单一下，通过对图像的RGB三个颜色做拆分以及坐标偏移就可以实现：precisionhighpfloat;uniformsampler2DinputImageTexture;varyingvec2textureCoordinate;uniformfloattime;floatamount=0.01;floatangle=0.;voidmain(){vec2offset=amount*vec2(cos(time*.),sin(time*.));vec4cr=texture2D(inputImageTexture,textureCoordinate+offset);vec4cga=texture2D(inputImageTexture,textureCoordinate);vec4cb=texture2D(inputImageTexture,textureCoordinate-offset);gl_FragColor=vec4(cr.r,cga.g,cb.b,cga.a);}复制代码下面两张图片对比前后效果：同样的，通过Demo右上角的滤镜开关可以看到前后效果：Demo3最后，这部电影可以说的太多太多，有太多让人觉得惊艳的点，没办法一一都提到，我们只能从视觉方面和实现的可能性简单得聊聊，欢迎补充。在快写完文章的时候，想起开头Sony说到的「rejuvenate（使其恢复年轻）」。我们可以感觉到这个电影从故事和风格无不充斥着现在年轻人会喜欢的元素，可以说这是一部很酷的作品，但是在看到了很多资料后我们不禁有一些感慨，这些很酷炫的效果和元素风格其实在上个世纪就已经存在且有着很深的历史痕迹，从某种意义上，与其说是更年轻的体现，感觉倒不如说是这是一种复古了。由此我们也延伸出了一些问题：有人说风格是个轮回，这么一看，所谓的「更年轻的风格」或者「过气的风格」都像是个伪命题。也就是说，是不是并不存在什么年轻或过时的风格，只有时间时间久了，看腻了的风格？又或者说，是不是因为技术的创新才让产品（电影或者其它）变得年轻了，和风格，实际没太大关系？感觉挺有意思，可以想想。相关链接：