UE教程

用心搭建好场景

如何在UE4中实现NPR(非真实感)渲染效果?

操作环境

品牌型号: 惠普暗影精灵3

系统版本:Windows10  专业版

软件版本:unreal engine 4 v4.5


如何在UE4中实现NPR(非真实感)渲染效果?本文作者尝试在UE4中制作了秋叶原南出口的画面,并分享了全部的制作过程,希望对大家有所帮助。

在虚幻引擎中制作秋叶原南出口

我经常在artstation上浏览他们的作品寻找灵感,我喜欢Arseniy Chebynkin和Pavel Galicki的作品,所以我尝试在UE4上复制他们的作品。

如何在UE4中实现NPR(非真实感)渲染效果?

这是他们在max里面的场景模型。

如何在UE4中实现NPR(非真实感)渲染效果?

还有bake的通道。

如何在UE4中实现NPR(非真实感)渲染效果?

然后他们在PS中通过各种通道合成这个效果。

如何在UE4中实现NPR(非真实感)渲染效果?

听起来用UE还挺难搞的,但是我们就是要搞。

如何在UE4中实现NPR(非真实感)渲染效果?

视口对齐

为了节省时间,我只恢复他们的屏幕截图的角度,所以我需要对齐镜头。

这里推荐一个软件,PureRef,这是一个免费软件

如何在UE4中实现NPR(非真实感)渲染效果?

可能有很多人用来收集参考,我们这里大概介绍一下,怎么在UE里面配合这个软件对齐视角。

首先打开这个软件。

如何在UE4中实现NPR(非真实感)渲染效果?

然后在设置中把背景色跟画布的颜色调整一下,并降低透明度,此处可以直接把画布调成纯透明。

如何在UE4中实现NPR(非真实感)渲染效果?

接着对齐视口。

如何在UE4中实现NPR(非真实感)渲染效果?

然后Ctrl+或者Ctrl-可以调整透明度。

如何在UE4中实现NPR(非真实感)渲染效果?

快捷键置顶。

如何在UE4中实现NPR(非真实感)渲染效果?

快捷键对鼠标透明。

如何在UE4中实现NPR(非真实感)渲染效果?

开启对鼠标透明会弹出提示,ok即可。

如何在UE4中实现NPR(非真实感)渲染效果?

然后我们就可以把图垫在UE窗口上面。

如何在UE4中实现NPR(非真实感)渲染效果?

接着我们就可以根据这个图开始对齐视角。

如何在UE4中实现NPR(非真实感)渲染效果?

我们上次说过用摄像机配合图片面片对齐视角,这个做法为什么我们现在暂时不使用呢?

因为这次的场景透视比较小,并且我们没有三视图,而在调整透视的时候,摄像机前面的图片会跟着摄像机的透视变化,我们就无法对齐透视。

如何在UE4中实现NPR(非真实感)渲染效果?

所以我们就可以通过这种方法使用PureRef快速对齐图片,过程中可以使用网格材质,有更好的透视参考。

如何在UE4中实现NPR(非真实感)渲染效果?

然后这里安利一个工具:Max中的Perspective Match。

如何在UE4中实现NPR(非真实感)渲染效果?

这个工具是群友看我对完透视之后问我为什么不用,我试了一下感觉挺好的,大家可以尝试一下。理论上可以对齐的一毛一样。

模型制作

角度透视对的差不多之后,我们可以使用BSP开始建模。

如何在UE4中实现NPR(非真实感)渲染效果?

大概建一下模型,过程中我们可以使用BSP的劈线工具大概标记一下重要位置。

如何在UE4中实现NPR(非真实感)渲染效果?

大概弄完,bake一下。

恩,还是那么难看。

如何在UE4中实现NPR(非真实感)渲染效果?

导入ue导出的模型,我这里连同摄像机一起导出了,方便max中对齐视图。

如何在UE4中实现NPR(非真实感)渲染效果?

然后我们用PureRef软件对齐视图,当然大家也可以选择直接在max里面开始搭建模型,我个人是习惯了在UE里面搭建粗模。

如何在UE4中实现NPR(非真实感)渲染效果?

在Max中建模

为了恢复他们的视角,我通过视口对齐直接对齐了模型在Max中的位置,没有考虑使用模块化建模。

你可以看到我的模型布线都是歪的。

如何在UE4中实现NPR(非真实感)渲染效果?

在制作过程中要注意模型的倒角。倒角可以大大提高质量。

如何在UE4中实现NPR(非真实感)渲染效果?

对于字体,英文可以用手写。如果你不熟悉日语,你可以使用有道翻译。有道可以识别它,然后在Max中使用字体工具,字体自带的倒角使用起来非常方便。

如何在UE4中实现NPR(非真实感)渲染效果?

然后下载一些免费的车型。

如何在UE4中实现NPR(非真实感)渲染效果?

灯光

然后建模的过程中可以DataSmith到Unreal烘焙一下看看效果。

如何在UE4中实现NPR(非真实感)渲染效果?

接着就细化模型,过程中上个色看个大效果。

如何在UE4中实现NPR(非真实感)渲染效果?

在过程中,可以开始稍微调整一下灯光。

我研究了很久物理光。

为了学习物理照明,我使用excel来总结各个单元之间的关系,并且可以实时转换。

如何在UE4中实现NPR(非真实感)渲染效果?

我使用了一个简单的灯光配置,3.14勒克斯方向光,色温6500,天窗强度1,EV值为-2。

如何在UE4中实现NPR(非真实感)渲染效果?

如果你知道EV和勒克斯之间的关系,你可以计算出在当前EV下你应该使用多少勒克斯的阳光。

如何在UE4中实现NPR(非真实感)渲染效果?

这里我用的是-2ev,如果我们想转换成EV0,我们可以得到12.56lux的lux。

如何在UE4中实现NPR(非真实感)渲染效果?

但我不是在做一个正式的游戏,所以我不关心它是EV0还是EV-2。

看起来牛就行。(:D)

贴图

材质和贴图也相对简单。

让我们看看他们最后的表现如何。

如何在UE4中实现NPR(非真实感)渲染效果?

贴图看起来比较干净,顶部有一个像纸一样的纹理和一些颜色渐变。

然后因为我很懒,我没有给这个物体UV。

所以我根据世界的位置创建了一个简单的平铺噪波纹理。

如何在UE4中实现NPR(非真实感)渲染效果?

然后添加顶点颜色来给顶点染色。

如何在UE4中实现NPR(非真实感)渲染效果?

其他对象使用他们的自身渐变着色。

如何在UE4中实现NPR(非真实感)渲染效果?

下图显示了最终的噪波和染色结果。

如何在UE4中实现NPR(非真实感)渲染效果?

后处理

直接使用了商场的描边。

如何在UE4中实现NPR(非真实感)渲染效果?

后处理卷也很容易设置,我只是想要一些伽玛和一些光晕。

如何在UE4中实现NPR(非真实感)渲染效果?

最后

正如你所看到的,所有的设置都很简单,因为我最初的计划是移植到手机上,并保持帧高。通过简单的模型和简单的材质,保持画面的干净整洁,可以更好的模拟出最终的效果。

如何在UE4中实现NPR(非真实感)渲染效果?

最后就可以得到一个比较NPR的效果。制作过程中其实大量时间都是在建模跟调整贴图颜色,做的干干净净就有毛有样了。

作者:日天

来源:知乎专栏“UE美工”