Jaihk662-CSDN博客

原创 Photoshop1：入门实用技巧

一、去白底目的：为了避免图像的空白区域遮住背景，将图片的白色底改为透明底：1)：解锁图层2)：选择魔棒工具魔棒和快速选择的区别：快速选择更接近画笔，可以拖动以动态选择你想要的区域，而魔棒是算法向的，会自动选择当前颜色一致的色块，因此这里使用魔棒就会超级方便3)：点击要去除的白色区域紧接着按下 Del 键删除这块白色区域，按 Ctrl+D 取消魔棒选择就完成了...

2021-03-21 00:48:38 992

原创 UnityShader30：预编译指令 multi_complie 和 shader_feature

multi_complie 和 shader_feature 编译指令往往用于正式游戏项目的优化一、关键字与Shader变体multi_complie 的用法：#pragmamulti_compile NAMEA, NAMEB, NAMEC, …,参考代码：Shader "Jaihk662/ShaderVariantTest"{ Properties { _MainTex("Texture", 2D) = "white" {} ....

2021-03-15 21:02:17 944

原创常见图片格式与调色算法

一、常见图片格式1)：JPEG 格式同等于JPG 和JPE 格式有损压缩储存空间小除RGB三色外，无法保留透明度、动画等任何信息颜色品质不错，但是在压缩过程中图像品质会有着肉眼可见的下降。一张图片多次上传下载后，图片逐渐会失真。一般用于网络上图片传播，不会作为游戏、影视资源使用。你网上下载的极大部分图片都会是 .jpg 格式的2)：PNG 格式无损压缩支持 Alpha 通道的半透明特性、图像亮度的 gamma 校正信息等允许在一个文件内存储多幅图像（多...

2021-03-14 01:34:06 958

原创 RayMarching3：组合与变幻

接上文：RayMarching2：给球加上光照六、联合、交叉与取反1)：联合(union)联合的目的很简单：当场景中有多个物体时，这些物体都要显示假定物体 A 和物体 B，它们的 SDF 函数为和，那么 A ∪ B 就对应//联合float unionSDF(float distA, float distB){ return min(distA, distB);}//物体的SDFfloat sceneSDF(float3 rayPoint){...

2021-03-07 19:17:18 218

原创 RayMarching2：给球加上光照

接上文：RayMarching1：用射线的方式画一个圆四、法线与光照如果对偏导或者梯度场有了解，那么对于一个规则的平面想要得到某一点的法线就不是难题考虑到第一节 SDF 函数，我们知道：对于刚好在当前表面上的点 x 满足，对于在表面内部的点满足，对于表面外部的点满足，而法线有一个很重要的性质正是：当且仅当点 x 沿着法线的方向移动，能以最快的速度从负数递增到正数，这个增量可以用来表示，考虑到每个方向上的偏导，也就是说正是我们想要的法线肯定不需要去求导数，就按照周围的采...

2021-03-06 20:49:04 344

原创 RayMarching1：用射线的方式画一个球

一、ShaderToy作品如果你对 Shader 有一定的了解，那么你或多或少听说过shaderToy这个网站，这个网站上有很多令人振奋的 shader 效果，而这些效果有可能只用了几行代码来实现。就如同画家绘画，在这里片段着色器就是画笔，屏幕就是画纸：网站中对于任意一个作品，都提供了完整的 GLSL 片段着手器代码，它们是通过在你的浏览器中运行 WebGl 来展现这些效果的。你也可以通过修改代码，修改变量和输入来直接在网页上查看效果的变幻只通过片段着色器来输出你的画面，那么这就基...

2021-03-06 12:41:32 646

原创将ShaderToy中的Shader搬运到Unity

一、ShaderToy作品如果你对 Shader 有一定的了解，那么你或多或少听说过 shaderToy 这个网站，这个网站上有很多令人振奋的 shader 效果，而这些效果有可能只用了几行代码来实现，就如同画家绘画，片段着色器就是我们的画笔，屏幕就是我们的图纸：对于任意一个例子，都提供了完整的 GLSL 片段着手器代码，它们是通过在你的浏览器中运行 WebGl 来展现这些效果的。你也可以通过修改代码，修改变量和输入来直接在网页上查看效果的变换把它搬运到 Unity 上并不难，由于它们...

2021-03-06 00:49:02 2428 1

原创 UnityShader29：模板测试

一、什么是模板测试：OpenGL基础30：模板测试Unity官方文档：https://docs.unity3d.com/Manual/SL-Stencil.html在 Unity 中，最经典的模板测试例子就是 UI Mask：二、Unity 中的模板测试SubShader{ Tags { …… } Pass { Stencil { //可选 Ref referenc...

2021-03-05 18:08:06 719 1

原创 UnityShader28：噪声纹理

一、噪声纹理听名字挺蒙的，其实它的作用就是展现出一个事物“混沌”或“杂乱无章”的效果，就像雾气和雪地，它们绝对不会是均匀单一的，不然给人的感觉就像是屏幕变灰了，以及往地上涂了一层白色油漆一样Shadertoy上关于Perlin噪声的实现噪声纹理本质上是一种“固定”的随机，本章后面使用的噪声纹理如左下：何为“固定”的随机呢？在 C++ 中我们会使用 Random() 函数来解决一类问题，图形领域也一样，只不过有的时只使用简单的随机生成器反而会带来更不自然的效果，右上图就是一张完全随机的噪...

2021-03-02 20:50:59 1460

原创 UnityShader例子：边缘检测

一、边缘检测没有什么新的东西，只需了解《UnityShader26：运动模糊》这一章里面的内容就好1)：Roberts算子：本质就是计算左上角和右下角的差值，乘上右上角和左下角的插值，作为评估边缘的依据2)：边缘检测步骤：了解 Roberts 算子的逻辑后，实现边沿检测就简单了：拿到当前 uv 坐标相邻的4个采样点，分别作为 Roberts 的四个候选点得到每个点的深度和法线信息计算两个对角线上候选点的法线和深度差判断这个差值是否超过设定的阈值，如果超过则判定当...

2021-03-02 11:52:31 631

原创 UnityShader27：屏幕雾效

前置：UnityShader26：运动模糊一、Linear01Depth & LinearEyeDepth在前一章中，提到过这两个方法：LinearEyeDepth(d)：将获得视角空间下的线性深度值，范围为[Near, Far] Linear01Depth(d)：由 LinearEyeDepth(d) / Far 得到，范围为[Near/Far, 1]如果尝试用公式递推的话：根据《OpenGL基础29：深度测试》的内容可以得到：，其中为远平面，为近平面因此可以反...

2021-03-01 00:39:52 614

原创 UnityShader26：运动模糊

一、在 Unity 中使用深度纹理或法线纹理前置：OpenGL基础29：深度测试，关于深度测试的流程以及深度值的算法、空间变换都在这里提到过在 Unity 中，想要在着色器中获得当前摄像机的深度纹理或者法线纹理，只需要设置//让摄像机产出一张深度纹理GetComponent<Camera>().depthTextureMode |= DepthTextureMode.Depth;//让摄像机产出一张深度-法线纹理GetComponent<Camera>()....

2021-02-26 11:29:52 807

原创 UnityShader25：在Unity中实现泛光

一、需要提前了解的这一章的例子非常的综合，可以说是知识点广而全，如果能独立在 Unity 中实现一个不错的泛光效果，那么 UnityShader 就算作入门成功！曾经在 OpenGL 的教程中，就已经实现过泛光效果了：OpenGL基础51：泛光 OpenGL基础35：帧缓冲（下）之简单图像处理：里面提到了一些图像处理的算子和卷积明白了泛光的原理后，就是 UnityShader的基础部分：UnityShader24：最简单的屏幕后处理例子：泛光必然也是一种后处理手段 Unit...

2021-02-24 14:06:47 1404

原创 UnityShader24：最简单的屏幕后处理例子

一、需要提前了解的其实关于屏幕后处理(Screen Post-processing Effects)相关的知识，前面已经提过了不少：这些是 OpenGL 渲染部分：OpenGL基础35：帧缓冲（下）之简单图像处理：图像处理更多的是思维和算法，和你的平台/语言都无关 OpenGL基础33：帧缓冲（上）之离屏渲染 OpenGL基础34：帧缓冲（中）之附件搞懂了上面这些后，就可以进入 Unity3D 了：UnityShader19：渲染纹理（上）之截屏功能实现：里面有关 Render...

2021-02-22 17:45:50 474

原创 UnityShader23：顶点动画

前置：UnityShader22：序列帧动画一、顶点动画如果说序列帧动画（uv 动画）是通过改变 uv 坐标来实现的，那么顶点动画就是通过改变 Mesh 每个顶点的位置，直接让这个物体“扭曲变形”来实现动态效果SCP783-扭曲的人只需要在 Shader 中修改顶点着色器中的 pos 值就可以实现简单的顶点动画，顶点动画的特点：想要实现复杂的动画可能较为困难，如有错误的计算可能会得到非常鬼畜的效果由于是顶点动画，所以动画的精细程度和物体 Mesh 顶点数目成正比，必然是顶点越细密，...

2021-02-21 22:08:03 1490

原创 UnityShader22：序列帧动画

一、序列帧动画序列帧动画的原理是如此的简单，可以说只需要足够多张纸以及足够多的时间，就可以实现最简单的动画：不使用 Animation 工具，只需要使用 Shader 中的内置时间变量，就可以实现最简单的序列帧动画了。就像最早的电影，依次展示一张又一张的图片，只要这些图片是连续的并且切换的足够快，那么当然就可以骗过人的眼睛，得到细腻的动画效果（现在我们的电脑电视本质上依然是这个原理，只不过是以帧的形式表现的）‘序列帧的优点和缺点都很明显：优点：无需任何计算，直接显示图片，逻辑简单，...

2021-02-19 21:25:00 3832

原创 UnityShader21：程序纹理

一、程序纹理程序纹理顾名思义就是代码生成的纹理，好了到此就是程序纹理的全部介绍了……再细一点讲：假设我们想生成一个下面这样的纹理（白色背景，9给黄色圆圈等距排列），对应的伪代码就为定义圆的半径A = ?定义第一个圆的圆心B = ?定义相邻两个圆的横纵距离 = ?定义每行每列圆的个数 = 3 x 3定义纹理大小（HxW）= 512 x 512定义圆的颜色 = yellow……for 纹理的每一个像素 if 计算得到当前像素坐标在某个圆的内部设置...

2021-02-18 22:10:58 1067

原创 UnityShader20.1：CommandBuffer初见（下）

接上文：UnityShader20：CommandBuffer初见（上）四、复杂一点的例子……CommandBuffer代码参考如下：using UnityEngine;using UnityEngine.Rendering;using System.Collections.Generic;[ExecuteInEditMode]//加上ExecuteInEditMode后，下面的代码在编辑模式中就会运行，无需每次测试都要play了public class CommandBuf...

2021-02-10 16:46:57 2901

原创 UnityShader20：CommandBuffer初见（上）

一、命令缓冲区 CommandBuffer根据渲染模式的不同，Unity的渲染流水线如下：其中蓝色的部分就是 CommandBuffer 可插入的部分，CommandBuffer 本质上就是做一个插入操作，以实现在 Unity 的某个渲染步骤完成后，执行你的额外操作其中：可以通过Camera.AddCommandBuffer命令插入到 Camera Rendering 渲染队列，插入点为CameraEvent enum. 枚举中的内容，可以通过Light.AddComm...

2021-02-09 21:26:06 1502

原创 UnityShader19.1：渲染纹理（下）之GrabPass

接上文：渲染纹理（上）之截屏功能实现四、GrabPass 抓取图象GrabPass 是 UnityShader 中的一个特殊 Pass，它的目的很简单：立刻获取当前的屏幕图象代码也非常简单：Tags { "Queue" = "Transparent" "RenderType" = "Opaque" }GrabPass { "_RefractionTex" }LOD 200PASS { //…… sampler2D _RefractionTex; ...

2021-02-05 22:36:09 1341

原创 UnityShader19：渲染纹理（上）之截屏功能实现

一、渲染到 RT渲染纹理(Render Texture) 就是游戏开发中经常被提到的 RT，渲染到 RT 的一句话理解就是不将渲染的结果直接显示的屏幕上，而是存至一张指定的纹理中在 Unity 中最简单的操作（三步实现渲染到 RT，无需写代码）：这样这台摄像机的渲染结果就会存入你设置的 RT 中，而不再显示在屏幕上这个设置转成代码就是：_renderTexture = new RenderTexture(width, height, 8);_camera.targe...

2021-02-02 18:25:15 1440

原创 UnityShader18.1：立方体贴图（下）

接上文：https://blog.csdn.net/Jaihk662/article/details/113248074四、菲涅尔反射菲涅尔反射就是同时考虑反射和漫反射，或是说同时考虑反射和折射，当物体照到上时，一部分发生反射，一部分进入物体内部发生折射和散射。当你站在湖边低头看脚边的水面时，会发现水几乎是透明的，可以很清晰的看到湖底，但是当你抬头看远处的水面时，就几乎看不到任何水下的场景。几乎任何物体都多多少少包含了菲涅尔反射的现象现实中的菲涅尔反射计算非常的复杂，因此往往采用如下的近似...

2021-01-29 22:29:47 640

原创 UnityShader18：立方体贴图（上）

一、天空盒使用立方体贴图最直接的目的就是展现天空盒，或者更进一步用于实现环境映射（反射与折射）关于立方体贴图的采样原理：https://blog.csdn.net/Jaihk662/article/details/107379399Unity 中天空盒的设置：一样可以对于不同的摄像机使用不同的天空盒：二、简单的反射实现关于反射和折射的原理：https://blog.csdn.net/Jaihk662/article/details/107491144代码和效果...

2021-01-27 16:34:40 923

原创 UnityShader17：光照属性与阴影

前置：UnityShader16：点光源和聚光灯一、一些重要的光照、阴影属性一个一个来（绿色的部分暂时可以不用了解）：Type：光照类型，除了常用的3个，还有一个面光源 Color：光照颜色 Mode：光照模式：实时光照/混合/烘培光照 Intensity：光照强度 Indirect Multiplier：在计算该灯光所产生的间接光照时的强度倍乘 Shadow Type：阴影类型：无阴影/硬阴影/软阴影 Cookie：用于光照投影的纹理 Cookie Size：Cooki...

2021-01-11 00:35:23 1694

原创 UnityShader16：点光源和聚光灯

一、点光源平行光与点光源：https://blog.csdn.net/Jaihk662/article/details/106722949

2021-01-06 17:22:43 2042

原创 UnityShader15：前向渲染

这一章要注意的点比较碎也比较杂，参考自很多地方，包括也问了一些同事或朋友，从他们那得到的拼图碎片一、延迟着色和前向渲染很可惜的是没有什么前置，OpenGL 本是要写一篇延迟着色的笔记的，但是怎么看这都不属于OpenGL 基础的范畴先考虑最简单的情况：只有一个光源，这个时候当然就按照正常渲染流程就好了→ 稍微复杂点：有多个光源，但是数量比较少（夜晚有路灯的街道），很容易想到在着色中 for 循环所有光源再叠加颜色的方法，确实之前 OpenGL 的 demo 就是这样做的，又或者是多...

2021-01-04 19:12:45 587

原创 UnityShader14.1：透明效果实现（下）

接上文：UnityShader14：透明效果实现（上）四、开启深度写入的透明效果对比下面两种渲染效果：前面提到过，透明物体的渲染顺序非常重要，对于一个复杂的透明物体，若不进行网格分割，那么几乎不可能得到正确的渲染结果，就如图一但是也有一个折中的方案，那就是使用两个 Pass 来渲染模型，第一个 Pass 开启深度写入，把所有被遮挡的片元剔除掉，第二个 Pass 正常渲染，这样就可以得到图二的效果，代码在下：Shader "Jaihk662/AlphaTest1"{ ...

2020-12-29 18:23:41 353

原创 UnityShader14：透明效果实现（上）

前置：OpenGL基础31：混合一、透明度测试(Alpha Test)透明度测试的目的很直接，如果像素的 Alpha 值小于一个定值，那么这个像素就直接丢弃：Shader "Jaihk662/AlphaTest1"{ Properties { _DiffuseColor ("DiffuseColor", Color) = (1.0, 1.0, 1.0, 1.0) _SpecularColor ("SpecularColor", Color...

2020-12-28 21:08:32 375

原创 UnityShader13：渐变与遮罩

前置：UnityShader9：光照基础实例一、渐变纹理渐变纹理目的非常简单：改变漫反射颜色一般来讲，渐变纹理是一维的，你可以理解为一条带有颜色的线，线上的每一点的颜色代表者对应光照强度下物体应该显示的颜色或色调：如果使用半兰伯特光照，其光照强度范围正好被映射到了 [0, 1]，而纹理的uv坐标范围也是[0, 1]，此时采样方式正是光照强度 = uv坐标代码很简单，和前面实现镜面光照的代码几乎一模一样，就是在计算漫反射光照时多了一个纹理采样：Shader "Jaihk66...

2020-12-25 21:11:59 992

原创 UnityShader12：Unity中应用法线贴图

一、关于法线贴图和切线空间如果之前在OpenGL 或者 directX 中成功应用过法线贴图，那么在 U3D 中实现就容易多了切线空间：https://blog.csdn.net/Jaihk662/article/details/107917594 法线贴图：https://blog.csdn.net/Jaihk662/article/details/108102673里面已经做过好理解且详细的介绍了，可以只关心理论部分二、Unity中应用法线贴图因为法线存储于切线空间中...

2020-12-23 12:40:25 1604

原创 UnityShader11：纹理属性

一、需要提前了解的纹理可以理解为就是一张图片，对于一张平面图，如何“铺”在一个不规则的物体上，是第一个要考虑的问题纹理基础属性及纹理坐标：https://blog.csdn.net/Jaihk662/article/details/106062221 纹理与光照：https://blog.csdn.net/Jaihk662/article/details/106674211二、给物体铺上外皮再复杂的物体都是由一个个三角形面片拼接而成的，仅考虑其中一个三角形面片，若要将纹理“铺”在...

2020-12-21 21:19:44 502

原创 UnityShader10：CG标准函数库

一、基础数学函数abs(x)：绝对值 ceil(x)：向上取整 floor(x)：向下取整 round(x)：四舍五入 frac(x)：仅保留小数部分 sign(x)：得到 x 的符号，正数则返回1，否则返回0 step(a, x)：如果 x ≥ 1 返回1，否则返回0 fmod(x,y)：计算x%y clamp(x, a, b)：将 x 的值截取到 [a, b] 的范围内 saturate(x)：将 x 的值截取到 [0, 1] 的范围内 lerp(a, b, k)：计算...

2020-12-04 16:40:03 737

原创 UnityShader9.1：光照基础实例

前置：UnityShader9：光照基础回顾一、漫反射光照直接上代码：其中 Tags 需要设置光照模式为ForwardBase，它定义了该 Pass 在光照流水线中的角色，在不同的光照模式下 Unity 的内置光照变量属性和含义都有可能不同关于光照模式需要了解的的还有不少，不过可以暂时不用这么深究Shader "Jaihk662/NewSurfaceShader"{ Properties { _DiffuseColor ("DiffuseC...

2020-12-04 10:14:21 411

原创 UnityShader9：光照基础回顾

一、需要提前了解的基于经验的基础光照，相比于后面物理光照的学习，简单不少：光照基础：https://blog.csdn.net/Jaihk662/article/details/106624451 漫反射：https://blog.csdn.net/Jaihk662/article/details/106640285（里面也有法向量的讲解）镜面光照：https://blog.csdn.net/Jaihk662/article/details/106660744 两种基于经验的光照模型：...

2020-11-27 21:06:05 485

原创 UnityShader8：编写Shader时需要注意的细节和可能需要的意外/BUG

此文章实时更新一、FrameDebug 帧调试器Window → Frame Debugger → 打开后如下：帧调试器可以在游戏运行时冻结当前帧，以查看当前图像是怎么一步步渲染出来的开启帧调试目前已执行到的对应渲染事件，可以从 Game 视图看到其对应渲染效果当前帧所有渲染事件渲染事件非常的全面，其中 Draw 开头的就是 DrawCall，可以确定其对应的 GameObject，对应的渲染纹理也会显示在 Game 视图中一、注意事项1)：平台渲染差异：...

2020-11-27 17:58:43 848 1

原创 UnityShader7：内置包含文件UnityCG.cginc与GG/HLSL语义

一、包含文件 .cginc类似于头文件，cginc 可以理解为 GC include，用 #include 指令包括进来后，就可以使用其中的变量和帮助函数，在上一章：UnityShader6：最简单的顶点/片元着色器中，我们直接通过UnityObjectToClipPos(v) 这个方法来得到顶点在裁剪空间中的坐标，这个UnityObjectToClipPos() 方法就实现在对应的 .cginc 文件里Unity 自带一些非常基础的 .cginc 文件，例如UnityCG.cginc，...

2020-11-26 19:34:42 2131 1

原创 UnityShader6：最简单的顶点/片元着色器

一、顶点/片元着色器基本结构直接上代码：这个着色器可以得到蓝色的纯色输出，如果顶点着色器得出了错误的裁剪空间坐标，那么会出现很明显表现错误Shader "Jaihk662/NewSurfaceShader"{ Properties { } SubShader { Tags { "RenderType" = "Opaque" } LOD 200 PASS { ...

2020-11-25 15:43:40 599

原创 UnityShader5：基本内置变量

一、前置基础无论是用哪种图形接口，又或是游戏引擎，入门的数学公式和逻辑就是那一套：基础线代公式汇总：https://blog.csdn.net/Jaihk662/article/details/103811465 欧拉角：https://blog.csdn.net/Jaihk662/article/details/106519595 基本空间：https://blog.csdn.net/Jaihk662/article/details/106237306 法向量/切线空间：https:/...

2020-11-23 20:42:29 386

原创 UnityShader4：UnityShader的形式

前置：UnityShader2：Shader与材质一、Standard Surface Shader 代码解析在前置中已经了解了什么是表面着色器，下面这是Standard Surface Shader，也是创建 Shader 时的默认代码之一Shader "Custom/NewSurfaceShader"{ Properties { _Color("Color", Color) = (1,1,1,1) _MainTex("Albedo ...

2020-11-20 15:56:16 532

原创 UnityShader3：ShaderLab

一、UnityShader 的语言：ShaderLabShaderLab：专门为 UnityShader 服务的语言，在 Unity 中所有的 UnityShader 都是使用 ShaderLab 来编写的对于之前OpenGL 的学习需要考虑很多事情，包括但不限于模型和资源的加载、着色器的选择与输入、渲染状态的设置等，现在对于 Unity3D 还再多一个跨平台。这样要考虑的事情实在是太多了，而有了 UnityShader 这一抽象层后，开发者只需要使用 ShaderLab 来编写 Unity...

2020-11-19 21:16:31 542

OpenGL基础学习完整代码（完整场景带优化）.zip

OpenGL基础学习完整代码.zip

空空如也