个人学习笔记——庄懂的技术美术入门课(美术向)02
1 作业点评
思路
答案
这里老师稍微解释了下多级渐远纹理(Mipmap)
之前在OpenGL的texture节中学到过,也在Games101中仔细说明过其原理
- 开启Mipmap后,距观察者的距离超过一定的阈值,则会使用不同的多级渐远纹理,即最适合物体的距离的那个。
- 并且由于距离远,解析度不高也不会被用户注意到,而且其另一加分之处是它的性能非常好。
- 为防止其层数切换的生硬,也会添加过滤模式
并且关于环绕方式(WrapMode)
如果我们选择repeat则会出现小黑点,因为贴图在UV使用上有一两个像素溢出是正常的,而我绘图时全填充了,所以选择Clamp进行边界重复可以消除这一点
关于RampTex的画法,如下图老师所示,
创作型作业的点评
- 左一的人物是Halftone的shader,属于阴影线shader的一种,会用到屏幕坐标UV,程序纹理等比较复杂
- 绿色的想要做出两个高光点,偏移了法线的方向挪开了高光点
- 猴子的过度生硬,3阶的一般是叫做3Cut的toneshading
- 左一很明显3cut的toneshading,猴子和第一个人物是一样的技术
- 左边的也是Halftone的效果,实现方式不一样,虽然都用到了屏幕空间UV,但是一个是纹理采样,一个是程序纹理
- 花花绿绿的是换成了法线和视线的方向,然后做了一个调子的映射,类似透视的感觉
- 右边的尝试用贴图,做法是采了一次RampTex,然后乘以贴图的颜色,能做出卡渲的效果,但真正在做的时候会更细腻
- 这一组的枪的高光不太适合Lambert的做法,之后会提如何算高光点
其他的 牛牛牛
- 右一的UV拉扯感很严重,这种一般需要在屏幕空间投射
2 作业批改
2.1 作业1
一点一点分析这个东西是怎么做的
首先在整个shader中,这部分是最基础的作业部分
我们使用的贴图长这样
- 亮部画暗,暗部画亮的手法,亮暗颠倒会表现出玉石的效果
这样会有基础的Lambert的效果
但是这位同学利用Lambert增加了“高光”的部分
加引号是因为我们这里是Lambert模拟的高光,并不是镜面反射的方法
以及光环的部分
我们逐一看看是怎么做的
2.1.1 模拟高光
- 首先上下两条思路是一样的,参数不同而已,我们看一条就好
- 我们对于法向量,首先加一个向量,来调整它的方向,然后做归一化
- 归一化之后和光方向点乘,到这一步依然是Lambert的效果,只不过通过改变这个偏移向量,我们相当于改变法线,变成了可以手动调整Lambert的效果
- 是有点不合乎逻辑,这里我们应该是转的光的方向,不过结果上一样
- 然后用if判断,大于某个范围算作是高光给1,小于给0
- 然后用max就能把两个“高光”结合起来了
- 把它限制到0到1,原因是没有用半Lambert,会有负的值出现
下面在“高光”和原本的半Lambert结合的时候,使用了Lerp节点
原本的半Lambert作为A进来,B是“高光”颜色,T是“高光”范围
- 原理是A*(1-T)+B*T,也就是,在上面那个圆,原来的半Lambert基础上
然后在下面那个圆,1的范围内,加了指定颜色的“高光”上去
到这一步除了外圈的泛白,其他效果都有了
2.1.2 菲涅尔
关于菲涅尔项的理论可以看曾写过的PBR理论部分
简单来说
- 菲涅尔项描述的是 物体表面被反射的光线 对比 光线被折射进去的部分 所占的比率,这个比率会随着我们观察的角度不同而不同
特点是与视线垂直的地方反射弱,与视线相对比较平行的地方反射强 - 内部封装了这个节点,提供Nrm(一般为法线)和Exp(指数)两个参数,Exp越小Fresnel反射越明显,原理是使用近似方法的计算
2.1.3 叠加模式
同学拿到菲涅尔项的数字后给了个颜色,然后和之前算好的部分进行blend
- 两个输入,然后选择叠加模式,比如相乘就是正片叠底(混合色×基色 / 255=结果色)
2.2 作业2
首先是总览一下
我们一步步来拆解它
首先看到的是Lambert的明暗
2.2.1 关于屏幕UV与深度图结合
然后获取屏幕UV的节点,以及利用深度图
- 可以回顾之前在OpenGL中学过的坐标系统的知识,帧缓冲的知识,深度测试的知识
我们正常是把各种东西绘制到帧缓冲上,然后把这一帧绘制到屏幕UV中,相当于也是一种纹理映射关系
屏幕UV跟着屏幕走,不跟着模型的UV走 - 举例来说,一个球,它的UV可能是个扇形,要铺到这个球表面,然后这个球根据透视关系,把它的表面给到屏幕上——这是模型的UV
- 屏幕UV则是,这个球,根据透视关系它会在屏幕的多少范围内出现,我们拿到这个屏幕上的范围,放个图上去
- 获取屏幕UV,也就是获取屏幕空间的要绘制的fragment的信息
- 但只有这一步的话,是没有远近关系的(我们用的是透视投影),我们乘以深度信息,就能保证屏幕UV进行采样的远近关系了
脑内假设一下可以是这种情况
- 也可以通过推导一下公式得到类似的结果,可以看这则笔记了解基本的矩阵变换,看这则笔记则可了解坐标系统的变换
于是我们把屏幕UV与深度图结合得到了这一步的排线效果,并且保证远近缩放时的一致性
用step节点把两个结合在一起
通过step后,此时会得到这个效果,当采样得到的排线的色值小于等于Lambert的值的时候,输出1,那部分会纯白色;色值比Lambert的值大的时候输出0,纯黑色
在这个基础上,我们对给白色和黑色的线条,附上亮色和暗色
而后又把Lambert的结果,乘以一个颜色加回去,给整体加一个过渡效果
2.3 作业3-halftone
首先是概览
接着看第一部分的内容,如下所示
红红绿绿的图分成好几份的样子,什么意思呢?
- 我们知道屏幕UV有几个坐标(0,0),(0,1),(1,0),(1,1)
换算成颜色是什么?也就是,黑 绿 红 黄
我们选择了Tile模式,也就是中心是(0,0)
然后出现负数统统按照0处理,就会出现此时上图中multiply的效果图
- 我们把屏幕uv乘了一个数,也就是扩大了范围,但是UV值超过1的话,换算成颜色就还是1的颜色
所以看到渐变范围变小了,纯色范围变大了
- 接下来我们使用了frac节点,这个节点代表只取小数部分
举例来说,原本是0-10,然后被frac以后,分成了10份0-1的小数
也就是在拿到了很多块的重复性区域(乘的数字越大,重复性区域越小,越密集)
并且注意,根据图像,小数部分不管正负
对于一块区域来说,会因为其有四个象限的小数部分,所以会被分成四份区域(下图展示)
可以推算,之前乘的数越大,此时被拆分得到的区域也就越大,是四倍关系
- 接下来,我们看到目前我们的重复性区域,是从0到1的反复组合,并且每一个重复性区域,原点都在左下角
所以接下来使用重映射节点remap,把这个区间映射到-0.5到0.5,也就是把每一块的原点移到该块的中心
- 接下来使用length节点,计算每个地方的向量的长度,把这个长度换成颜色看的话,每一块区域自然成了小圆点
每一小块计算长度,其计算结果,中心是0,上下左右最长是0.5,四个角落是0.5√2,换算成颜色如下图
- 得到该纹理后,我们加上之前的Lambert效果,乘上光线衰减和投影
并且把节点会显示的部分,也就是Lambert从0到1的值,反向映射到2到-0.5(也就是图里1->0变成-0.5->2)
也就是按照y=-1.5x+2的部分,变换Lambert的计算数值,下面解释为什么要这么算
- 为什么要变换呢?
原来是希望圆点纹理作为底数,Lambert作为指数来计算
也就是
C o l o r = R o u n d ( T e x t u r e − 1.5 L a m b e r t + 2 ) ( 0 < L a m b e r t < 1 ) Color=Round(Texture^{-1.5Lambert+2}) (0<Lambert<1) Color=Round(Texture−1.5Lambert+2)(0<Lambert<1) - 注意,我们的texture得到的色值是小于1的
以随机一个纹理的值作为函数图像
把该结果round以后
也就是0.4的色值会在Lambert值小于某个点时,变为纯黑色,大于某个值时是纯白色
其他也同理,也有类似的性质,只不过跳变点变了而已 - 以下是点乘1的效果,相当于是首先我们把四个圆贴在这个球上,接着进行这个指数计算
按照以上思路,可以清晰看到,四个圆通过这么计算后,形成了一个重复性边界
如果我们乘的数变大,也就是,划分出了很多的小区域
每个小区域接受的Lambert的值是有限的,所以有的地方计算结果会白,有的会黑
虽然UV里的图像是重复性的,而Lambert是并不是这样
每小块圆如何呈现自己的颜色,也就是相当于不断在Lambert上取一个小范围来采样自己,所以网点效果就出现了
3 一些情报