Shader
文章平均质量分 88
Shader渲染相关
little_fat_sheep
图形学领域爱好者,未来将在图形渲染(OpenGL、LibGDX、Filament、Unity3D、UE)、图形编解码(FFmpeg)等领域长期深耕。
展开
-
【Unity3D】Renderer Feature简介
3D 项目迁移至 URP 项目后,会出现很多渲染问题,如:材质显示异常、GL 渲染不显示、多 Pass 渲染异常、屏幕后处理异常等问题。下面将针对这些问题给出一些简单的解决方案。3D 项目中,我们在MonoBehaviour的生命周期的 OnRenderImage 方法中实现屏幕后处理(详见→调整屏幕亮度、饱和度、对比度)。但是,在 URP 项目中,OnRenderImage 方法不会回调。所幸,Unity 为我们提供了 Rnederer Feature(详见第 3 节),为屏幕后处理提供了一个解决原创 2023-08-08 20:46:30 · 1584 阅读 · 0 评论 -
【Unity3D】花瓣特效
我们在 xOz 平面上绘制花朵,假设花心为 O 点,其世界坐标为 _Center, 花瓣个数为 _PetalNum,花瓣半长度和半宽度分别为 _PetalLength、_PetalWidth,背景、花心、花蕊、花瓣的颜色分别为 _BackgoundColor、_HeartColor、_StamenColor、_PetalColor;如下图是实现的花瓣特效效果,为方便描述,我们将每个红色的扁状长条称为花瓣,每个花瓣中心的绿点称为花蕊,花朵的正中心称为花心。为简化计算,我们定义旋转零度方向为 z 轴正方向。原创 2023-08-05 21:57:56 · 1035 阅读 · 0 评论 -
【Unity3D】地面网格特效
本文实现了地面网格特效,包含以下两种模式:实时模式:网格线宽度和间距随相机的高度实时变化;分段模式:将相机高度分段,网格线宽度和间距在每段中对应一个值。原创 2023-07-22 18:51:27 · 1294 阅读 · 0 评论 -
【Unity3D】伽马校正
在早期,CRT(Cathode Ray Tube,阴极射线管)几乎是唯一的显示设备,它有一个特性,输入电压和显示亮度不是线性关系,而是伽马函数关系,并且其 γ 值刚好是伽马编码函数的 γ 值的倒数,这正好补偿了图像捕捉设备的伽马编码造成的亮度非线性问题。伽马空间中,Unity 不会对 Shader 的输入和输出进行任何处理,因此,输入的像素可能是非线性的,输出的像素经过显示器的伽马解码处理后可能会得到非预期的亮度,通常表现为场景整体变暗。处理后,再存入 jpeg 等格式图片文件中,在读取图片文件时,通过。原创 2023-07-16 22:57:24 · 1246 阅读 · 0 评论 -
【Unity3D】动态路径特效
本文通过导航系统(NavMeshAgent)和线段渲染器(LineRenderer)实现了角色走迷宫和绘制路径功能,同时实现动态路径特效。导航系统分离路面导航动态路障导航。线段渲染器LineRenderer。动态路径特效的原理是:通过对顶点的 uv 纹理坐标平移实现路径节点的移动效果。原创 2023-07-09 21:23:07 · 1581 阅读 · 1 评论 -
【Unity3D】选中物体消融特效
当前实现消融特效的方法主要有 Alpha 测试消融、clip(或 discard)消融,它们的本质都是随机丢弃一些片元,以实现消融效果。为模拟随机效果,可以通过对噪声纹理进行采样实现,如下是一些常用的噪声纹理。这些噪声有一个共同特点:在小的邻域范围内,灰度是渐变的,使得模拟的消融效果更加和谐。Alpha 测试消融原理:将片元的 alpha 通道设置为随机值,通过 AlphaTest 剔除 alpha 值小于阈值的片元,以实现消融效果,代码如下。案例见→固定管线着色器二。由于改变了 alpha 通原创 2023-07-07 01:13:29 · 897 阅读 · 0 评论 -
【Unity3D】素描特效
中讲述了普通光照的渲染原理,实现的效果比较贴近真实世界(照相写实主义,Photorealism),非真实渲染(Non-Photorealism Rendering,NPR)在照相写实主义的基础上添加了一些风格处理,如:卡通、水彩、素描等风格。线条采样方法:先计算顶点对应的漫反射强度,假设为 diffuse,再根据 diffuse 所处的区间在多个素描纹理(如下)中采样。素描特效不直接渲染漫反射效果,而是通过线条的疏密程度表现漫反射效果,即:较亮处线条稀疏,较暗处线条密集。原创 2023-06-27 23:40:02 · 780 阅读 · 2 评论 -
【Unity3D】平面光罩特效
屏幕深度和法线纹理简介中对深度和法线纹理的来源、使用及推导过程进行了讲解,激光雷达特效中讲述了一种重构屏幕像素点世界坐标的方法,本文将沿用激光雷达特效中重构像素点世界坐标的方法,实现平面光罩特效。shieldHeight < height - lineWidth:渲染背景颜色,即 tex2D(_MainTex, i.uv);shieldHeight > height + lineWidth:渲染遮罩与背景的混合颜色;原创 2023-06-23 18:30:24 · 1167 阅读 · 0 评论 -
【Unity3D】基于深度和法线纹理的边缘检测方法
边缘检测特效中使用屏后处理技术,通过卷积运算计算梯度,检测每个像素周围像素的亮度差异,以识别是否是边缘像素;选中物体描边特效中也使用了屏后处理技术,通过 CommandBuffer 获取目标物体渲染后的模板纹理,并将模板纹理模糊化,使得模板纹理的边缘向外扩张,再将模糊化后的模板纹理与原纹理进行合成,得到描边后的纹理;基于模板测试和顶点膨胀的描边方法。原创 2023-06-22 17:45:55 · 1494 阅读 · 0 评论 -
【Unity3D】流动雾效
屏幕深度和法线纹理简介中对深度和法线纹理的来源、使用及推导过程进行了讲解,激光雷达特效中讲述了一种重构屏幕像素点世界坐标的方法,本文将介绍使用深度纹理重构屏幕像素点在相机坐标系下的坐标计算方法,并使用重构后的坐标模拟雾效。雾效即离观察者越远的点越趋近于雾的颜色,并且雾的浓度越大。本文将使用屏幕后处理技术,计算每个顶点与相机的距离,并根据距离计算雾的浓度,依据浓度给该像素点混合原始颜色与雾效颜色。原创 2023-06-21 22:49:21 · 2509 阅读 · 0 评论 -
【Unity3D】激光雷达特效
Q 点在近平面上,可以通过近裁剪平面的四个角插值得到,O 和 near 为定值,因此 (OQ / near) 也可以通过插值得到。对于屏幕上的任意一点,它对应的世界坐标系中的点记为 P,对应的近裁剪平面上的点记为 Q,相机位置记为 O(坐标为 _WorldSpaceCameraPos),假设 P 点的深度为 depth(由 LinearEyeDepth 函数获取),相机到近平面的距离为 near,如下图所示。其中,公式 2 由三角形相似原理得到,公式 2 由 O、P、Q 三点共线得到。原创 2023-06-18 14:05:53 · 2719 阅读 · 0 评论 -
【Unity3D】屏幕深度和法线纹理简介
深度纹理本质是一张图片,图片中每个像素反应了屏幕中该像素位置对应的顶点z值相反数(观察坐标系),之所以用 “反应了”而不是 “等于”(或 “对应” ),因为深度纹理中颜色的值域是 [0, 1],而顶点z值相反数不一定在该区间,另外顶点 z值相反数与深度纹理不是线性关系(透视投影引起的)。法线纹理本质也是一张图片,图片中每个像素的 R、G值对应该点法线向量的x、y 值(观察空间),z值通过公式 z =sqrt(x * x + y * y)计算得到。深度纹理和法线纹理可以用于边缘检测特原创 2023-06-13 00:35:47 · 1837 阅读 · 0 评论 -
【Unity3D】运动模糊特效
开启混合(Blend)后,通过Alpha通道控制当前屏幕纹理与历史屏幕纹理进行混合,当有物体运动时,就会将当前位置的物体影像与历史位置的物体影像进行混合,从而实现运动模糊效果。第一个 Pass通过Alpha通道控制当前屏幕纹理与历史屏幕纹理进行混合,通过 ColorMask RGB保证融合不影响Alpha通道值;第二个Pass对当前屏幕的Alpha通道进行采样,通过 ColorMask A保证采样不影响RGB通道的值。原创 2023-06-04 16:40:12 · 1613 阅读 · 1 评论 -
【Unity3D】Bloom特效
Bloom 特效是指:将画面中较亮的区域向外扩散,造成一种朦脓的效果。实现 Bloom 特效,一般要经过 3 个阶段处理:亮区域检测、高斯模糊、Bloom 合成。根据亮度阈值检测亮区,如下从原图中提取亮区域。将高斯模糊处理后的亮区域图像与原图像叠加。对亮区域进行高斯模糊(原理见→。),使得亮区域往外扩散,并产生朦脓效果。原创 2023-06-03 21:48:41 · 1943 阅读 · 0 评论 -
【Unity3D】高斯模糊特效
我们将用于模糊处理的卷积核称为模糊算子,它一般满足以下条件:卷积核中权值上下对称、左右对称;卷积核中每个权值大于或等于 0,小于 1;卷积核中所有权值之和为 1。 我们将所有权值都为 1 / n(n 为权值个数)的卷积核称为平均模糊算子;将权值随位置变化且符合高斯分布(或正太分布)的卷积核称为高斯模糊算子(或高斯核),它较好地模拟了邻域中每个像素对当前处理像素的影响程度(距离越近,影响越大)。σ是标准差,其值越大,高斯分布函数的图像越矮胖,一般取值为 1,x、y为当前位置到卷积核原创 2023-06-03 18:00:23 · 1884 阅读 · 0 评论 -
【Unity3D】边缘检测特效
边缘检测的原理是:检测每个像素周围的像素亮度差,如果亮度差异较大,就将该像素识别为边缘,并进行边缘着色。周围像素的亮度差异计算,也需要使用卷积运算。对于每个像素的周围像素,我们可以给它赋予一个权值,对这些像素的亮度进行加权求和,将该加权和记作该点的一个特征值,我们可以根据该特征值决策该点是否显示为边缘色。为方便描述上述运算,我们将周围像素的权值序列记作卷积核,将加权运算记作卷积运算。原创 2023-06-03 01:12:40 · 1509 阅读 · 0 评论 -
【Unity3D】调整屏幕亮度、饱和度、对比度
在 OnRenderImage 方法里,通常使用 Graphics.Blit 方法完成对纹理的处理,如下是常用的 Bilt 方法,source 是源纹理,dest 是目标纹理,mat 是进行屏幕后处理的材质,用户可以在该材质绑定的 Shader 中实现屏幕后处理特效。用户通过 CommandBuffer.DrawRenderer和Graphics.ExecuteCommandBuffer也可以实现Graphics.Blit效果。在Shader中,用户也可以通过 GrabPass抓取屏幕图像。原创 2023-05-31 01:03:55 · 2400 阅读 · 0 评论 -
【Unity3D】广告牌特效
广告牌特效是指:空间中的一个 2D 对象始终(或尽可能)面向相机,使得用户能够尽可能看清楚该 2D 物体。广告牌特效一共有以下 3 种:正视广告牌:广告牌始终以正视图姿态面向相机,即广告牌的 x、y、z 轴正方向始终指向相机的 x、y、z 轴正方向;血条广告牌:游戏中的血条效果广告牌,广告牌可以绕世界坐标系的 y 轴旋转,使其尽可能面向相机,即广告牌的 x 轴正方向始终指向相机的 x 轴正方向,y 轴正方向始终指向 (0, 1, 0) 方向,z 轴正方向可以随相机位置和姿态变动;测距广告牌。原创 2023-05-28 18:58:12 · 2208 阅读 · 6 评论 -
【Unity3D】反射和折射
立方体纹理(Cubemap)和天空盒子(Skybox)中介绍了生成立方体纹理和制作天空盒子的方法,本文将使用立方体纹理进行采样,实现反射、菲涅耳反射和折射效果。另外,本文还使用了 GrabPass 抓取屏幕图像,替代立方体纹理,作为折射的采样纹理。立方体纹理采样原理:从世界坐标系的坐标原点出发,发射一条射线,与边长为 1 的立方体相交(其中心在坐标原点,并且每个面与对应坐标轴垂直),交点位置的像素即为采样的像素。原创 2023-05-23 01:36:25 · 1289 阅读 · 2 评论 -
【Unity3D】阴影原理及应用
如果当前 Shader 文件中没有 LightMode 为 ShadowCaster 的 Pass,就去 Fallback 指定的 Shader 中继续寻找,如果仍没有找到,就继续去 Fallback 里寻找,直到找到了 ShadowCaster Pass 或没有 Fallback,如果最后找到了,Unity 会使用该 Pass 更新光源的阴影映射纹理。注意:投射阴影和接收阴影开关可以独立控制,不相互依赖,因此,一个物体可以只投射阴影而不接收阴影,也可以只接收阴影而不投射阴影。其原理是:先生成相机的。原创 2023-03-30 23:57:55 · 1802 阅读 · 0 评论 -
【Unity3D】法线贴图和凹凸映射
漫反射和镜面反射光照计算使用了法线向量、灯光向量、观察向量,但是它们所处的坐标系不相同,为方便计算光照,需要统一坐标系,即将纹理法线向量由切线坐标系转换到世界坐标系,或者将灯光向量和观察向量由世界坐标系转换到切线坐标系。其中,_ModelColor、_LightColor0 分别表示模型颜色、灯光颜色,UNITY_LIGHTMODEL_AMBIENT 表示环境光强度,normal、lightDir、viewDir、halfDir 分别表示法向量、灯光向量、观察向量、半向量(见上图,它们都已归一化)。原创 2023-03-24 00:09:07 · 1237 阅读 · 0 评论 -
【Unity3D】空间和变换
Unity 局部空间、世界空间、裁剪空间、屏幕空间都采用左手坐标系,只有观察空间采用右手坐标系。左右手坐标系除了坐标系朝向(旋向性)不同,还存在以下差异:左手坐标系下旋转正方向的定义遵循左手法则,右手坐标系下旋转正方向的定义遵循右手法则;左手坐标系下向量叉乘遵循左手法则。Unity局部空间世界空间裁剪空间屏幕空间都采用左手坐标系,只有观察空间采用右手坐标系。左右手坐标系除了坐标系朝向(旋向性)不同,还存在以下差异:旋转正方向的定义旋转正方向的定义向量叉乘向量叉乘。原创 2023-02-23 01:01:57 · 5184 阅读 · 13 评论 -
【Unity3D】Shader常量、变量、结构体、函数
Unity Shader 常量、变量、结构体、函数一般可以在 Unity Editor 安装目录下面的【Editor\Data\CGIncludes\UnityShader】目录下查看源码,主要源码文件如下:UnityCG.cgincUnityShaderUtilities.cgincUnityShaderVariables.cginc原创 2023-02-12 16:39:06 · 3823 阅读 · 1 评论 -
【Unity3D】激光灯、碰撞特效
本文将模拟激光灯(或碰撞)特效,详细需求如下:从鼠标位置发射屏幕射线,检测是否与物体发生碰撞当与物体发生碰撞时,在物体表面覆盖一层激光灯(或碰撞)特效 获取屏幕射线与物体的碰撞点,并在 shader 中计算顶点与碰撞点的距离(记为 dist),通过以下衰减函数计算顶点对应的透明度,透明度随碰撞点的距离增大逐渐减小,激光灯(或碰撞)效果逐渐减弱。alpha = pow(exp(-dist), 4) 为使特效更加逼真,激光灯(或碰撞)特效的红色分量由以下漫反射公式控制。原创 2023-01-31 23:11:46 · 3327 阅读 · 0 评论 -
【Unity3D】基于模板测试和顶点膨胀的描边方法
选中物体描边特效中介绍了基于模板纹理模糊膨胀的描边方法,该方法实现了软描边,效果较好,但是为了得到模糊纹理,对屏幕像素进行了多次二次渲染,效率欠佳。本文将介绍另一种描边方法:基于模板测试和顶点膨胀的描边方法,该方法绘制的是硬描边,但效率较高。法线突变处(如:立方体的两面交界处),描边断裂描边宽度受透视影响,远处描边较窄,近处描边较宽本文通过平滑法线解决描边断裂物体,通过深度信息抵消透视对描边宽度的影响。原创 2023-01-18 01:05:00 · 4557 阅读 · 5 评论 -
【Unity3D】半球卷屏特效
注意:屏幕坐标原坐标原点在屏幕左上角,y 轴向下,x、y 轴的值域分别为 [0, ScreenWidth]、[0, ScreenHeight],纹理坐标原坐标原点在纹理图片左下角,x、y 轴的值域都是 [0, 1],这里已进行了一些预处理,将屏幕坐标和纹理坐标的坐标轴都变换到中心位置,x、y 轴的值域都变换到 [-1, 1]。当凸镜半角 (φ/2) 较小时(近似0°),凸镜半径较大 (近似无穷大),屏幕只需要贴到凸镜的很小一块区域,该区域近似一个平面;原创 2022-11-26 23:45:11 · 1627 阅读 · 1 评论 -
【Unity3D】卷轴特效
当一个圆在地面上沿直线匀速滚动时,圆上固定点的运动轨迹称为旋轮线(或摆线、圆滚线)。本文实现的卷轴特效使用了旋轮线相关理论。注意:屏幕坐标 x 值域为 [0, ScreenWidth],这里已归一化到 [0, 1]。以下是卷轴特效原理及公式推导,将屏幕坐标 (x) 映射到纹理坐标 (u)。原创 2022-11-27 23:01:52 · 2384 阅读 · 0 评论 -
【Unity3D】水波特效
水波特效属于 Unity3D 后处理特效,其原理是:对渲染后的纹理进行局部挤压和拉伸变换,即对局部 uv 坐标进行周期性的偏移运动,实现波纹效果。其中,r 是质点距离水波中心的半径长度,w1 是波形角频率(值越大,波纹越密),A 是质点水平振动的振幅,offset 是质点的水平偏移量。点击屏幕任意位置,出现水波如下,注意观察地面和天空交界的直线,可以明显看到正弦波形。其中,w2 是质点水平振动的角频率(值越大,质点振动越快)。WaterWaveEffect 脚本组件需要挂在相机下。原创 2022-11-23 01:14:35 · 4207 阅读 · 3 评论 -
【Unity3D】选中物体描边特效
描边的难点在于如何检测和识别边缘,基于模板纹理模糊膨胀的描边方法 首先使用纯色对选中的物体进行渲染,得到模板纹理,接着对模板纹理进行模糊处理,使模板颜色往外扩,得到模糊纹理,再根据模板纹理和模糊纹理对所有物体重新渲染,渲染规则:如果该像素点在模板纹理内部,就渲染原色,如果在模板纹理外部,就根据模糊纹理的透明度判断渲染原色还是模糊纹理色。 该方案属于外描边,效果较好,实现较难,但算法不依赖阈值。原创 2022-11-19 23:12:18 · 6968 阅读 · 10 评论 -
【Unity3D】顶点和片元着色器
固定管线着色器通过命令方式实现光照和贴图等效果,表面着色器通过给 SurfaceOutput 赋值实现光照、贴图和法线贴图等效果,它们都不用关注光照算法是如何实现的,只需要传值就行。顶点和片段着色器给用户提供了更灵活的用法,但使用也更困难。另外,顶点着色器可以通过控制 MVP 矩阵变换实现对模型位置和姿态的控制。原创 2022-09-20 01:14:44 · 3308 阅读 · 10 评论 -
【Unity3D】表面着色器
固定管线着色器一、固定管线着色器二中介绍了 ShaderLib 的基本用法,本文将接着讲解表面着色器(Surface Shader)的用法。固定管线着色器基于 ShaderLib 命令实现,表面着色器基于 CG 语言实现。目前主流的 Shader 编程语言主要有 GLSL、HLSL、CG,如下:GLSL:OpenGL Shading Language,基于 OpenGL 接口,跨操作系统,依赖硬件。原创 2022-09-18 01:18:34 · 3475 阅读 · 5 评论 -
【Unity3D】固定管线着色器二
固定管线着色器一中介绍了 Shader 中外部属性、光照、贴图等基础用法,本文将进一步讲解固定管线着色器,介绍正面与反面剔除、Alpha 测试、深度测试、混合、渲染队列等用法。渲染管线相关理论知识详见→渲染管线。原创 2022-09-14 00:44:32 · 1938 阅读 · 6 评论 -
【Unity3D】固定管线着色器一
着色器(Shader)是渲染管线中最重要的一环,Unity3D 底层基于 OpenGL 实现,读者可以通过渲染管线了解 Unity3D 渲染流程。OpenGL 1.x 为固定管线,2.x 之后才支持可编程管线,Unity3D 固定管线着色器使用ShaderLab语言实现。ShaderLab 是 Unity Shader 的服务语言,是基于命令的语言。每个游戏对象需要绑定至少一个材质(Material)才能渲染,即使材质为 None,系统也会绑定一个默认的材质。原创 2022-09-12 17:33:40 · 2083 阅读 · 7 评论