TA百人计划 图形 2.2 模型与材质基础
|
1,008
|
0
|
TA百人计划

2525 字
|
13 分钟

渲染管线与模型基础

渲染管线

  • 蓝色背景的：可编程管线
  • 顶点着色器：将顶点坐标从模型空间转换到齐次裁剪空间，我们可以通过在顶点着色器中改变顶点位置实现动画
  • 片元着色器：将光栅化阶段所插值的模型信息进行计算，可以进行一些光照计算

模型的实现原理

点连成线，线构成面，最后组合成多边形模型

UV

在建模过程中，有一部非常重要的操作，就是展 UV，那么 UV 是个啥？

  • 通俗地理解，展 UV 可以理解为将原本是三维的模型给全部剪开成面，平铺好的所有面放在一个以 U 轴（横向）和 V 轴（纵向）为坐标轴的正方形里就是 UV。UV 上的点和三维模型上的点一一对应，其位置就是顶点的纹理坐标。比如小学美术课用卡纸做骰子，将其拆开可以直接拆成六个面，这个过程就叫展 UV。当在这个面上绘制数字时，对应的最后做好的骰子也会有所显示，这一步就是在UV上绘制贴图。

  • UV 展好的话，其表现平整干净，就像是直接从模型上扒下来的纸张，展不好的话，其效果表现就是扒下来的纸张像是叠了好几次，皱皱巴巴的。

  • 在片段着色器阶段，利用纹理坐标可以获取贴图所存储的信息。

  • 展开好后的 UV，一般利用 Substance Painter（简称SP，次时代建模流程必备工具），BodyPainter（老一代的绘制贴图工具），Photoshop；

  • 绘制贴图不仅仅只输出一个简单的颜色贴图，根据项目需求还需要法线贴图，金属度贴图，AO贴图等。各种贴图存储的信息不同，所占据的通道有多有少。

    所以我们还可以将一些通道不够占满RGBA的贴图进行整合，放在一张贴图里的不同通道，达到采样一次，获取多个信息的目的，可以有效提高性能。常见的如将没有透明度，仅存储 RGB 的颜色贴图与 AO 贴图压在一张图，AO 贴图放在 A 通道。

    缺点是不同通道直接还是可能会有相互影响，但是不明显，按需取舍。

模型包含的信息

obj

v：顶点坐标数据（模型空间中单个顶点的 xyz 坐标）

vt (texcoord)：贴图坐标（uv 坐标）

vn (normal)：顶点法线

顶点色

片元材质信息

# This file uses centimeters as units for non-parametric coordinates.

mtllib 2.mtl
g default
v -0.500000 -0.500000 0.500000
v 0.500000 -0.500000 0.500000
v -0.500000 0.500000 0.500000
v 0.500000 0.500000 0.500000
v -0.500000 0.500000 -0.500000
v 0.500000 0.500000 -0.500000
v -0.500000 -0.500000 -0.500000
v 0.500000 -0.500000 -0.500000
vt 0.375000 0.000000
vt 0.625000 0.000000
vt 0.375000 0.250000
vt 0.625000 0.250000
vt 0.375000 0.500000
vt 0.625000 0.500000
vt 0.375000 0.750000
vt 0.625000 0.750000
vt 0.375000 1.000000
vt 0.625000 1.000000
vt 0.875000 0.000000
vt 0.875000 0.250000
vt 0.125000 0.000000
vt 0.125000 0.250000
vn 0.000000 0.000000 1.000000
vn 0.000000 0.000000 1.000000
vn 0.000000 0.000000 1.000000
vn 0.000000 0.000000 1.000000
vn 0.000000 1.000000 0.000000
vn 0.000000 1.000000 0.000000
vn 0.000000 1.000000 0.000000
vn 0.000000 1.000000 0.000000
vn 0.000000 0.000000 -1.000000
vn 0.000000 0.000000 -1.000000
vn 0.000000 0.000000 -1.000000
vn 0.000000 0.000000 -1.000000
vn 0.000000 -1.000000 0.000000
vn 0.000000 -1.000000 0.000000
vn 0.000000 -1.000000 0.000000
vn 0.000000 -1.000000 0.000000
vn 1.000000 0.000000 0.000000
vn 1.000000 0.000000 0.000000
vn 1.000000 0.000000 0.000000
vn 1.000000 0.000000 0.000000
vn -1.000000 0.000000 0.000000
vn -1.000000 0.000000 0.000000
vn -1.000000 0.000000 0.000000
vn -1.000000 0.000000 0.000000
s off
g pCube1
usemtl initialShadingGroup
f 1/1/1 2/2/2 4/4/3 3/3/4
f 3/3/5 4/4/6 6/6/7 5/5/8
f 5/5/9 6/6/10 8/8/11 7/7/12
f 7/7/13 8/8/14 2/10/15 1/9/16
f 2/2/17 8/11/18 6/12/19 4/4/20
f 7/13/21 1/1/22 3/3/23 5/14/24

obj 和 fbx 格式对比

材质基础

漫反射

  • 光朝四面八方反射。
  • 入射的 Radiance 是均匀的 → 入射和出射的 Irradiance 相等，并且他俩的 Radiance 都均匀 → 入射的Radiance 和出射的相等

  • 其中 Lambert 模型简单的认为各个方向是均匀的

Diffuse = baseColor * LightColor * dot(LightDir, Normal);

镜面反射

光滑镜面反射

  • 入射等于出射
  • 入射光根据表面法线进行反射，并且只有在反射方向有能量，其他方向均为0

Specular = pow(saturate(dot(ReflDir, ViewDir)), 32) * LightColor;

粗糙镜面反射

  • 法线偏移比较小，所以反射集中在一个区域，有磨砂质感

折射

  • 对于特殊的介质，除了反射外还会发生折射现象
  • 其中，反射和折射的能量多少由 Fresnel 定律决定
R = refract(View, Normal, ration);
ReflColor = tex2D(skybox, R);

粗糙镜面折射

  • 和粗糙镜面反射类似，也是较重在一个区域
  • 这种材质在现实中的例子就是各种毛玻璃

多层材质

  • 除了物体本身的材质以外，表面还有东西（可以看到材质本身和表面的一层）

次表面散射

半透明的物体。例如玉石、蜡烛、牛奶、皮肤

皮肤可以看成三层：油脂，表皮，真皮。油脂层直接把光反射出去，所以皮肤上才出现高光，未被反射的光通过折射进入子表面层，进入该层后，部分被吸收和散射，再从皮肤中入射点附近出射点射出从而形成次表面散射效果

改变材质表面

  • 现实世界中不存在完美光滑的表面，模型顶点带的法线也有限，所以我们可以用法线贴图做效果

  • 光照计算时，有法线的参与，所以我们可以对法线做出调整，来调整相应的光照计算

  • 补充：渲染方程中，和材质有关的一项：BRDF

    CG中，Material = BRDF

模型数据解析（在渲染管线中的作用）

顶点动画

  • 顶点着色器计算的是模型的每个顶点，每个顶点数据不同

  • 因此在同个计算公式下，不同的顶点会得出不同的结果

  • 顶点动画就是在顶点 shader 中对模型的顶点进行操作，来产生动画效果。

  • 需要一定数量的顶点，顶点动画的效果才会明显（必要时可以结合曲面细分）

  • 一个顶点传入顶点 shader，顶点 shader 控制顶点位置时，所有的顶点都会进行一样的算法。

  • 在一些三维软件中，动画的K帧也是顶点动画

    • 意思类似：（GAMES101对于shader概念的完善：每个顶点/像素都会执行一次，是通用的，不用做循环）

纹理动画

  • 渲染的过程中改变纹理坐标，使其采样时发生偏移，来达到动画的效果 （eg：UE4 中的 panner 节点可以获取纹理坐标并进行位移）

  • 一般 uv 偏移都放在顶点 shader 做，原因有二：

  • 依赖纹理读取的存在，会影响性能（只要不是从顶点 shader 直接传到片元 shader，就会产生依赖纹理读取）

    • 一般情况下顶点数 < 片元数，执行次数少

光照计算

利用法线贴图，改变反射与折射的朝向。

修改前，使用 1 这个法线，反射出去的就是 1

修改后，使用 2 这个法线，反射出去的就是 2

修改的只是法线信息，因此其他数据还是保持修改之前的样子

对背部画面采样的部分

改变 UV 采样点的位置，产生动画效果

顶点色

  • 可以通过判断顶点色，来做一些操作
    • 顶点色达到一定的值，就做阴影。

    • 庄懂老师的课后部分的案例里，使用模型的顶点色作为 mask 使用

  • Maya中顶点色的绘制

    • （所有四边面转到游戏引擎中都会转换为三角形来计算）

    • 在图形学中，最常用三角形面来形成物体

因四边面本质上还是三角面组合而成，所以在绘制时会出现三角形的分界

FragColor = FinalColor * VertexColor;

插值：重心坐标

  • 三角形所在平面任意点 (x,y) 都可用三顶点 (\alpha,\beta,\gamma) 的线性组合表示。

  • 重心坐标不能保证投影后不变，所以三维情况下要先找到重心坐标再插值

  • 任意一个点的表示公式

$$(x,y)=\alpha A+\beta B+\gamma C= \alpha+\beta+\gamma=1\\\alpha=\dfrac{-(x-x_B)(y_C-y_B)+(y-y_B)(x_C-x_B)}{-(x_A-x_B)(y_C-y_B)+(y_A-y_B)(x_C-x_B)}\\\beta=\dfrac{-(x-x_C)(y_A-y_B)+(y-y_C)(x_A-x_C)}{-(x_B-x_C)(y_A-y_C)+(y_B-y_C)(x_A-x_C)}\\\gamma=1-\alpha-\beta$$

  • 利用这个公式可以得到当前像素点的顶点颜色、法线、纹理坐标，然后就能通过周围三个顶点进行插值

  • 一个例子：重心坐标颜色插值

    • B 点的颜色是蓝色，C 点是绿色。 那么 D 点就是蓝色和绿色的线性组合。

    • D 点 X 轴是3，\dfrac{3}{4} 的绿色，\dfrac{1}{4} 的蓝色

    • 这样计算出来的颜色是线性空间的，需要进行伽马校正

顶点法线、面法线

  • 面法线本质上还是顶点法线，只是存储方式不同

  • 原理：

    • 面法线：未使用平滑时，三角形三个顶点共用一个法线。那么插值时，因为三个顶点的法线相同，所以插值的结果相同。

    • 顶点法线：使用平滑后，一个 顶点一个法线。三角形三个顶点的法 线也就不相同。插值结果，也就会不同。

NPR中的描边

  • NPR 渲染中，通常在顶点着色器中，将顶点法线方向偏移，再在片元着色器中直接输出一个颜色，达到描边效果。

  • BackFacing 描边时，描边线条断开就是因为没有平滑顶点之间的法线导致的。

图形学技术美术
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇