GAMES101 Lec 07~09：Shading 定义、着色模型、着色频率、图形渲染管线、纹理

已于 2022-02-28 18:02:22 修改
阅读量212 收藏
点赞数
文章标签： 图形渲染 算法 shader
于 2022-02-28 18:01:44 首次发布
原文链接：https://blog.csdn.net/weixin_43803133/article/details/108072427
版权

  • 3dMax 导出一个模型文件包含内容：顶点坐标，法线，边的关系，
  • model 模型
  • 空间中有了一个摄像机 Model 通过变换可以让摄像机放在原点 View
  • 三维空间的模型变换到屏幕上 Projection
  • 通过采样进行光栅化 Rasterization

    下一步着色
    1 Shading: Definition 着色定义
    引入明暗与不同颜色的过程称为着色
    在本课中定义是给物体应用材质的过程在这里插入图片描述

    2 Blinn-Phong Reflectance Model 一种简单的着色模型
    关于Blinn-Phong的着色模型
    先前我在 LearnOpenGL学习笔记—光照02：Lighting Basis/Advanced Lighting 中对其概念进行过阐述
    当时也是用了闫老师的PPT和视频作为讲解材料，并做了简单实现（点光源为例）
    所以此处不再赘述

    3 Shading Frequencies 着色频率
    在这里插入图片描述

    3.1 平面着色

  • 平面着色
    在这里插入图片描述

3.2 顶点着色

  • 顶点着色
    每个顶点做一次Shading，对颜色值插值
    在这里插入图片描述

3.3 像素着色

  • 像素着色
    这里的Phong Shading指的是一种着色频率，之前说的Blinn-Phong是一种着色模型
    三角形三个顶点求出法线，在三角形内部的像素，对法线值做插值，对每个像素做Shading在这里插入图片描述

    3.4 对比

  • 几何形体足够复杂的情况下，用简单的Shading方法也可以达到好的效果在这里插入图片描述

    3.5 顶点法线求法

  • 顶点法线求法
    在这里插入图片描述

内部平滑过渡的法线做法——Barycentric interpolation 重心插值
法线记得归一化
 在这里插入图片描述

4 Graphics (Real-time Rendering)Pipeline 实时渲染管线

关于这一部分

在这里插入图片描述

在这里插入图片描述

  到现在的知识的学习已经可以让我们去学习API了（如OpenGL, DirectX）
在这里推荐：ShaderToy，在这个网站，我们只需要关注着色器怎么写

在这里插入图片描述

当下的实时渲染

在这里插入图片描述

5 Texture Mapping 纹理映射

关于纹理映射的内容
我在 LearnOpenGL学习笔记—入门05：Texture 做过阐述

  • PPT中的示意图很好表示这个映射过程
  • 在这里插入图片描述

  • 纹理本身设计可以无缝衔接：tilable，一种设计无缝衔接纹理的方法：Wang Tiling

6 Barycentric Coordinates 重心坐标插值

  • 重心坐标插值
    在这里插入图片描述

在这里插入图片描述

 利用面积的计算确定系数

在这里插入图片描述

利用坐标的计算确定系数

在这里插入图片描述

  • 利用中心坐标插值的方法，投影前后的重心坐标可能会变化，所以需要在对应的阶段计算对应的重心坐标来做插值，不能随意复用
  • 进行插值

 在这里插入图片描述

7 Applying Textures 纹理应用

  • 点上计算得到插值出来的UV坐标，然后在纹理上查询，之后根据需要应用（图中为简单应用，直接赋值）
  • 在这里插入图片描述

8 Texture Magnification 纹理放大

纹理分辨率太小，多个pixel（像素）映射到了同一个texel（纹理像素）

  • 解决方法→插值
  • 在这里插入图片描述

8.1 Bilinear Interpolation 双线性插值

双线性插值：水平插值+竖直插值
lerp为linear Interpolation的缩写
下图为最近的四个点插值

  • 找到目标点周围四点
    在这里插入图片描述

 红点离四个点左下角的垂直与水平距离

在这里插入图片描述

 在这里插入图片描述

8.2 Bicubic Interpolation 双三次插值

取周围16个点也是做竖直和水平的插值
每次用4个，做三次的插值，不是用线性的差值
双向三次插值运算量大，但是效果好
关于这个方法可以看看这位大神的介绍
双三次插值算法(bicubic interpolation)与图形学和计算方法的关系
双三次插值（BiCubic插值）
 

9 纹理过大的问题

  • 纹理过大时，一个pixel对应了多个texel → 采样频率不足导致 摩尔纹+锯齿（走样）
    远处地平面的一个像素，对应一个大块的纹理，简单的点采样不行
    在这里插入图片描述

 在这里插入图片描述

解决：
超采样，提高采样频率，可是太浪费

 在这里插入图片描述

采样会引起走样，那么我们不采样，只得到一定范围的平均值。

这是点查询与范围查询的问题

  • 点查询，给出一个点，得到一个点的值

范围查询，不采样，给出一个区域，得到区域的（平均）值


9.1 Mipmap 多级渐远纹理

Mipmap 多级渐远纹理
可以进行快速的范围查询，但是是近似的，并且只有方形
关于Mipmap的内容
我在 LearnOpenGL学习笔记—入门05：Texture 中的 纹理环绕方式/纹理过滤 这一部分做过阐述

  • 以下为PPT中的示意图
    在这里插入图片描述

关于计算Mipmap的示意图
首先我们要把像素覆盖的区域找出来，进行近似

考虑一个像素时，也考虑上周围的点
然后把它们的中心一起映射到UV上计算距离
于是可以用距离为边长的 虚线的正方形框 来近似 映射过来不规则的四边形
层数D约为相邻pixel的映射uv之间的距离取2的对数
D的作用举例
如果区域的大小是1×1 D=0 那么在最原始的等级的Mipmap上找
如果区域的大小是4×4 D=2 那么在第二等级的Mipmap上找，也就是在第二等级上，这个4×4会变成1×1，然后去第二等级上去查这个像素的值，那就是这个区域的平均值
在这里插入图片描述

在这里插入图片描述

单纯只是整数层之间，会有不连续的缝隙
所以如果不是整数层，那么查前后两层，进行双线性插值，然后再进行一次插值
也就是三线性插值，得到结果
在这里插入图片描述 
9.2 Anisotropic Filtering 各向异性过滤

Mipmap会把远处的细节都模糊掉
因为它只能查询方块的区域内，以及插值毕竟只是近似

  • 解决三线性插值的方法就是各向异性过滤
    在这里插入图片描述

    方块的近似有时候太过勉强，如下图纹理映射后奇形怪状的
    在这里插入图片描述 
    Mipmap做的是方块的 也就是下图左上角的图，但是不方正的压缩做不了
    在这里插入图片描述

    各向异性过滤允许我们对长条的区域进行范围查询，但是对于斜着的区域，不行
    生成各向异性过滤的图（Ripmaps）的开销是原本的三倍
    各向异性的意思是，在不同的方向上它的表现各不相同
    各向异性的几X是压缩几倍，也就是从左上角往右下角多几层

    EWA过滤，把任意不规则的形状拆成很多不同的圆形，去覆盖这个形状
    多次查询自然可以覆盖，但是耗时大

     10 Application of Texture 各种纹理贴图
    之前的内容中，我们可以得到，给出一个网格，然后做各种shading
    在这里插入图片描述

     接下来在shading的基础上，我们可以贴上各种贴图
    在这里插入图片描述

    有许多种类的纹理贴图
    在这里插入图片描述

    10.1 Environment Map 环境光贴图

    把来自各个方向的光照记录下来，假设环境光来自无限远，只记录方向
    也就是说纹理可以用来表示环境光
    在这里插入图片描述
    Spherical Environment Map 球面环境映射
    可以类比成地球仪
    存在拉伸和扭曲问题
    在这里插入图片描述

    Cube Map 立方体贴图
    把环境光记录在立方体的表面上
    问题也有，之前球面可以很方便得到某一方向的光照，但是现在还要判断这个方向记在立方体的哪一个面上
    在这里插入图片描述

    10.2 Bump Mapping 凹凸贴图
    Bump Mapping的Texture记录了高度移动，不改变几何信息
    贴图作出人为的假的法线，由此得到假的着色效果，产生凹凸效果
    通过自定义的高度差，逐像素地扰动法线方向，法线方向一改，着色结果就会发生变化

    计算法线方向：求出切线以后找到垂直方向
    在这里插入图片描述

    UV情况下的法线算法
    在这里插入图片描述

     10.3 Displacement mapping 位移贴图
    与凹凸贴图的输入相同，但是位移贴图真正改变几何信息，对顶点做位移
    相比上更逼真，因为凹凸贴图在边界上会露馅
    位移贴图要求模型的三角形足够细致，且运算量更高
    DirectX有Dynamic的插值法，根据需要对模型做插值，看情况把模型变得细致
    在这里插入图片描述

    10.4 Procedural textures 程序纹理

    三维的纹理，定义了空间中任意一点的值
    对于这种纹理，并没有真正生成这个纹理的图
    它们定义了三维空间的噪声函数，函数经过各种处理，可以变成需要的样子
    在这里插入图片描述
     

    10.5 Precomputed Shading 预计算着色

    用空间算时间，先计算好环境光遮蔽贴图，然后再把纹理贴上
    在这里插入图片描述

    10.6 Solid modeling & Volume rendering

    三维纹理广泛应用到体渲染之中
    比如核磁共振等扫描后，得到体积的信息，通过这些信息进行渲染，得到结果

jiuzhouhi
关注
GAMES101笔记_Lec07~09_着色 Shading
Ziiur的博客
02-04 2798
0 我们已经学了什么 What We’ve Covered So Far 空间中定义了一个摄像机，通过某些变换使模型摆好姿势（Model） 通过观测变换让摄像机放在原点，得到标准的[−1,1]3[-1,1]^3[−1,1]3立方体空间（View） 通过视口变换将三维模型投影到二维的屏幕上（Projection） 通过采样对屏幕空间中结果进行光栅化（Rasterization） 1 着色的定义 Shading：Definition 字典中的定义：通过平行线或色块在插画、图像上加深或上色 The dar
GAMES101 梳理 / 个人向图形学笔记
qq_39006214的博客
04-06 7525
矩阵变换 Lecture2 线性代数 Lecture3-4 坐标变换 1、二维的坐标变化 2、三维的坐标变化 矩阵相乘的顺序是从右往左，矩阵变换的顺序应该是——旋转、缩放、平移。 为什么引入齐次坐标 不引入齐次坐标，类似斜切等 为什么引入齐次坐标？ 为了用一个矩阵就可以表示矩阵的变换 ...
GAMES-101-个人总结归纳-Shading
weixin_41346635的博客
06-20 439
(注：此文以个人知识框架为基础拓开，为方便后期回顾，在保留原课程内容框架的基础上，个别概念的介绍可能过于简单，感兴趣读者可到 GAMES 平台深入学习)目录概要Illumination & ShadingBlinn-Phong Reflectance Model（Blinn-Phong 反射模型）Diffuse Reflection(漫反射项)Specular term(高光项)Ambient Term(环境光项) Shading Frequencies(着色频率)：Graphics PipelineTex
Lec7 Shading 着色（Illumination，shading and Graphics Pipeline）（主要是漫反射）
youannnn的博客
08-03 121
Lec7 Shading 着色（Illumination，shading and Graphics Pipeline）（主要是漫反射） Shadings 是在某一个shading point的操作 引入明暗和颜色不同 对不同物体应用不同材质 Blinn-Phong 反射模型 高光（Specular highlights） 漫反射（Diffuse reflection） 间接光照（Ambient lighting） Shading is Local 以下向量都是单位向量 shading point
GAMES101-现代计算机图形学学习笔记（4）作业3
糯米
07-30 1892
前言 上篇作业2 本篇将更新作业3相关内容 作业3相关链接 games的作业3链接 我的源码 作业3简述 插值计算 各种shader实现 作业3相关知识笔记 Barycentric Coordinates Blinn -Phong(Lambertian(Diffuse) Shading、Specular Shading、Ambient Shading) Flat shading、Gouraud shading、Phong shading Texture Magnification（Nearest、Bi
GAMES101—Lec 07~09：Shading 定义、着色模型、着色频率、图形渲染管线、纹理
个人学习的一些笔记
11-29 919
定义：引入明暗与不同颜色的过程称为着色重心坐标是由三角形顶点定义的坐标。三角形上的任一顶点p(x,y)都可以用三个顶点的线性组合表示：p=w1a+w2b+w3c且系数之和为1：w1+w2+w3=1 (只有系数之和为1，p点才在这个三角形所在的平面上)当满足三个系数都为非负数时，该点在三角形内部可以看出，重心坐标是齐次坐标的一种这三个系数所表示的坐标（w1,w2,w3），就是该三角形上p点的（归一化）重心坐标。
GAMES101课程学习笔记—Lec 07~09：Shading 定义、着色模型、着色频率、图形渲染管线、纹理
清清！的博客
08-19 3117
GAMES101课程学习笔记—Lec 07~09：Shading 定义、着色模型、着色频率、图形渲染管线、纹理0 回顾1 Shading: Definition 着色定义2 Blinn-Phong Reflectance Model 一种简单的着色模型3 Shading Frequencies 着色频率3.1 平面着色3.2 顶点着色3.3 像素着色3.4 对比3.5 顶点法线求法4 Graphics (Real-time Rendering)Pipeline 实时渲染管线5 Texture Mapping
GAMES101课程学习笔记—Lec 05~06：Rasterization 光栅化
清清！的博客
08-16 3253
GAMES101课程学习笔记—Lec 05~06：Rasterization 光栅化1 从标准化设备坐标到屏幕2 从图形到光栅显示2.1 采样2.2 实际的光栅化2.3 采样的缺点3 反走样3.1 引入3.2 走样现象3.3 基于超采样的反走样方法3.3.1 SSAA（Supersampling Anti-Aliasing）3.3.2 MSAA（Multisample Anti-Aliasing）3.4 基于形态学的反走样方法3.4.1 MLAA(Morphological Antialiasing) &a
GAMES101课程学习笔记—Lec 21~22：Animation
清清！的博客
08-27 1863
GAMES101课程学习笔记—Lec 21~22：Animation1 简介1.1 动画历史 History1.2 关键帧动画 Keyframe animation1.3 物理模拟 Physical simulation1.3.1 质点弹簧系统 Mass Spring System1.3.2 粒子系统 Particle Systems1.4 运动学 Kinematics1.4.1 正向运动学 Forward Kinematics1.4.2 逆运动学 Inverse Kinematics1.5 角色绑定 Ri
GAMES101课程学习笔记—Lec 10~12：Geometry 几何、隐式与显式、曲线与曲面、网格
清清！的博客
08-21 2491
GAMES101课程学习笔记—Lec 10~12：Geometry 几何、隐式与显式、曲线与曲面1 几何的表达方式1.1 隐式几何1.2 更多的隐式表达方法1.2.1代数曲面1.2.2 CSG 构造实体几何1.2.3 距离函数1.2.4 分形几何1.3 显式几何1.4 更多的显式表达方法1.4.1 点云1.4.2 多边形网格2 曲线2.1 贝塞尔曲线2.1.1 计算贝塞尔曲线2.1.2 代数表示方法2.1.3 贝塞尔曲线性质2.1.4 逐段贝塞尔曲线2.1.5 连续性2.2 样条曲线3 曲面3.1 贝塞尔曲
games101笔记 Shading
baibaigao的博客
03-24 395
什么是shading 不同的物体应用不同的材质的过程 就是计算出物体具体应该在的地方，物体的光照，物体本身应该有的材质。 Blinn-Phong Reflectance Model(Blinn-Phong反射模型) Blinn-Phong Reflectance Model是一个简化模型 shading point Shading is Local shading是局部的，在shading不考虑其他的物体存在，就考虑当前像素点本身，也就不生成阴影 Diffuse Reflection(漫反射) 漫
计算机图形学【GAMES-101】4、纹理映射(重心坐标插值、透视投影矫正、双线性插值MipMap、环境光遮蔽AO)
记录值得记录的东西
12-11 3421
Lecture08~101 Texture Mapping2 Barycentric Coordinates2.1 重心坐标概念2.2 重心坐标计算方式2.3 重心坐标插值3 纹理映射产生的问题3.1 纹理太小3.1.1 Nearst3.1.2 Bilinear Interpolation3.1.3 Bicubic Interpolation3.2 纹理太大3.2.1 MipMap3.2.2 各向异性过滤4 纹理的应用4.1 环境贴图/环境光照4.1.1 Spherical Environment Map4
探索 PixiJS：强大的 2D 图形渲染库
qq_34820371的博客
10-02 1548
随着 Web 技术的发展，越来越多的开发者希望在网页中实现丰富的视觉效果和动画。PixiJS 作为一个高性能的 2D 渲染库，凭借其强大的功能和易用性，成为了许多游戏和互动应用开发者的首选。本文将深入探讨 PixiJS 的特点、应用场景以及核心功能，帮助你更好地理解并应用这个库。
算法基础-链表
August的专栏
11-05 133
当链表的长度为偶数时，head找到的中点是靠后的，因为fast相对slow移动只快了1步，而head.next找到的中点是靠前的，因为fast相对slow移动快了2步。这2种方式寻找链表的结点主要区别是 当链表的长度为奇偶数时，找到链表中点的位置一个靠后，一个靠前。使用快慢指针寻找链表的中点有2种方式，分别是fast=head;当链表为奇数时 [1->2->3->4->5]当链表长度为奇数时，找到的中点2种方式是一样的。当链表为偶数时 [1->2->3->4]
深⼊理解指针2
ElePower9527的博客
11-01 657
指针访问数组内容时，有如下代码这⾥我们使⽤ &arr[0] 的⽅式拿到了数组第⼀个元素的地址，但是其实数组名本来就是地址，⽽且 是数组⾸元素的地址，我们来做个测试。输出结果我们发现数组名和数组⾸元素的地址打印出的结果⼀模⼀样，数组名就是数组⾸元素(第⼀个元素)的地址。注意有两个例外• sizeof(数组名)，sizeof中单独放数组名，这⾥的数组名表⽰整个数组，计算的是整个数组的⼤⼩， 单位是字节。
【二分查找】【三种写法】——在排序数组中查找元素的第一个和最后一个位置#力扣hot100
weixin_47868976的博客
10-31 1112
给你一个按照非递减顺序排列的整数数组nums，和一个目标值target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值target，返回[-1, -1]。必须设计并实现时间复杂度为O(log n)的算法解决此问题。
【LeetCode】【算法】160.相交链表
最新发布
passer__jw767的博客
11-05 118
Leetcode 160. 相交链表
【算法】（Python）贪心算法
yannan20190313的博客
11-04 1243
【算法】（Python）贪心算法（最大单元数，买卖股票最佳时机，最低加油次数）
力扣题目解析--正则表达式匹配
wxtg1921的博客
11-01 852
动态规划：使用动态规划方法来处理正则表达式的匹配问题，确保每个字符和模式的组合都被正确处理。索引检查：确保在访问字符串索引时，索引在有效范围内，避免越界错误。特殊情况处理：特别处理和的匹配规则，确保可以匹配零个或多个前面的字符，可以匹配任意字符。
HOLLiAS-LEC G3 PLC PowerPro：布尔运算指令详解
布尔运算指令在自动化控制编程中起着至关重要的作用，特别是在HOLLiAS-LEC G3小型一体化PLC（Programmable Logic Controller）的PowerPro指令集内。本书重点讲解了3.3节的布尔运算指令，包括AND和OR操作。 AND指令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值