UE5制作真实街区—场景制作笔记

UE5制作真实街区—场景制作笔记


开篇:创作灵感

UE5制作真实街区—场景制作笔记

参考

起初我的创作灵感来源于A站2D艺术家Abrar Khan的一副作品,这个作品淋漓尽致的展现了香港后巷的场景。在当初刚发布就引起了不少人的关注,我随手点赞收藏了起来。一直想找机会通过UE5引擎实现出来,随后我又通过这个作品搜索出来一系列香港后巷的实景拍摄素材,创作的决心顿时充沛起来。所以一个参考,一副照片,一个镜头,一个构图都有可能让你产生创作的念头。

我对这组参考进行了大致的归类,为了支撑我创作过程中的可信度。并进行关键字的提取。

1、墙面:凸显破损,脏旧,掉漆,贴纸,广告,流渍等特征。

2、地面:井盖,积水,排水口,下水道,水泥,沥青修复区域,废弃垃圾,报刊,碎纸屑等

3、楼房:空调外机,交错的线缆,破旧的窗户,堆砌的杂物,等

4、物件:贴纸,小广告,垃圾桶,货物,推车,垃圾袋,推车等

汇集这些参考与关键词之后我还会利用Google Earth进行实景巡游,弥补在比例,空间,层次上的不足。


一、基础设置

UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


UE5在起初的项目设置也是至关重要的一步,目前最新的UE5版本项目设置绝大多数都默认开启了,但还有少数设置需要我们自行开启。

细节追踪&虚拟阴影贴图,这两项必选。渲染细节会明显增多,具体的解读教程很大,大家有兴趣可以看看官方文档

其次支持硬件光线追踪,必须打开,我有尝试对比过,当硬件光追开启后画面暗部的细节也会增强不少。

最后就是后处理框的自动曝光,需要将最低和最高设置为1。在前期观察调整必不可少。


二、构图形式

UE5制作真实街区—场景制作笔记

确定FOV

UE5制作真实街区—场景制作笔记

FOV65

UE5制作真实街区—场景制作笔记

FOV90

UE5制作真实街区—场景制作笔记

九宫格构图

UE5制作真实街区—场景制作笔记

一点式构图

1、构图是创作前期至关重要的一个步骤,决定着作品是否足够吸引眼球。首先我思考是否真的需要还原参考的视图?当我使用fSpy 这款软件进行参考测绘时,得出的镜头FOV为65。近一步还原后才发现这个视角展示的内容较少,且空间纵深感较为局限,索性我选择了UE默认的FOV90的比例。(也许是因为我长期做FPS类游戏的原因,更喜欢广角,大视野的镜头)但这些都不影响你的创作,因为后期的镜头都是可以随之调节的。重要的是物理世界的比例关系。

2、构图方式我还是采用了较为常用的九宫格与一点式构图。九宫格构图可以更好的定位视觉中心,四点位细节分布,层次关系的划分。一点式构图可以明确视觉消失的交汇点,并增加聚焦处的物体,达到有始有终的目的。


三、比例关系

UE5制作真实街区—场景制作笔记


在创作初期时刻要保证物理世界与虚幻世界的人,物的高度比例,这决定最终整个场景的每一个细节是否与现实中一致,从而可以增加场景中更为真实的感受。

那此处我只是列举以写实为主的提材,风格化方面或许对比例关系的要求需要再次制定规范。

UE5制作真实街区—场景制作笔记


根据《建筑工程建筑面积计算规范》(GB/T 50353-2005)

住宅建筑(包括公寓,排屋,别墅等)一般情况下建筑标准层层高不宜大于3.3米,特殊情况下也不得大于5.6米。

UE5制作真实街区—场景制作笔记


由此推断出基础的墙面结构。通常我采用3X3M和1.5M的结构来拼接,我尝试这两种尺寸比例可以拼出你想要的任何层高和尺寸。

UE5制作真实街区—场景制作笔记


利用以上的比例关系确定流程,能够让我们在前期搭建场景得到一个真实可信的环境框架。其次物件的比例也可以通过与角色对比进行缩放等方式的调整,以达到最终合理的尺寸。

还需要提及一点的是精度选择,因为Megascan绝大多数的扫描贴图都采用了2X2M的精度扫描。即使我们下载2K贴图赋予给3M的墙面,精度损失也不会很大。


四、资产制作

1、建筑

UE5制作真实街区—场景制作笔记


根据上述推理,需要将墙面的尺寸与比例全部规范在3X3M以内。建筑资产中墙体是比不可缺的内容,不要忽视它的重要性,更不要一栋一个模型这样制作,尽最大可能性采用组件的模式来搭建。

墙体大体分为三类,一共7种即可得到场景中所有的结构。

墙体分别为:3X3M(主体),3X1.5M(半墙可拼非3M等比的建筑墙面)

窗户分为:小窗墙体,大窗墙体。随后根据建筑类型不同可更换窗户的模型。

墙体门框:3种墙体门框,分别对应大,中,小三种门

UE5制作真实街区—场景制作笔记


上面这四张图阐释了为什么在组件的边缘需要加倒角这个问题。其实我们仔细观察在物理世界中无论是新旧建筑,都没有严格意义上的90度角,换句话来说就是不可能出现这么尖锐,锋利,数字化的转折。所以在每一次的创作过程中,尤其是墙面这种组件我都会给墙面加上倒角,以增强画面真实的可信度。光照随之也会柔和很多,这是一个需要强调的细节。

PS:这里要强调一下,墙面还需要一个默认6面,无倒角的。为了是上下左右的拼合没有缝隙。如果使用有倒角的墙面拼合会造成边界出有缝隙。

2、墙体和门框倒角的制作

使用UE5建模工具增加窗户倒角

使用UE5建模工具增加门框倒角

3、物件资源

UE5制作真实街区—场景制作笔记

Urban City Pack

UE5制作真实街区—场景制作笔记

Megascans扫描库

UE5制作真实街区—场景制作笔记

MD布料解算


五、材质细化三步法

UE5制作真实街区—场景制作笔记

1.基础材质

第一步,基础材质非常重要,这里需要根据创作的选题来确定环境的新旧程度。本作品中墙面只使用了三种材质,但给观众第一印象比较丰富。

首先通过参考来定位当前环境平均的新旧程度,其次在Megascan库内寻找近似破损质感的材质做为底层基础。如果觉得墙面在大面积拼接后会产生重复度,那可以参考我上一个仓库的教程,用笔刷来破除这一问题。

Meganscan自带的材质球有很好的参数可以控制,法线的强度,颜色的饱和度,色相以及明度。

UE5制作真实街区—场景制作笔记

2.摆放合适

第二步,尽可能贴近参考来寻找我们想要的物件。例如墙面上有管道,空调,线缆等,就需要从多种途径获取。自己制作?Megascan库内寻找?UE商城购买?

一切的来源都必须遵循真实来搭建,物体之间的穿插也需要考虑物理世界关系。例如一个管道从上通到下,在哪里结束,又和哪里管道相接,这些必须做到严谨。

UE5制作真实街区—场景制作笔记

3.才有层次

第三步,尤为关键,是取决于作品最终呈现的可信度是否可以令人信服。贴花在此起到了决定性的作用。

墙面的贴图总共分为三类,1.上流渍,下衔接,这两个区域的贴图会让墙面看起来更有环境侵蚀过的痕迹。2.墙角转折处的贴花一定要加,可以增强墙体转折磨损的真实感(有机会可以看看《Stray》的墙体转折处理,都采用类似的手法来增强现实感)3.墙面破损,裂痕,是能够打破重复度的关键因素。同时也视情况而定,增加太多显得花,增加太少显得单薄。主要看物件的摆放处是否需要有衔接遮挡。


六、中式贴花的制作技巧

UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记

搜索关键词:hong kong wall advertising

UE5制作真实街区—场景制作笔记


中式小广告贴纸,这是第一次尝试在作品中加入的元素,前期还为之苦恼,在哪里找到比较真实的素材。是否需要下载字体在PS里绘制每一张,那时间成本就会比较长,其次会显得不够真实。后来通过在Megascan库内浏览到这些空白的贴纸后,突然灵光闪现。

我先下载这些空白的贴纸导入到引擎内,再将资源反倒出引擎。通过PS来处理Color和DpRA这两张图。

Color图处理方式:我将在网上搜索到的图片汇总起来,最好是正视图的,不会有太大拉伸。将文字区域抠下来对应到空白贴花的区域内,注意不要超过原来的区域,保存并导入进引擎。

DpRA图处理方式:这张图的处理就更为简单了。R通道:Dp代表的置换,白色即可。

G通道:代表Roughness,灰色即可。B通道:是透明通道的控制层,在颜色图中扣取下来文字的部分填充为白色,底部为黑色即可。


七、资源摆放

UE5制作真实街区—场景制作笔记

Z字型摆放

UE5制作真实街区—场景制作笔记

Z字型摆放

UE5制作真实街区—场景制作笔记


本场景采用的高频率,高密集的资源摆放方式,从而在思考摆放上需要考虑视觉上能有更多的错落关系,基于现实再次对艺术进行加工处理,切忌无脑的堆砌。

重型资产多以铁垃圾桶,塑料袋,纸盒子,电箱,来扩充起剪影的关系,扩大占地区域。从视觉上突出Z字形摆放的重点关系。

轻型资产多以轮胎,少数垃圾袋作为辅助点缀,禁止大幅度的造景。减少剪影的面积。

其他区域内考虑多采用点状型分布来进行点缀和承托,经过合理的归纳摆放后,画面中依旧乱中有序。


八、光影节奏

UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


起初我在尝试寻找巷子内光和影的平衡关系,试图在画面中央位置打破狭长街道的光影变化,使光的剪影更为丰富。正如图所示我没有将右侧的楼建的更高,而是在两栋楼之间做出缺口,平行光穿透两栋楼直接让光线照射在门的位置。这种方式可以有效的增强画面的光影层次感。


九、场景色彩饱和度

UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


场景整体的环境颜色,我最常采用的方式使用直方图来查看,截取一张图在PS内的直方图可以快速预览到目前画面的亮与暗的关系。我们尽可能在场景中将所有的资产饱和度调整为适中,不要偏亮更不要偏暗,正如直方图所示的波形(波形偏右代表画面过亮,波形偏左代表画面过暗)确保画面波形的高峰要处于直方图的正中间,这样才能确保整体画面的色彩饱和度在一个基调上,更为下一步灯光的调整打好基础。


十、灯光与雾01

UE5制作真实街区—场景制作笔记

DirectionalLight(平行光)


UE5制作真实街区—场景制作笔记

SkyLight(环境光)


UE5制作真实街区—场景制作笔记

Fog(高度指数雾)


UE5制作真实街区—场景制作笔记

SkyAtmosphere(大气)


十、灯光与雾02

UE5制作真实街区—场景制作笔记

雾密度 0.02    起始距离0 (UE5默认参数)

UE5制作真实街区—场景制作笔记

雾密度 0.11    起始距离213 (调整参数)

UE5制作真实街区—场景制作笔记

雾密度 0.8    起始距离453 (调整参数)

1、关于灯光参数:很多朋友都咨询我光为什么如此真实?是如何做到的?

其实我始终在遵循UE5的Lumen特性,新建关卡后我前期不会调整任何灯光参数,直到我将整体画面的饱和度调整结束后,保持在统一灰度值后,我才开始对灯光进行微弱的调节。平行光我始终保持在10,这是官方给出的一个非常具有物理属性的数值,所以我没有必要去改变它。环境光的强度我从1改变为2,为了能够更加贴近现实世界中阴影部分比较通透的视觉感受。

2、关于雾:如何表达更为真实的世界雾效?

首先要学会观察,细心的同学可以多找一些现实中的照片看看,正常较为晴朗的天气我们的视野几乎是无穷尽的,可以观察到非常远的距离,没有任何雾气遮挡。其次还有就是雾霾天,视野会被雾气遮挡,产生较多的阻碍,所以看到的距离也有限。

图1默认的参数下整个场景会清晰可见,由此远景也需要处理的非常多,工作量也是很大的。

图2我结合物理世界的雾效的远景,再加上我场景是要表达巷子内的烟火气息,从而增加一些艺术层面的加工,所以我加大了雾的密度,与雾的起始距离。显得清透又不失空间感。

图3同样很希望这种氛围,营造出惊悚神秘的气息,但这种画面静帧还好,长时间是不耐看的,具体还需要根据自身想要的表达的画面效果来定。


十一、后期处理

UE5制作真实街区—场景制作笔记

未加后处理

UE5制作真实街区—场景制作笔记

加后处理

UE5制作真实街区—场景制作笔记


UE5制作真实街区—场景制作笔记


1、关于镜头设置:初始情况下我会将自动曝光默认为1,也是一种常规的操作手法,为了不使我们画面在早期就处于一种曝光的模式下,可以更好观察整体画面。其次色差强度调整可以增加边角的胶片质感。光束调整较少,基本保持默认。最终的暗角也是我个人常用的一种方式,为了使画面更加的聚焦。

2、关于最终颜色:白平衡默认为6500,我更加画面表现会适当的调低一些使得画面更冷一些。其余全局饱和度和阴影几乎不去动,后期如果输出短片我会在PR内进行LUT调整,所以整体画面尽量不要在UE后处理做过多的调整。


十二、总结

发布作品后我多数习惯用碎片时间来记录一些个人的心得和过程。一方面是可以分享给更多需要的人,另一方面可以对个人的学习方式加以沉淀。最终我总结一下个人创作过程中的感悟。

1、创作思路和内容也是我一直在探索和学习的过程。通过几个热门作品,个人风格也趋向于写实,现代,近未来,科幻这些提材,从中也找到了一些兴趣点。无论是做哪种还是希望每个人在后期都可以建立起个人风格,探索垂直领域,做深度挖掘。

2、起初UE5给我们已经提供非常完善与健全的光照系统,尤其是LUMEN的推出让更多学习者的身心完全投入到创作中。所以我个人建议是在初期建立关卡时,UE5的灯光,后期等参数尽量保持默认,凭靠感觉调整并非是坏事,但也必须了解原理的情况下来进行,否则乱了参数再次追溯就比较难控制。

3、保持真实物理世界的建筑比例关系,平衡每个资产的人高比,相信会让你的作品更加具有信服力。

4、资产寻找的思路需要变通,目前创作的内容我近80%的资产都采用的Megascans的资产库完成,并非只有模型,材质也是可以做非常多的变种。例如使用UE5自带的建模工具,我可以做出支架,门,窗,楼房组件,贴花,并且效率上也非常快,无需第三方软件的导入导出。

5、任何创作都需要审美基础。构图,空间,剪影,光影,色彩,黄金分割比,都是为了服务我们创作的主体与主题。平时我会搜集很多写实的场景照片对其分析,提炼关键词,再创作过程中加入进自己的作品中。

6、关于VR视频的录制我学习了YOUTUBE上Jovan Tomasevic的视频《How To Use the NEW LiveLink VCAM iOS App in UE5 | iPad Virtual Camera in Unreal Engine + FEATURES》

看了一遍就学会的操作,将手机应用<Live Link Vcam>安装在IOS上,再安装几个插件就能控制手机镜头行走并记录摄像机关键帧,最终采用Sequence输出即可。


更多作品请持续关注作者A站:https://www.artstation.com/cgerjia






推  阅
荐  读

光子全球品牌升级丨视觉设计专项回顾
B端产品的C化设计思维探索
企业级产品设计 | 视觉策略如何助力金融行业业务价值落地
海外流媒体TOP1奈飞体验好在哪?
SaaS产品增效 | 小程序类产品设计方法探索

UE5制作真实街区—场景制作笔记

本篇文章来源于微信公众号:腾讯设计族

视觉/平面

4条捷径,带你走进图形变形记!

2022-9-29 8:30:49

视觉/平面

奔驰的新标志

2022-9-29 12:04:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索