Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >表面着色

表面着色

作者头像
一只小虾米
发布于 2022-10-25 08:44:18
发布于 2022-10-25 08:44:18
5850
举报
文章被收录于专栏:Android点滴分享Android点滴分享

本篇介绍

本篇介绍下着色,包括漫反射,冯模型,艺术着色。

漫反射

有一些物体看起来比较粗糙,比如纸,石头等,如果我们盯着该类物体的一个地方看,同时也做各种旋转,会发现没什么变化,也就是不会出现高光,这类物体就叫 Lambertian objects.接下来就介绍如何给这类物体着色,这些操作是在世界坐标系中完成的。 Lambertian objects模型是说物体表面的颜色是与法线和光源方向的余弦是成正比的:

image.png

image.png

再将该公式详细一些,就是表面颜色还和物体漫反射的颜色,光强有关系,这样公式可以详细写成如下:

image.png

Cr是漫反射颜色,Cl是光强。

这时候对于光源背面的物体,计算出来的颜色就会是黑色的,实际上,我们看到很多物体背着光,可是也并不是黑色的,这是因为有环境光的存在,环境光就是由于很多物体不仅会接收光,同时也会向周围反射光,这样即使不被光源直接照到,也会被反射的光简洁照亮。也就是可以看成是空气中漂浮着很多比较昏暗的光源。这时候的表面着色公式如下:

image.png

Ca就是环境光部分,可以简单看成一个常量。

在给物体着色的时候,如果直接使用上面介绍到的着色公式,会发现表面看起来是多面的,针对这个问题可以用三角形来近似每个表面,然后计算三角形每个顶点处的法线,针对法线计算顶点处的颜色,然后再利用三角形重心坐标公式即可插值出三角形内部各个点的颜色。如下图所示:

image.png

冯模型

一些物体的表面看起来会有高光,比如抛光的瓷地板,光泽颜料,白板等,高光的颜色也和表面的颜色没什么关联,只是单纯的反射光颜色。如下所示:

image.png

从上图可以看出,高光是在观察角和入射光的反射方向接近情况下出现的,那么就可以用下面公式来表示:

image.png

这儿的参数p是为了增大衰减的速度,可以看到下图:

image.png

也有一种方法是比较法线和入射方向与观察方向的中线之间的余弦:

image.png

image.png

image.png

这时候的表面着色公式如下:

image.png

这儿的参数Cp是用来控制高光的强度。

如果在直接光栅化的时候,可以利用冯法线插值来对法线进行插值:

image.png

这样只要只要各个顶点处的法线,就可以计算出三角形内部某个像素处的法线。

艺术着色

前面介绍的Lambertian和Phong着色模型是基于了模拟真实表面的启发式设计,现在再介绍一种是模拟人工绘画的着色,有时候也叫非真实感渲染。 在画线的时候,人工绘画与真实世界的一个区别是前者会绘制轮廓。绘制轮廓的条件如下:

image.png

n是两个相邻三角形的法线,e是从公共变到观察点的向量。 如果三角形面是用隐形公式表示的,那么也可以写成如下公式:

image.png

如果表面有拐角,这时候也需要绘制对应的折痕:

image.png

还有一个是冷暖着色,一个方向用冷色着色,比如蓝色,另外一个方向用暖色着色,比如橘色。可以通过设置一个暖光源l来实现:

image.png

最终的颜色就是暖色和冷色的混合:

image.png

一般最常用的Cw和Cc如下:

image.png

再比较下不同着色的效果:

image.png

左边的是Phong着色,中间的是冷暖着色,右边的是冷暖着色,并且添加轮廓的,看起来有动漫的风格了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【笔记】《计算机图形学》(10)——表面着色
这系列的笔记来自著名的图形学虎书《Fundamentals of Computer Graphics》,这里我为了保证与最新的技术接轨看的是英文第五版,而没有选择第二版的中文翻译版本。不过在记笔记时多少也会参考一下中文版本
ZifengHuang
2020/09/28
1.5K0
【GAMES101-现代计算机图形学课程笔记】Lecture 08 Shading 2 (着色管线)
上一节主要介绍了漫反射,由下图我们知道着色点(shading point)的明暗程度与相机(观测)角度无关。具体的光线强度计算公式:
marsggbo
2020/06/12
1.5K0
图形学入门(三):基础着色
在掌握了上一篇文章的知识之后,我们现在可以通过逐个绘制三角形面组合出一个模型了。但是我们现在绘制出来的结果看起来是一个色块,效果不太自然。在现实中,我们看到物体是因为这个物体反射了光线,而在这个过程中,根据物体形状以及与光线的相对位置关系,物体的表面总会呈现不同的明暗效果。这种明暗的变化使我们感觉这个物体是「立体的」。也就是说,我们更希望看到下图1中右侧的渲染效果而非左侧的渲染效果:
zhiruili
2021/08/10
1.6K0
图形学入门(三):基础着色
光线追踪介绍
摘要 图像渲染就是一个这样的过程,输入一组物体,输出一个像素矩阵。把这个像素矩阵输送给显卡,显示器上就可以显示出来图像。本篇介绍下这个过程用到的算法,就是光线追踪。
一只小虾米
2022/10/25
1.1K0
光线追踪介绍
Shader-基础光照-漫反射光照模型
当光线从光源照射到模型表面,该表面回向每个方向散射多少辐射量 漫反射符合兰伯特定律:反射光线的强度与表面法线与光源方向之间的夹角的余弦值成正比. 漫反射的计算:
祝你万事顺利
2019/05/28
1K0
Shader经验分享
流水线 1.应用阶段:(CPU)输出渲染图元,粗粒度剔除等 比如完全不在相机范围内的需要剔除,文件系统的粒子系统实现就用到粗粒度剔除。 2.几何阶段:(GPU)把顶点坐标转换到屏幕空间,包含了模型空间 到世界空间 到观察空间(相机视角view) 到齐次裁剪空间(投影project2维空间,四维矩阵,通过-w<x<w判断是否在裁剪空间) 到归一化设备坐标NDC(四维矩阵通过齐次除法,齐次坐标的w除以xyz实现归一化) 到屏幕空间(通过屏幕宽高和归一化坐标计算)。 a.顶点着色器:坐标变换和逐顶点光照,将顶点空间转换到齐次裁剪空间。 b.曲面细分着色器:可选 c.几何着色器:可选 d.裁剪:通过齐次裁剪坐标的-w<x<w判断不在视野范围内的部分或者全部裁剪,归一化。 e.屏幕映射:把NDC坐标转换为屏幕坐标 3.光栅化阶段:(GPU)把几何阶段传来的数据来产生屏幕上的像素,计算每个图元覆盖了哪些像素,计算他们的颜色、 a.三角形设置:计算网格的三角形表达式 b.三角形遍历:检查每个像素是否被网格覆盖,被覆盖就生成一个片元。 c.片元着色器:对片元进行渲染操作 d.逐片元操作:模板测试,深度测试 混合等 e.屏幕图像 ------------------------------------------------------- 矩阵: M*A=A*M的转置(M是矩阵,A是向量,该公式不适合矩阵与矩阵) 坐标转换: o.pos = mul(UNITY_MATRIX_MVP, v.vertex);顶点位置模型空间到齐次空间 o.worldNormal = mul((float3x3)_Object2World,v.normal);//游戏中正常的法向量转换,转换后法向量可能不与原切线垂直,但是不影响游戏显示,而且大部分显示也是差不多的。一般用这个就行了。 o.worldNormal = mul(v.normal, (float3x3)_World2Object);顶点法向量从模型空间转换到世界空间的精确算法,公式是用_Object2World该矩阵的逆转置矩阵去转换法线。然后通过换算得到该行。 ------------------------------------------------------- API: UNITY_MATRIX_MVP 将顶点方向矢量从模型空间变换到裁剪空间 UNITY_MATRIX_MV 将顶点方向矢量从模型空间变换到观察空间 UNITY_MATRIX_V 将顶点方向矢量从世界空间变换到观察空间 UNITY_MATRIX_P 将顶点方向矢量从观察空间变换到裁剪空间 UNITY_MATRIX_VP 将顶点方向矢量从世界空间变换到裁剪空间 UNITY_MATRIX_T_MV UNITY_MATRIX_MV的转置矩阵 UNITY_MATRIX_IT_MV UNITY_MATRIX_MV的逆转置矩阵,用于将法线从模型空间转换到观察空间 _Object2World将顶点方向矢量从模型空间变换到世界空间,矩阵。 _World2Object将顶点方向矢量从世界空间变换到模型空间,矩阵。 模型空间到世界空间的矩阵简称M矩阵,世界空间到View空间的矩阵简称V矩阵,View到Project空间的矩阵简称P矩阵。 --------------------------------------------- _WorldSpaceCameraPos该摄像机在世界空间中的坐标 _ProjectionParams _ScreenParams _ZBufferParams unity_OrthoParams unity_Cameraprojection unity_CameraInvProjection unity_CameraWorldClipPlanes[6]摄像机在世界坐标下的6个裁剪面,分别是左右上下近远、 ---------------------------- 1.表面着色器 void surf (Input IN, inout SurfaceOutput o) {}表面着色器,unity特殊封装的着色器 Input IN:可以引用外部定义输入参数 inout SurfaceOutput o:输出参数 struct SurfaceOutput//普通光照 { half3 Albedo;//纹理,反射率,是漫反射的颜色值 half3 Normal;//法线坐标 half3 Emission;//自发光颜色 half Specular;//高光,镜面反射系数 half Gloss;//光泽度 half Alpha;//alpha通道 } 基于物理的光照模型:金属工作流Surfa
bering
2019/12/03
2.1K0
WebGL简易教程(十):光照
在上一篇教程《WebGL简易教程(九):综合实例:地形的绘制》中,实现了对一个地形场景的渲染。在这篇教程中,就给这个地形场景加上光照,让其更加真实,立体感更强。
charlee44
2019/10/15
1.3K2
WebGL简易教程(十):光照
OpenGL光照学习以及OpenGL4环境
前言 最近稍有空闲,整理下之前学习光照的笔记,以及在配置OpenGL4环境过程中遇到的问题。 光照 1、模拟灯光 模拟灯光:通过GPU来计算场景中的几何图形投射和散发出来的光线。 本质是GPU对每个三角形的顶点单独计算灯光,然后把结果再顶点之间的片元中进行插值。 故而当要求一个更真实、更光滑的灯光时,需要增加大量的三角形,从而加大计算量。 在上述这种情况,可以把灯光效果预处理并烘焙到纹理中。(就是形成一个纹理) 2、光照计算 光源=环境光 + 漫反射光 + 镜面反射光。 在计算光照的过程中,需
落影
2018/04/27
1.4K0
OpenGL光照学习以及OpenGL4环境
进阶渲染系列(一)——平坦和线框着色(导数和几何体)
本教程介绍如何添加对平面着色的支持以及如何显示网格的线框。它使用了高级渲染技术,并假定您熟悉“渲染”系列中介绍的材质。
放牛的星星
2020/07/10
2.6K0
进阶渲染系列(一)——平坦和线框着色(导数和几何体)
3D 可视化入门:渲染管线原理与实践
玩 3D 游戏的时候,有没有想过这些 3D 物体是怎么渲染出来的?其中的动画是怎么做的?为什么会出现穿模、阴影不对、镜子照不出主角的情况?要想解答这些问题,就要了解实时渲染。其中最基础的,就是渲染管线。
Tecvan
2021/12/09
7K1
3D 可视化入门:渲染管线原理与实践
【笔记】《计算机图形学》(11)——纹理映射
这系列的笔记来自著名的图形学虎书《Fundamentals of Computer Graphics》,这里我为了保证与最新的技术接轨看的是英文第五版,而没有选择第二版的中文翻译版本。不过在记笔记时多少也会参考一下中文版本
ZifengHuang
2020/12/08
4.5K0
【GAMES101】Lecture 08 着色频率
大家可以看到下面这三个球是看起来不一样的是吧,但是其实这三个球用的模型是一样,但是着色频率不一样,我们说着色是应用到某个点的,所谓着色频率就是指要将着色应用到哪些点上,左边这个球是平面着色,中间这个是顶点着色,右边这个是像素着色
叶茂林
2024/01/20
1370
【GAMES101】Lecture 08 着色频率
第5章-着色基础-5.2-光源
光照对我们示例着色模型的影响非常简单;它为着色提供了一个主导方向。当然,现实世界中的照明可能非常复杂。可以有多个光源,每个光源都有自己的大小、形状、颜色和强度;间接照明甚至增加了更多的变化。正如我们将在第9章中看到的,基于物理的、写实的着色模型需要考虑所有这些参数。
charlee44
2022/01/04
1.1K0
第5章-着色基础-5.2-光源
【GAMES101-现代计算机图形学课程笔记】Lecture 07 Shading 1 (Illumination, Shading and Graphics Pipeline)
真实世界中的物体之间相对于相机是有远近关系的,那么在2D平面上如何反应物体的先后关系呢?一个常用的方法是Painter's Algorithm (画家算法),即先画远处的物体,然后把近处的物体画在远处物体的前面,如下图所示。
marsggbo
2020/06/12
1.8K0
【OpenGL】二十二、OpenGL 光照效果 ( 模型准备 | 光照设置 | 启用光照 | 启用光源 | 设置光源位置 | 设置光照参数 | 设置环境光 | 设置反射材质 | 设置法线 )
介绍光照前 , 先将模型准备好 , 绘制一个放平的三角形 , 使三角形处于 xz 平面 , xy 平面指的是屏幕所在的平面 , xz 平面的三角形只能看到一条线 ;
韩曙亮
2023/03/28
6450
【OpenGL】二十二、OpenGL 光照效果  ( 模型准备 | 光照设置 | 启用光照 | 启用光源 | 设置光源位置 | 设置光照参数 | 设置环境光 | 设置反射材质 | 设置法线 )
图形管线
图形管线描述的是从图像输入到呈现在显示器上的一个流程。在这一篇里就会看到这个流程中间涉及的一些内容。 中间涉及的流程可以参考下图:
一只小虾米
2022/10/25
6930
图形管线
计算机图形学整理
光在每个波长上的能量有多大,就得到了上图中的一条曲线,这个曲线就是谱分布。我们可以用这条曲线来刻画一些特有的光。
算法之名
2023/03/31
7510
计算机图形学整理
【GAMES101】Lecture 08 图形管线(实时渲染管线)与纹理映射
给我一个三维模型,给我一个光照条件,我就能够得出渲染的结果,这些东西合起来就是Graphics Pipeline,图形管线,闫神愿称之为实时渲染管线,那下面这个流程图就是这个渲染流水线
叶茂林
2024/01/20
2810
【GAMES101】Lecture 08 图形管线(实时渲染管线)与纹理映射
Unity通用渲染管线(URP)系列(三)——方向光(Direct Illumination)
如果要创建一个更加真实的场景,我们就需要模拟光和物体表面的交互。这比我们之前制作的不受光的着色器要复杂的多。
放牛的星星
2020/12/11
5.9K0
Unity通用渲染管线(URP)系列(三)——方向光(Direct Illumination)
基础渲染系列(四)——光照(Unity)
这是关于渲染的系列教程的第四部分。上一部分是关于组合纹理的。这次,我们将研究如何计算光照。
放牛的星星
2020/07/10
2.8K0
基础渲染系列(四)——光照(Unity)
推荐阅读
相关推荐
【笔记】《计算机图形学》(10)——表面着色
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档