我在进修的同时从事了多个项目,范围包括插画、精细环境和角色等。我的大部分作品都可以在我的Artstation作品集中找到:https://www.artstation.com/aipapi。
在这篇博文中,我将讨论怎样通过技术将2D漫画小说改编为交互式的3D体验,这里涉及的技术有着色、几何体、合成、光照、气氛渲染,等等。主要的重点是根据漫画再现原著的氛围和设定。我发现一旦实现了总体效果,就可以将它们应用到多种环境。
本文是根据我的毕业设计《黑猫侦探》而写的,它是一个在虚幻引擎中创作的沉浸式小游戏。
(本视频转载自YouTube:视频原址)
希望你们能在阅读本文时找到乐趣!最初的步骤
第一步是选择一部要在3D形式下再创作的漫画小说。我选择了由Juan Diaz Canales(编剧)和Juanjo Guarnido(绘画)创作的《黑猫侦探》,因为这个故事中有许多角色。这部小说的风格实在太有魅力,从光照设计到背景设定,都让人很难抑制改编它的冲动。选择了小说之后,就需要对它进行透彻的分析,这样才能理解风格和细节。我的主要问题是:- 他们使用的是哪些素材?
- 他们是怎么描出线条的?
- 他们是怎么画出各种物品/角色的?
- 光照是怎么设计的?
- 整体基调是怎样的?
- 总体用色是哪些?
- 场景中每一次的焦点是在什么地方?
- 比例差异如何?
一般分析

环境1分析

环境2分析

环境3分析

- 硬朗的黑色轮廓
- 整体的颗粒效果
- 画布纹理背景
- 水彩效果/水渍
- 暖色 + 少许蓝色
- 相似的色阶
- 草草画出的阴影
- 写生风格的线条
在选择要重现的场景时,我关注的是那些引出和叙述剧情的场景。为了找到完美的镜头,我必须问自己:
- 发生了什么事?
- 这看起来有趣吗?
- 我能够对当前呈现的画面加以扩展吗?
- 我在重现场景时有哪些选择?

物体
开始这个项目时,我首先把注意力放在物体上。这是一个很好的起点,因为它们是每一个场景的基础。我选择的场景细节非常丰富,存在大量物体,即便对大部分物体都可以做许多复制和粘贴的操作,但每个场景中的物体仍然有很大的差异。大约有30-40种物体,其中许多是可以复用的。从一开始,我最重要的工作就是确定哪些需要先做出来,需要什么样的模型。分析每个场景可能要花不少时间,但是一旦理解了场景,就可以快速拿出成果。

例如,在上图中你可以看到需要再现的物体实在太多了,其中有许多需要费尽心思来制作。但是只要把这个场景分解开来,考虑一下需要复制粘贴的部分,你的工作进度就会大大加快。
最后,还需要分析每件物体的大小差异和风格化。看一下风格指南你就会发现,这些物体也许看似写实,但是在轮廓上确实略有夸张。例如:有一张椅子的椅腿和主体相比稍短了一点,有些物体具有它们不应有的曲线(例如某个书架),等等。整体而言,这些物体是比较写实的,但又带有微妙的非写实感。


当我最终开始这个项目时,我只想重现一个环境。由于我的工作进度大大快于预期,结果我制作了多个环境,并最终把这个项目变成了一个沉浸式的小游戏。环境增多导致物体增多。在我准备好所有物体后,就该构建我的场景了。

布景

在确定好整体尺度之后,你就可以给场景添加各种细节。而在这个过程中,你还需要通过引擎本身不断调节物体和房间的比例。
环境1
由于这是第一个环境,完成所有设置花的时间稍多了一些。设置包括打草图——BSP形状、基础光照、重要物体、找到合适设置、比例研究,等等。这个环境也是其他环境的基础,因此把它做好是至关重要的。
环境2和3
因为有第一个环境做基础,第二和第三个环境做起来就快得多了。实际上,有许多元素都是重复使用的。只要重新调整物体和房间布局,就可以轻松制作出一个全新的环境。

连接场景

因为有多个环境,我还需要创建一个连接场景,用于在不同房间之间切换。在参考资料中可以看到,第一个场景(办公室)是在一座公寓楼里,于是我就想到了用一条走廊把各个房间连接起来。我选择把这条走廊的风格做成老式公寓楼里的样子,因为这样可以契合阴郁的场景。在各个场景之间切换就像在不同的单元房间之间切换,这样就把故事情节串联起来了。

最终结果
请注意,每个房间都有各自的情节和氛围。


外观(着色器和材质)
主轮廓着色器
着色器很难搞。对于这个项目,我需要一些能用于每个场景的通用着色器。好在这部漫画小说中的大多数图像都有相同的“感觉”。最后,为了得到可以轻松调整的合适图形风格,还需要使用不同种类的着色器。你需要使用的不是一个大着色器,而是多个着色器。把这想象成绘画:你要一层一层着色,一点一点绘图,才能得到理想的结果。最终是像这样构建出来的:
- 主轮廓着色器
- 用于获得绘图外观的图像覆层(这些只不过是你在屏幕上层层叠加的纹理)
- 自定义实时阴影

我在画出场景的粗略草图之后,就开始使用轮廓和着色器进行调整,来得到正确的结果。起初一切都很顺利,但后来因为一个问题,工作陷入了停顿。物体的轮廓显示出来了,但这只是轮廓,内部的细节线条(物体内部的细节)都没有显示出来。也就是说,如果我把一个物体和另一个物体叠在一起,那么较小的物体的轮廓就不会显示。例如,如果把一块大地毯放在一张椅子下面,那就只会显示出地毯的轮廓。
第一稿
请注意,轮廓只显示在BSP墙上,物体内部的所有细节都被忽略了:
第二稿
现在所有线条的显示就好多了。下面讨论这个问题的解决办法:
要解决这个问题,只需要调整一个简单的设置。

这就是创建轮廓着色器的主要后期处理材质。由于放置在该材质中的距离遮罩(红色边框)会创建距离摄像机较近的轮廓,它破坏了该材质。只要移除这个遮罩,问题就全解决了。

为了获得轮廓,你需要找到用于绘制轮廓的景深,以及场景中来自物理轮廓的矢量。
如果你需要关于这个问题的更多信息,可以在这里找到:
UE4 Tutorial – Toon Shader, June 4 – 2018
(本视频转载自YouTube:视频原址)
How to Outline Objects – UE4’, October 22 – 2017(本视频转载自YouTube:视频原址)
无轮廓
注意图中的油画感。
有轮廓
注意轮廓使所有物体更协调了。
最终我得到了一个具有很强视觉效果和衬托作用的着色器,使场景得到了升华和转变。上面的图像显示了这个着色器的用途和它对这个项目的重要意义。
请注意,在不使用着色器时,图像看起来就像油画(作为基础这是很好的),场景中的所有物体都融合在一起。这使得玩家很难对场景进行判读。着色器突出了场景中的更多细节,使其更易于判读。
用于可交互物体的轮廓着色器
既然我把这个项目做成了一个小游戏,那么我就必须实现许多细节,使得让玩家沉浸到剧情中,这些细节包括可互动的环境要素、音频、视觉特效、动画、情节元素,等等。玩家可以点击场景中的某些物体与之交互,其中有些会慢慢靠近摄像机,而且玩家可以使它绕轴旋转,更仔细地观察它。这些物体都要显示轮廓。在点击后,它会靠近摄像机,然后玩家就可以旋转它,直到玩家再次按下同一按钮为止。


关于这方面的原理我就不细说了,因为我主要是根据现有教程做的,你可以在这里找到这些教程:
如何通过后期处理创建轮廓效果:
http://www.michalorzelek.com/blog/tutorial-creating-outline-effect-around-objects/
虚幻引擎4——缩放和旋转物体
https://answers.unrealengine.com/questions/543371/rotating-an-object-relative-to-the-first-person-ca.html

自定义阴影
自定义阴影着色器很微妙,另一方面它的功能又很强大。少了它,场景就不会有特别的感觉。它以一种平衡的方式支持场景。它的基本作用是改变物体的阴影,会在光线照到的地方使用自定义遮罩,并添加边缘粗糙、在视觉上很有吸引力的阴影。它还会使场景中的AO变得稍微夸张/极端一些,增加它的范围,并围绕物体构建。最后,自定义阴影还会根据光源、角色位置等因素增大和缩小尺寸,从而给场景增加更多生气和可移动的光源/物体。这是一个方便得惊人的材质后期处理:

请注意光线照到的地方破裂/不均匀的阴影(在下面的GIF之后的图1中),以及下一张图中物体周围的AO。当你在场景中走动时,还会看到阴影像水一样溶化到一起。有趣的是,我不是故意做出这种效果的;它只是一个令人高兴的意外,给场景增加了一种特色。



图像覆层
为了在场景中获得油画效果,必须组合使用几种微妙的图像覆层来得到比较邋遢的效果。这些图像覆层配合材质、后期处理、阴影和光照,使我得到了理想的结果。
在这里,其实就是把简单的邋遢图像放在了屏幕上。但是,不能放一幅图像就完事了。需要巧妙地构建它,否则玩家就会明显看出你只不过是在屏幕上放了一幅图像。配上污垢遮罩效果就会很好。

图像覆层使整个场景显得粗犷一些。如果你注意观察接下来几幅图像中的墙壁或特定物体,就可以注意到效果。


正如我先前所说,所有这些都是微妙的小改动,它们相互配合得很完美,创造了很棒的最终结果(请参见演示视频)。
材质
材质的制作相当简单。每个物体都有一个来自主材质的实例。这些实例只不过是简单的纯色,如有必要,你可以使用无缝拼贴的纹理来调整。我对每个物体都使用了这种技术,而没有手绘纹理,因为后一种做法实在太费时间(由于物体太多,逐个制作纹理是不切实际的)。当然,你可以通过手绘得到更细致的结果,但是用颜色和后期处理可以让你更快更高效地出成果。主要材质


有材质和无材质(颜色)的差异


光照和后期处理
找到合适的光照是一个很令人苦恼的过程,因为需要下很大功夫来设置从基本定向光源到较小的细节光照(例如台灯、蜡烛等)的各种光照。如果你回头看一下参考就会发现,环境的主基调始终是神秘、黑暗/忧郁的,像被烟熏过,有着强烈的明暗对比。第一个环境需要有更多神秘感,并且多少要有些诱惑力,所以我就给它做了一种偏暖而且褪色的基调。
这也需要慢慢构建。



为了使场景更有趣,我做了一个带有很显眼的橙色的GodRay材质来凸显场景的基调。此材质与同样得到更显眼的橙色的次级光源(例如台灯、蜡烛等)相结合,大大提高了场景的视觉吸引力。

GodRay本身是使用一个网格体(锥体)构建的,在其上面加了一个与场景混合的平移材质(从一边移动到另一边的图像)。它还会针对自定义实时阴影作出反应,使它们移动。
每个房间还有一个特定的后期处理体积,用于改变场景氛围。也就是说,当你走进房间时,光照和颜色可能发生变化,因为它们有特定的范围。一旦你进入这个范围,环境就会改变。
主要的光照是可以和次级光源一起移动的,因为所有东西都是实时的。

在下面的图像中你可以看到,只需要一些光照和后期处理,就能把你的项目提升一个档次。



沉浸感
声音
大部分音频是从FreeSounds.org下载的。构建每个场景的气氛需要许多声音,因为这些场景都有自己的“个性”,包括:环境1(办公室):忧郁、黑暗、神秘。
环境2(墨萨德的公寓凶案现场):明亮、忧伤、不祥。
环境3(伊沃·斯塔托克的办公室):有欺骗性、担忧、黑暗。
我是根据我自己对这部漫画的解读选择音频的。
要营造出气氛,你需要使用音效。每当玩家走进一间房间和走过一个碰撞框,都会触发特定的声音。有些声音只会在一定的距离上播放。例如,玩家离窗户越近,街道上的声音就会变得越响。
有些黄色的框会在玩家走过时触发特定的声音,另一些则允许用户与它们互动(例如打开台灯)。

如果你想亲自体验,请观看完整的演示视频或玩这个游戏(可以在我的作品集中找到)!
作品集:https://www.artstation.com/artwork/Bm1yQ8
视频:https://www.youtube.com/watch?v=_VZfcK9Rp1A
剧情
剧情是这个项目中另一个衬托环境的组成部分。我把漫画小说中的文字部分做进了场景里,让观看者沉浸在环境中,并激发他们对剧情的好奇心。对话框(与你在漫画书里看到的类似)提供了关于特定房间的更多信息。它们鼓励玩家继续寻找线索,进一步探索环境,使他们想更详细地了解每个房间里发生了什么。它的实现与音效类似。在场景中放置的触发器框将会在屏幕上显示文本框,就像漫画一样(请参见下图)。


视觉特效
场景本身所含的视觉特效没有那么极端。主要的特效是烟雾(香烟、迷雾、蒸汽等)、火焰和一些细节。风格化的烟雾是用云状网格体做出来的,使用了GodRay材质使它显得透明和模糊;然后我将它放到了粒子系统中。

用于表现雾气的烟也是一个粒子系统,使用了图像序列视图(在一幅图像上绘出的动画)来描绘你可以从远方看到的雾气(例如在场景的走廊里)。


场景中的火焰只是一幅图像,我通过在特定图像上平移噪点纹理(失真)使其在材质中变形,从而让它看起来像是在移动。请参见下面的蓝图:


总结
如果只使用后期处理着色器、图像覆层和光照,你可以用快得多的速度创建出所需的风格化环境。当然,这也许不能100%地反映你的参考图像,因为使用着色器只能做到这样。要获得接近完美的结果,你需要像漫画家一样手绘场景,但这样一来花的时间就会长得多。如果你的目标是用着色器获得大体的效果,那么你的工作速度大致可以提高两倍。正如我的毕业设计所证明的,你可以在很短的时间内做出一个根据漫画改编的小游戏(我只花了6个星期)。这种效果所提供的外观可以方便地针对每种环境调整。有了它,你可以通过在带遮罩的材质中简单更改图像来创建许多变化。
另一个建议是,你需要花些时间透彻地分析项目。像绘画一样构建精细的图层;要创建可以互相衬托的小部件(着色器、光照、颜色、视觉特效、邋遢效果、Gameplay、交互,等等),而不要集中精力做一个大的元素。你可以一点一滴地做出在参考图像中所描绘的东西;以我为例,我就达成了在UE4中构建3D漫画小说的目标。
这真是一个充满趣味的项目,我也真心希望这篇博文能够起到帮助作用。
如果你有兴趣了解我的更多作品,或者想给我发消息,可以通过以下方式联系我:
ArtStation
谢谢!