庄懂的技术美术入门课(美术向)——学习笔记01

目录

碎碎念

一、工程搭建示范

1、unity引擎安装

2、shader forge的导入

二、简单渲染流程

1.结构（Struct）

2.一般简单的渲染过程

三、光照实操部分

1、理论基础

1）向量与标量

2）点乘

3）Lambert光照模型

4）半Lambert光照模型（Lambert的优化）

2、Unity实操

1）Lambert光照模型的连接

 2）半Lambert光照模型的连接

 四、映射实操部分

1、理论基础

 2、Unity实操

 五、作业

1、一个卡通渲染

总结

---

碎碎念

作为动画专业的在校生一直不知道如何入门技术美术，在网上查询资料查到一脸懵逼，买来了入门精要啃起来也有些困难。无意间看见了他人分享的庄懂老师的课程感到相见恨晚，老师实在是太懂美术的心理了！太懂美术了！！

这里记录下个人学习笔记，给自己起到督促和总结的作用，有问题欢迎指正，互相交流~

B站课程录屏链接：https://www.bilibili.com/video/BV1BE411N74b/?spm_id_from=333.788.recommend_more_video.0

---

一、工程搭建示范

1、unity引擎安装

从unity官网（unity.cn）中下载unity hub，在安装一栏选择所需要的unity版本（目前unity版本已经更新到2021，直接选择中没有老师的版本，我是从官网上搜索2019.3.12版下载后在hub中添加的）

2、shader forge的导入

 解压文件后一路点进去，将Assets资产文件夹内的shader forge文件夹

 

 将此文件夹拖入unity Assets中，等待一会儿进度条。完成后会出现在菜单栏顶部Tools工具栏中

安装后点击进去界面如下： 

二、简单渲染流程

1.结构（Struct）

2.一般简单的渲染过程

关于渲染流程这部分我有在unity shader入门精要中学习过，庄懂老师将这一过程简化更清晰直白的展现了出来，加深了我对这一部分的理解，有了更为直观的认识。

第一步：将模型资源导入引擎，将模型上的信息进行选取和采集（顶点信息、三角面信息与其他信息uv 法线等）

 第二步：将从模型选取采集到的信息转换为输入结构（后续渲染将用到的相关信息）

也就是使用输入结构来采集模型上的必要信息

第三步：将输入结构数据做逐顶点处理后输出给像素shader，这里面的一般操作为：

将模型每个顶点位置信息，换算为每个顶点应在屏幕的位置；

计算和赋值其他逐顶点信息，如：UV，顶点色，顶点法线…也可以自己自定义一些信息

第四步：将自定义材质面板属性、光照环境的相关设置、以及灯光摄像机的信息传给像素shader，综合各方数据算出最后的渲染结果

 一个更直观的图解：一个模型（假设是等边三角形），因为摄像机视角等原因在实际屏幕中看见的是一个斜着的三角形（由顶点shader转换坐标信息），顶点shader输出计算结果及数据之后再由像素shader根据信息，算出每一个像素所包含的颜色等，为最终渲染输出结果。

三、光照实操部分

1、理论基础

1）向量与标量

2）点乘

3）Lambert光照模型

点乘所表现的几何意义就是 一个向量在另一个向量上的投影长度，这里我感觉可以直接理解为光照所表现的阴影

图形学表现为：两向量方向相同时，为1（白色）

                         两向量方向相反时，为-1（黑色）

                         两向量方向垂直时，为0（黑色）

这里用一个模型和光照讲解会更加直观：

在这里我们根据向量点乘的图形学含义，我们令：

模型表面的垂直方向为向量nDir(即：法线方向)；【换言之法线方向就是模型表面的朝向，3D模型中常用】

令光照方向的反方向为向量lDir(即：LightDir)；

令nDir · lDir(两者点乘)结果为像素输出

由此就会得出以上球体的光照效果

负数在表现中也为黑色，是一个无意义的亮度，在计算中也容易带来其他意想不到的错误，所以我们把结果中为复数的值都改为0，便得到了下面这个看起来效果一样但实际上数值不同的结果

Max（0，nDir·IDir） ，即为Lambert光照模型

4）半Lambert光照模型（Lambert的优化）

在原有基础上对明度数值乘以0.5，再加上0.5，得到了全部为正值并且暗部具有光感更加透气的光照模型——半Lambert，缺点在于有点不真实，素描关系错误，没有反光和明暗交界线等。

2、Unity实操

1）Lambert光照模型的连接

打开shader forge新建一个无光照shader，注意一下保存的路径可以新建一个shader文件夹并对这个shader命名

 

进入界面中在空白处按鼠标右键，弹出菜单找到向量运算（Vector Operations）中找到点乘（Dot Product）

也可以直接键盘敲D找到点乘

 我们可以看到点乘带有A、B两个输入端口分别用来连接刚才所说的两个向量值

在面板中找到法线向量（Geo data中）和光的方向（lighting中）

分别连接至AB两端口

 

 输出端口连接至自发光Emission，左上小窗上方compile shader会变红，等待重新编译好后就会出现我们想要的光照模型效果。

接下来将负数值转为0，用到clamp0-1节点

该节点作用是把小于0的值变为0，大于1的值变为1，钳制节点的范围，下面是官方文档里的描述 

重新连接一下，整理节点得到兰伯特光照模型

如何将连好的shader运用到模型中去：

退出shader forge，在刚刚连好的shader上鼠标右键，新建一个材质

 将生成的材质球拖拽至模型上去就好了

 2）半Lambert光照模型的连接

对刚刚的状态，明度乘以0.5，再加上0.5，回顾一下

shader forge面板中加法与乘法等基本运算都在第一栏，也可以直接输入m或a找到

再添加一个固定数值，在常数向量中

 

 

 输入0.5，并把这几个节点连接起来

 

得到半Lambert光照模型 

 四、映射实操部分

1、理论基础

映射：两个集合，元素间相互对应的关系

这里可以用手绘板和电脑之间的映射关系来理解这个概念，画画的宝子们都懂

 

 调子映射：把之前半Lambert状态从0-1的一个黑白调子映射到下图呈现的一个红黄渐变调子

将半Lambert的调子视为uv坐标的u坐标（横坐标），再附加一个常量作为v轴，这样得出的图片就是渐变贴图采样

 

 比如在半lambrt上取一个点，这个点对应的u值为0.5，随便定义一个常量v值（这个常量取几得到的效果在这里都是一样的），所对应得到的点就是映射在贴图中对应的渐变色调，对每一个像素都做这样的操作就会得到这样一个渐变色的光照模型，

 2、Unity实操

新建一个常量和一个Append节点（把两个向量合并为一个标量）

 

再把要映射的贴图直接拖进来，左边连接uv输入端口，右边输出rgb

完成效果

 

可能出现的问题：两级如果有小斑点的话可以将Wrap Mode里的reapt改为clamp

 

 五、作业

1、一个卡通渲染

 我们分析一下这张图片，首先很明显这是一个亮暗分明的二分阴影的卡通渲染

 根据这些特点去PS里画一张贴图

 可以看到老师图片中明暗转折没有那么生硬，稍微过渡一下

我感觉这样应该差不多了，去实验一下 

 感觉还可以，没有图片里的模型，拿了个青蛙的模型试了下

---

总结

这节课我们学习了有关向量、点乘、映射的定义，以及点乘的图形学性质：

两个向量方向越接近，点乘结果越接近1，方向越相反，点乘结果越接近-1，与光照性质相同

搭建了Lambert和半Lambert光照模型

并进行了uv贴图的映射