个人学习笔记——庄懂的技术美术入门课(美术向)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(Texture1.5Lambert+2)0<Lambert<1
  • 注意,我们的texture得到的色值是小于1的
    以随机一个纹理的值作为函数图像
    在这里插入图片描述
    把该结果round以后
    在这里插入图片描述
    也就是0.4的色值会在Lambert值小于某个点时,变为纯黑色,大于某个值时是纯白色
    其他也同理,也有类似的性质,只不过跳变点变了而已
  • 以下是点乘1的效果,相当于是首先我们把四个圆贴在这个球上,接着进行这个指数计算
    按照以上思路,可以清晰看到,四个圆通过这么计算后,形成了一个重复性边界
    在这里插入图片描述

如果我们乘的数变大,也就是,划分出了很多的小区域

每个小区域接受的Lambert的值是有限的,所以有的地方计算结果会白,有的会黑

虽然UV里的图像是重复性的,而Lambert是并不是这样

每小块圆如何呈现自己的颜色,也就是相当于不断在Lambert上取一个小范围来采样自己,所以网点效果就出现了
在这里插入图片描述
在这里插入图片描述

3 一些情报

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4 规范

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43803133/article/details/109628862