通过实例浅析如何有逻辑的渲染一幅好的的效果图

谈到渲染大家会优先想到什么?

也许是室内渲染渲染游戏CG电影画面,或者是电视广告

渲染就是如此的随处可见,包括我们看手机APP弹出的一个小窗口,也有可能是属于渲染的范畴;

但是大家可能从未完整的思考过它是通过什么步骤产生的呢?

今天的文章也是让大家从渲染流程中真正去理解渲染逻辑

640-39
PART1 如何理解渲染

渲染的本质就是通过软件模拟接近现实或者达到我们所需要的图纸状态

640-33
渲染流程 :雕刻、拓扑、UV暂时不是本次教程的重点,

所以这里不做过多的说明,感兴趣的可以自行了解一下

从搜寻参考到最终后期,每个步骤都紧扣下一步,都会影响到最终的效果;

 

PART2 如何提升渲染

对于渲染,我们往往一开始会更在意的是用什么软件,而不是渲染本身

「 建模是不是Rhino比SU好用?

「 渲染器Corona渲染的效果是不是比的好一些?

 为什么有的它甚至用UE渲染?

「 Substance 3D Painter和ZBrush和渲染有关系?

软件固然很重要,但本质上都是为了建模或者渲染,内部的渲染引擎和运算的系统确实会有稍微不同的地方,但也依然遵循渲染的流程,Rhino、SU、Blender、3ds Max具有建模的功能那影响的自然是在建模上、渲染器主要影响的是材质和灯光、Substance 3D Painter属于贴图制作的软件影响的也还是材质上、ZBrush则属于更为细致的模型雕刻软件,都与渲染流程中的某一步或者某几步有关联。

所以要提升渲染的质量,得先熟悉渲染的步骤,才能“对步下药”;

2-1 凭空想象,缺乏观察

当我们看到一张图的时候,我们下意识的反应是不知道怎么去做,那我们可以先去分析一下这张图;

可以把手脑先分开,手不会做那属于操作不会是可以通过积累慢慢提升的,但是脑子里要想清楚要怎么去做;

首先可以先想想自己有没有做过类似的,当然大部分情况可能是没有做过,那我们可以在理解渲染过程的前提下;

640-32
思考过程
进行参考搜寻一方面是照片,另一方面是作品;

并根据渲染的步骤去尝试思考,参考有哪些点值得参照,哪些可能也没有那么合适;

比如:

在 01-草图 的阶段「 设计的构图如何?对比关系如何?

在 02-建模 的阶段「 建模的程度够吗?“粗糙”程度够吗?精致程度够吗?

2-2 构思画面,反复对比

对于最开始的设计草图,我们可以先去设计四层对比关系

2-2-1 空间对比

空间对比,最典型的也是从剖面或者人的行径路径上思考;

以 Netherlands Institute for Sound and Vision 为例,剖面具有中庭,有通高空间,有架高空间,有错层设计,包括顶光及侧光的布置,这个剖面给人展现出的空间对比是很丰富的;

640-35
640-34
(来源:剖面手册-Manual of Section – Paul Lewis P91)

Yad Vashem Holocaust Museum也通过对一条笔直流线的空间引导,让参观者能感受到不同空间和光影带来的氛围变化

640-38
640-36
640-40
640-37
来源:Yad Vashem Holocaust Museum

当然就算是转角空间,能否让旅者在拐弯前产生“期待感”,也是在空间对比上所应考虑到的重要内容之一;

640-39
640-41
来源:

https://www.pinterest.com/pin/18084835984331709/

来源:

https://www.pinterest.com/pin/143200463135578815/

2-2-2 构成对比

构成对比主要基于锥形原则,即锥形在形状上会比矩形有趣,产生了对比,因为锥形一边不平行,一边长短不一,形成了两次对比,所以锥形形成越多的地方,也属于视觉焦点的区域,画面自然也会越丰富;

640-42
640-43
来源:TLS – jingzhang-moving-line 01
640-44
640-45
来源:TLS – jingzhang-moving-line 02

在这一点上,以电影动画为例,迪士尼的动画场景之所以丰富也很擅于用这个原则,往往故意在建模上“出错”,比如故意做成梯形的柜子以及屏风,让本应该平行的形状在透视的基础上,再次形成新的锥形,以此达到在构成上的反复对比;

640-46
640-47
(来源:超能陆战队-Big Hero 6 画面01)
640-48
640-49
(来源:超能陆战队-Big Hero 6 画面02)
2-2-3 黑白对比

素描大家多多少少都会接触到,学习素描除了学习构型和透视,很大一部分也是学习你对阴影黑白的理解,比如我们到 Artstation 的建筑分区,然后通过 Chrome 的 Dark Reader ,我们可以把画面调成黑白的,我们可以看到这些效果图黑白灰的程度,对比度越强烈的,往往也是优先吸引到人的,一张图的黑白交汇处,也是视觉焦点的所在

640-50
640-51
来源:

https://www.pinterest.com/pin/71846556547246621/

来源:

:https://www.pinterest.com/pin/436567757643031451/

640-52
640-53
来源:

https://www.artstation.com/channels/architectural_visualization?sort_by=popular&dimension=3d

640-54
640-55
来源:

https://www.artstation.com/artwork/xYe5Dr

( 涉及插件:Chrome – Dark Reader )

2-2-4 色彩对比

颜色对比,可以是对比色一方作为另一方的 跳色 应用,也可以是 渐变色 的过渡等,以此产生矛盾,产生对比;

640-56
640-57
640-58
来源:

https://www.pinterest.com/pin/633811347552645986/

来源:Ricardo Bofil – LA MURALLA ROJA

2-3 基于需要,细化模型

2-3-1 草模

640-59
640-60
来源:设计元素-Element of Design P70;

基本体块

确定好基本体块关系,才会有之后的 体块细化与变形;

2-3-2 细模

建模需要一定的精度;

通过挤出Extrude、倒角 Bevel、光滑 Smooth能极大的提高模型的精度;

640-62
挤出Extrude;倒角 Bevel;光滑 Smooth
同时建模是需要一定程度的“粗糙”,建模不是面面俱到,什么都建才是好的;

不仅仅是工作量大,也会考虑到硬件的性能能不能达的到;

比如远处的物件,看不太清楚,也许只需要一个png图片即可做背景;

所以才会先构思画面,再考虑细化模型,可以根据要出的视角以及参考图先进行思考:

 在这个尺度下能看到什么?

「 能看到的最小物件是什么?

2-4 灯光衰减,亮暗分明

灯光主要包括 灯光类型 和 灯光分布;

画面不一定要全亮,需要设置暗部区域,亮中有暗、暗中有亮反复对比,强化视觉中心;

640-61
太阳光
640-64
 HDRI
640-63
面光
640-65
点光
640-66
聚光灯
增加细节补光,让亮度信息也出现变化;

视觉中心可以有更多的颜色对比,不要受限于物理,但要符合物理;

最后高亮与辉光可适当补充;

2-5 材质灯光,分开思考

物体的质感是由材质与灯光相辅相成,共同完成的;

材质包括,贴图纹理与材质质感

这里可以先简单的明确材质包含颜色信息、反射信息、高度信息 且材质和材质之间还会有不同程度的叠加以达到复合材质;

复合材质,就比如:

沙滩:会包含泥泞、泡沫、水渍、石块及其子分类;

草地:会包含泥土、落叶、石子、苔藓、树枝、水及其子分类;

墙面:会包含比如墙面会有本身的纹理、凹陷、划痕、缝隙及其子分类;

更细的还会包括墙面的旧化处理,以及树叶的颜色变化等;

640-67
640-68
640-69
来源:

https://www.pinterest.com/pin/1046875875855136499/

来源:

https://www.pinterest.com/pin/27443878966825266/

来源:

https://www.pinterest.com/pin/545920786106816006/

2-6 统合整体,后期调整

基于整体,补充烘托氛围的物件,进而整合整体

另外,有时候不能只盯着一个灯的亮度是不是过曝了?一个墙体的贴图是不是少放了?要以整个场景的最终效果为优先级;

是把每一个物件的参数都调整到越精确越好,还是先把大致整体状态确定下来,局部后期微调,这也能节约很多时间;

PART3 渲染案例说明
3-1 搜寻参考,观察思考

以 Artstation 的一个作品为例子,我们可以按之前的流程来分析一下这张图;

640-70
来源:https://www.artstation.com/artwork/aGrV0k
3-2 设计草图

因为是按照参考图的做,所以可以大大节约设计草图的时间;

3-2-1 空间对比

高处出挑、阶梯空间、转角空间、流线交汇空间;

640-71
3-2-2 构成对比

大透视的角度,结合转角空间,本身就能产生画面的斜线分割,加上细节的构成丰富,更容易生成锥形画面;

640-72
3-2-3 黑白对比

黑白对比的关系往往和体块关系相关,中间由于的转角空间,本身形成的体块就更为丰富,能在视觉中心形成多次白灰墙面的对比,并反复对比;

640-73
3-2-4 色彩对比

高饱和度的,的屋顶和指示标,都起到色彩上的强烈对比;

640-74
3-3 建模

3-3-1 插件安装

01. 插件下载

通过官网【https://fspy.io/】下载【FSpy插件】,需要安装两个部分,一个是软件,另一个是适配Blender的插件

640-75
02. 插件安装

在 Blender 安装【FSpy插件】,在菜单栏 –【编辑】【偏好设置】【安装】直接安装压缩包即可,不需要解压,安装后再搜索Fspy将左侧的勾选

640-76
3-3-2 搭建草模

01. 定位透视

打开【FSpy软件】,将需要参考的图纸直接拖入软件中;拖动画面中的点去设定参考线;按住 Shift 可以进行细部点位调整;

640-77
640-78

左边可以根据需要调整XYZ方向,生成的透视 box 或者平面的预览;

640-80

点击【File】【Save】即可保存一个【FSpy (.fspy)】的文件;

640-79
02. 导入透视参考

打开【Blender】先按键盘的【A】全选所有原有物件删除,点击菜单栏【文件】【导入】【FSpy (.fspy)】

右边会生成一个摄像机图标的物件,可以通过点击右边的【摄像机图标】或按键盘【0】,可进行视角切换;

640-81
640-83
03. 搭建体块

点击【添加】基本体块

选择物体按【G】可移动物件,结合【X/Y/Z】可按指定轴线移动;

选择物体按【S】可缩放物件,结合【X/Y/Z】可按指定轴线移动;

选择物体按【R】可旋转物件,结合【X/Y/Z】可按指定轴线移动;

640-82

结合【Tab】切换到【编辑模式】,以及【点/线/面】的筛选工具、通过【E】可挤出物件,搭建符合参考透视的草模;

640-84
640-85
3-3-3 搭建细模

01. 导出模型

如果暂时不习惯 Blender 的操作,也可以把点菜单栏的【文件】【导出】模型导出【.Obj】,再导入自己更为熟悉的,因为我们只是需要定位合适的透视关系,在模型的格式上软件之间还是兼容的;

640-86
02. 细化并分类

将各个体块细化,并基于之后渲染的需要进行图层分类;

640-89
ps:

这里也没有完全细化到参考图的状态,

也只是细化到足够说明的状态,

参考图的电线、指示牌等仍然可以继续细化模型的

03. 导回模型

模型同样可以通过点菜单栏的【文件】【导入】【.Obj】再导回 Blender;

640-87
640-88
3-4 灯光与材质

3-4-1 灯光

01. 属性设置

【渲染属性】中的【渲染引擎】改为【Cycles】并把【降噪】打开;

640-90

将视图着色方式换为【渲染着色】

640-91
02. 添加环境光

可以将下面的板块换成【着色器编辑器】,并切换成【世界环境】

640-92

点击【背景】的节点按【Ctrl + T】即可生成一个环境纹理节点组,可添加所需的 HDRI 环境光;

640-92
640-93
涉及素材:https://polyhaven.com/a/lakeside
通过调整【映射】节点的【Z轴旋转方向】,调整光线方向;

调整【背景】节点【强度】,调整环境光的强度;

640-94
03. 添加其他光源

通过【添加】【灯光】,进行局部的补光或者调整光线颜色,可以适当添加一下环境光的颜色丰富墙面,强化一些反光不明显的位置。

光线的颜色、强度、大小、扩散范围均可在右下角的【灯光】板块调整;

640-95
640-97
3-4-2 材质

01. 单一材质添加

在 Blender 中添加单一材质,先将【世界环境】改为原来的【物体】,再添加一个合适的着色器,这里直接用的【原理化BSDF】节点

【Ctrl + T】生成一个图像纹理节点组,将图片添加进去;

640-96
640-40
涉及素材:Pinterest

如果无法保证UV线的方向合适,可将【纹理坐标】节点改为【物体】,调整【映射】【旋转】【缩放】去调整纹理的方向和大小;

640-98
02. 复合材质制作

由于只应用了一张图像,很容易导致纹理的重复性极高;

最简单降低重复度的方式就是不断添加【混合着色器】和不同纹理,让贴图不停被叠加;

这与我们通过 PS 添加纹理并用不同模式叠加的本质是一致的,都是为了添加纹理的细节程度;

640-99
640-101
涉及素材:Pinterest

以此我们可以重复不断叠加以此丰富画面。部分纹理也可以考虑直接赋予在【纹理坐标】节点的【窗口】或者【摄像机】上;

640-100
640-103
640-104
03. 复制并调整材质

可点击该窗口上面的【复制】图标,复制一个新的材质;

640-102
【原理化BSDF】节点,可以辅助去做一些简单的材质变化;

比如要调整金属的状态,可以把金属度调高,高光调高,粗糙度根据需要做适当调整,光泽也可以增加一些等;

选择需要调整的物件,结合右边属性窗口的【材质属性】,可进行材质的替换

640-105
640-106
3-5 整合

为了进一步丰富画面,可以添加一些氛围要素,比如烟雾;

01. 添加平面

先添加一个平面;

640-107
02. 添加材质

着色器编辑器一栏上,通过添加【渐变纹理】【渐变映射】快速生成一个黑白图;【纹理坐标】设置成物体,【渐变映射】可以调整黑白状态;

640-108
借助【混合着色器】,将黑色的部分设置成【透明BSDF】、白色的部分设置成【自发光(发射)】,形成类白雾的纹理状态;

强度以及颜色可以对应着调整;

640-109

还可以通过【混合RGB】,混合【噪波纹理】,让产生的雾气更为随机化;

640-110
03. 场景布置

在适当的位置、将雾气布置在场景的 前中后景,形成烟雾的效果;

640-111
640-114
3-6 后期

3-6-1 导出

正式导出时,检查一下这几项;

01. 渲染属性

【渲染属性】中的【透明】是否有打开;

640-112
02. 渲染属性

【输出属性】【格式】【分辨率】大小是否需要调整;

640-113
03. 视图层属性

【视图层属性】【通道】的所需的通道图层是否都点上;

640-115
04. 通道图设置

通道图或者线框图的导出会有一些不同,可以通过将【渲染属性】【渲染引擎】改为【工作台】再借助【平展】及相对应的选项进行设置;

640-116
05. 开始渲染

点击菜单栏【渲染】中的【渲染图像】或者按【F12】

640-117
06. 导出图层

弹出的窗口右侧【合并结果】边上的小箭头,可选择之前设置好的图层类型,左侧【图层】【保存】即可把该图像保存下来

640-118
640-119
最终导出的图层,大致可以规律成 基本、环境、光线 三个类型

基本:通道图、阴影图、AO环境光遮蔽

环境:雾场、环境

光线:自发光、漫射光线 – DiffDir、漫射颜色 – DiffCol、高光光线 – GlossDir、高光颜色 – GlossCol

通道图、阴影图、AO环境光遮蔽这是最为常用且基本的三个图层尤为需要优先导出,其他的可以根据需要分别导出。

640-120
640-121
640-122
从上至下:通道图、阴影图、AO环境光遮蔽
640-124
640-123
从上至下:雾场、环境
640-125
640-126
640-127
640-129
640-128
从上至下:

自发光、漫射光线 – DiffDir、漫射颜色 – DiffCol、

高光光线 – GlossDir、高光颜色 – GlossCol

3-6-2  图像调整

导出的图层可以考虑对色块、叠层、纹理、光线、配件、调整 上进行改进

640-130
色块:通过通道图,局部调色
640-131
叠层:调整Blender导出的图层模式
640-133
纹理:若质感不够可以再叠加纹理,让画面不显得太平
640-132
光线:补充对比,调整背景以及黑白关系的亮暗
640-134
配件:可再补充标识等配件,再次丰富画面,并产生新的颜色对比
640-136
调整:调整整体图像的色阶、亮度、色相等

这些改进方向并没有真正意义上的前后顺序,是相互交替叠加的

640-135
640-136
图层,以及最终图像
© 版权声明
THE END
喜欢就支持一下吧
点赞15赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容