个人学习笔记——庄懂的技术美术入门课（美术向）02

1 作业点评
2 作业批改
- 2.1 作业1
- - 2.1.1 模拟高光
  - 2.1.2 菲涅尔
  - 2.1.3 叠加模式
- 2.2 作业2
- - 2.2.1 关于屏幕UV与深度图结合
- 2.3 作业3-halftone
3 一些情报
4 规范

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 一些情报

4 规范

个人学习笔记——庄懂的技术美术入门课（美术向）02相关推荐

个人学习笔记——庄懂的技术美术入门课（美术向）19
个人学习笔记--庄懂的技术美术入门课(美术向)19 1 顶点平移 2 顶点缩放 3 顶点旋转 4 综合应用 1 顶点平移 2 顶点缩放方法类似避免产生负值 3 顶点旋转方法类似以下是涉及到的一 ...
个人学习笔记——庄懂的技术美术入门课（美术向）01
个人学习笔记--庄懂的技术美术入门课(美术向)01 0 前言 1 工程搭建示范 2 理论 2.1 结构(struct) 2.2 渲染管线 3 操作 3.1-2 向量/标量/点积等若干线代基础 3.3 ...
个人学习笔记——庄懂的技术美术入门课（美术向）07
个人学习笔记--庄懂的技术美术入门课(美术向)07 1 单色环境光 2 三色环境光 3 投影 4 光照模型组合有关AO的知识之前涉及到就是 SSAO的实现了,可以回顾下 1 单色环境光环境光加上环 ...
个人学习笔记——庄懂的技术美术入门课（美术向）12
个人学习笔记--庄懂的技术美术入门课(美术向)12 1 作业示范 2 答疑 3 作业示范思路 4 作业实现·准备 5 作业实现·光照模型 6 作业实现·细节 7 开源Shader 该课是在13课之后上 ...
个人学习笔记——庄懂的技术美术入门课（美术向）04
个人学习笔记--庄懂的技术美术入门课(美术向)04 1 作业点评 2 作业答案 2.1 半Lambert 2.2 SSSLut 2.3 批改 2.3.1 批改1 2.3.1.1 分层 2.3.1.2 ...
个人学习笔记——庄懂的技术美术入门课（美术向）08
个人学习笔记--庄懂的技术美术入门课(美术向)08 1 作业点评 2 作业批改 3 法线贴图 1 作业点评没啥问题,注意调节AO强度需要从白色去调看起来透明的猴子有风格化,会讲例子右下角的蓝色小 ...
个人学习笔记——庄懂的技术美术入门课（美术向）09
个人学习笔记--庄懂的技术美术入门课(美术向)09 1 菲涅尔 2 连连看-MatCap 3 连连看-CubeMap 4 代码 MatCap 5 代码 CubeMap 1 菲涅尔更具体的PBR可以参 ...
个人学习笔记——庄懂的技术美术入门课（美术向）21
个人学习笔记--庄懂的技术美术入门课(美术向)21 1 案例材料制作 2 shading 特效部分最后一讲 1 案例材料制作渲染一张UV网格图和一张分块图在上一节中说过的bake方法回推,首先看 ...
个人学习笔记——庄懂的技术美术入门课（美术向）03
个人学习笔记--庄懂的技术美术入门课(美术向)03 1 回顾渲染流程 2 尝试shader代码 3 Lambert试试 4 节点组 5 作业 1 回顾渲染流程老师以美术绘画的角度理解渲染管线,比较形 ...

个人学习笔记——庄懂的技术美术入门课（美术向）02

个人学习笔记——庄懂的技术美术入门课（美术向）02

1 作业点评

2 作业批改

2.1 作业1

2.1.1 模拟高光

2.1.2 菲涅尔

2.1.3 叠加模式

2.2 作业2

2.2.1 关于屏幕UV与深度图结合

2.3 作业3-halftone

3 一些情报

4 规范

个人学习笔记——庄懂的技术美术入门课（美术向）02相关推荐

最新文章

热门文章