diff --git "a/_posts/shader_book/2020-09-02-\344\275\277\347\224\250\350\241\250\351\235\242\347\235\200\350\211\262\345\231\250\347\232\204\345\261\236\346\200\247.md" "b/_posts/shader_book/2020-09-02-\344\275\277\347\224\250\350\241\250\351\235\242\347\235\200\350\211\262\345\231\250\347\232\204\345\261\236\346\200\247.md" index f4c16053c76..c7f8dec9be7 100644 --- "a/_posts/shader_book/2020-09-02-\344\275\277\347\224\250\350\241\250\351\235\242\347\235\200\350\211\262\345\231\250\347\232\204\345\261\236\346\200\247.md" +++ "b/_posts/shader_book/2020-09-02-\344\275\277\347\224\250\350\241\250\351\235\242\347\235\200\350\211\262\345\231\250\347\232\204\345\261\236\346\200\247.md" @@ -91,7 +91,7 @@ tags: [U3D, Shader,Cookbook,中文版] [http://www.packtpub.com/support](http://www.packtpub.com/support)然后注册，以便通过邮件直接获取相关的代码文件。 - **注意** - **pow(arg1, arg2)**这个方法是内置的，他的功能跟数学的幂函数**power**是等价的。第一个参数是底数，第二参数是指数 。想了解更深入的了解**pow()**方法，请去看Cg语言的教程。下面这个网址提供了非常棒的资源，能让你学习更多有关着色器的知识，并且里面有Cg着色器语言的所有函数的表： + **pow(arg1, arg2)**这个方法是内建的，他的功能跟数学的幂函数**power**是等价的。第一个参数是底数，第二参数是指数 。想了解更深入的了解**pow()**方法，请去看Cg语言的教程。下面这个网址提供了非常棒的资源，能让你学习更多有关着色器的知识，并且里面有Cg着色器语言的所有函数的表： [http://http.developer.nvidia.com/CgTutorial/cg_tutorial_appendix_e.html](http://http.developer.nvidia.com/CgTutorial/cg_tutorial_appendix_e.html) 下面的屏幕截图展示了通过材质的**检查器面板(Inspector tab)**来控制材质的属性，从而控制材质的颜色和饱和度： diff --git "a/_posts/shader_book/2021-01-09-\351\200\232\350\277\207\346\224\271\345\217\230UV\345\200\274\346\235\245\347\247\273\345\212\250\350\264\264\345\233\276.md" "b/_posts/shader_book/2021-01-09-\351\200\232\350\277\207\346\224\271\345\217\230UV\345\200\274\346\235\245\347\247\273\345\212\250\350\264\264\345\233\276.md" index bb466bc56a4..5cbab8f7eda 100644 --- "a/_posts/shader_book/2021-01-09-\351\200\232\350\277\207\346\224\271\345\217\230UV\345\200\274\346\235\245\347\247\273\345\212\250\350\264\264\345\233\276.md" +++ "b/_posts/shader_book/2021-01-09-\351\200\232\350\277\207\346\224\271\345\217\230UV\345\200\274\346\235\245\347\247\273\345\212\250\350\264\264\345\233\276.md" @@ -52,7 +52,7 @@ Shader)**如何创建一个简单的纹理滚动效果。 - 3. 修改**表面函数surface function**从而修改传递给**tex2D()**函数的UV值。然后，使用内置的**_Time**变量来对UV进行循环播放的动画，这样的话当我们点击Unity中的运行按钮的时候，我们就能看到动画效果了： + 3. 修改**表面函数surface function**从而修改传递给**tex2D()**函数的UV值。然后，使用内建的**_Time**变量来对UV进行循环播放的动画，这样的话当我们点击Unity中的运行按钮的时候，我们就能看到动画效果了： ```c# void surf (Input IN, inout SurfaceOutputStandard o) diff --git "a/_posts/shader_book/2021-05-21-Unity 5.x Shaders and Effects Cookbook\344\270\255\346\226\207\347\211\210\347\277\273\350\257\221\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211.md" "b/_posts/shader_book/2021-05-21-Unity 5.x Shaders and Effects Cookbook\344\270\255\346\226\207\347\211\210\347\277\273\350\257\221\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211.md" index bd8b019d7ca..d583868da56 100644 --- "a/_posts/shader_book/2021-05-21-Unity 5.x Shaders and Effects Cookbook\344\270\255\346\226\207\347\211\210\347\277\273\350\257\221\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211.md" +++ "b/_posts/shader_book/2021-05-21-Unity 5.x Shaders and Effects Cookbook\344\270\255\346\226\207\347\211\210\347\277\273\350\257\221\357\274\210\347\254\254\344\272\214\347\211\210\357\274\211.md" @@ -1366,7 +1366,7 @@ void surf (Input IN, inout SurfaceOutput o) [http://www.packtpub.com/support](http://www.packtpub.com/support)然后注册，以便通过邮件直接获取相关的代码文件。 - **注意** - **pow(arg1, arg2)**这个方法是内置的，他的功能跟数学的幂函数**power**是等价的。第一个参数是底数，第二参数是指数 。想了解更深入的了解**pow()**方法，请去看Cg语言的教程。下面这个网址提供了非常棒的资源，能让你学习更多有关着色器的知识，并且里面有Cg着色器语言的所有函数的表： + **pow(arg1, arg2)**这个方法是内建的，他的功能跟数学的幂函数**power**是等价的。第一个参数是底数，第二参数是指数 。想了解更深入的了解**pow()**方法，请去看Cg语言的教程。下面这个网址提供了非常棒的资源，能让你学习更多有关着色器的知识，并且里面有Cg着色器语言的所有函数的表： [http://http.developer.nvidia.com/CgTutorial/cg_tutorial_appendix_e.html](http://http.developer.nvidia.com/CgTutorial/cg_tutorial_appendix_e.html) 下面的屏幕截图展示了通过材质的**检查器面板(Inspector tab)**来控制材质的属性，从而控制材质的颜色和饱和度： @@ -1853,7 +1853,7 @@ Shader)**如何创建一个简单的贴图滚动效果。 - 3. 修改**表面函数surface function**从而修改传递给**tex2D()**函数的UV值。然后，使用内置的**_Time**变量来对UV进行循环播放的动画，这样的话当我们点击Unity中的运行按钮的时候，我们就能看到动画效果了： + 3. 修改**表面函数surface function**从而修改传递给**tex2D()**函数的UV值。然后，使用内建的**_Time**变量来对UV进行循环播放的动画，这样的话当我们点击Unity中的运行按钮的时候，我们就能看到动画效果了： ```c# void surf (Input IN, inout SurfaceOutputStandard o) diff --git "a/_posts/shader_book/2022-06-26-\351\241\266\347\202\271\345\207\275\346\225\260.md" "b/_posts/shader_book/2022-06-26-\351\241\266\347\202\271\345\207\275\346\225\260.md" index 9024675c6be..8579e61b17f 100644 --- "a/_posts/shader_book/2022-06-26-\351\241\266\347\202\271\345\207\275\346\225\260.md" +++ "b/_posts/shader_book/2022-06-26-\351\241\266\347\202\271\345\207\275\346\225\260.md" @@ -80,7 +80,7 @@ tags: [U3D, Shader,Cookbook,中文版] o.vertColor = v.color; } ``` - 6.最后，我们可以使用来自 **输入结构体（Input struct）**的顶点颜色数据，并且通过内置 **SurfaceOutput struct** 把数据赋值给 **o.Albedo** 参数： + 6.最后，我们可以使用来自 **输入结构体（Input struct）**的顶点颜色数据，并且通过内建 **SurfaceOutput struct** 把数据赋值给 **o.Albedo** 参数： ``` c# void surf (Input IN, inout SurfaceOutput o) { diff --git "a/_posts/shader_book/2023-02-26-\345\234\2502D\346\270\270\346\210\217\344\270\255\345\256\236\347\216\260\346\260\264\346\225\210\346\236\234\347\232\204\347\235\200\350\211\262\345\231\250.md" "b/_posts/shader_book/2023-02-26-\345\234\2502D\346\270\270\346\210\217\344\270\255\345\256\236\347\216\260\346\260\264\346\225\210\346\236\234\347\232\204\347\235\200\350\211\262\345\231\250.md" index 8d1d6e4362d..15d57d93038 100644 --- "a/_posts/shader_book/2023-02-26-\345\234\2502D\346\270\270\346\210\217\344\270\255\345\256\236\347\216\260\346\260\264\346\225\210\346\236\234\347\232\204\347\235\200\350\211\262\345\231\250.md" +++ "b/_posts/shader_book/2023-02-26-\345\234\2502D\346\270\270\346\210\217\344\270\255\345\256\236\347\216\260\346\260\264\346\225\210\346\236\234\347\232\204\347\235\200\350\211\262\345\231\250.md" @@ -157,7 +157,7 @@ tags: [U3D, Shader,Cookbook,中文版]
- **原理介绍** - 这个着色器跟 ***实现一个玻璃效果的着色器*** 知识点中介绍的着色器很像。主要的区别就是这个着色器它时一个有动画的材质；它的扰动效果不是从法线贴图中生成的，而是通过当前的时间来计算出的一个持续的动画。用来扰动抓取纹理的UV数据的代码似乎有点复杂；让我们来理解它的效果时如何生成的。思路是用一个正弦函数来让水晃动。这个效果需要随着时间变化。为了获得这个效果，着色器产生的扭曲效果依赖于当前的时间，而这个时间可以通过内置的 **_Time** 变量获得。变量 **_Period** 决定了正弦函数的周期，意味着水波出现的有多快： + 这个着色器跟 ***实现一个玻璃效果的着色器*** 知识点中介绍的着色器很像。主要的区别就是这个着色器它时一个有动画的材质；它的扰动效果不是从法线贴图中生成的，而是通过当前的时间来计算出的一个持续的动画。用来扰动抓取纹理的UV数据的代码似乎有点复杂；让我们来理解它的效果时如何生成的。思路是用一个正弦函数来让水晃动。这个效果需要随着时间变化。为了获得这个效果，着色器产生的扭曲效果依赖于当前的时间，而这个时间可以通过内建的 **_Time** 变量获得。变量 **_Period** 决定了正弦函数的周期，意味着水波出现的有多快：
`float2 distortion = float2(tex2D(_NoiseTex, o.worldPos.xy / _Scale + float2(sinT, 0) ).r - 0.5,tex2D(_NoiseTex, o.worldPos.xy / _Scale + float2(0, sinT) ).r - 0.5);`
diff --git "a/_posts/shader_book/2023-02-26-\347\247\273\345\212\250\350\256\276\345\244\207\347\235\200\350\211\262\345\231\250\351\200\202\351\205\215.md" "b/_posts/shader_book/2023-02-26-\347\247\273\345\212\250\350\256\276\345\244\207\347\235\200\350\211\262\345\231\250\351\200\202\351\205\215.md" index 56eb7672659..a95d3c011b0 100644 --- "a/_posts/shader_book/2023-02-26-\347\247\273\345\212\250\350\256\276\345\244\207\347\235\200\350\211\262\345\231\250\351\200\202\351\205\215.md" +++ "b/_posts/shader_book/2023-02-26-\347\247\273\345\212\250\350\256\276\345\244\207\347\235\200\350\211\262\345\231\250\351\200\202\351\205\215.md" @@ -4,7 +4,7 @@ tags: [U3D, Shader,Cookbook,中文版] --- ## 第七章 移动设备着色器适配 -在接下来的两章，我们将着手于让我们写的着色器对不同的平台都有较好的性能表现。我们不会讨论任何一个特殊的平台，我们将会分解着色器内的元素，这样的话我们就可以对它们进行调整，从而让它们对于移动平台有更好的优化并且通常来说对其他任何平台来说也更高效。这些技术涵盖了从 **了解Unity提供的一些可以减少着色器内存溢出方面的内置变量** 到 **学习可以让我们的着色器代码更加高效的方法**。这一章将会包含下面的这些知识点： +在接下来的两章，我们将着手于让我们写的着色器对不同的平台都有较好的性能表现。我们不会讨论任何一个特殊的平台，我们将会分解着色器内的元素，这样的话我们就可以对它们进行调整，从而让它们对于移动平台有更好的优化并且通常来说对其他任何平台来说也更高效。这些技术涵盖了从 **了解Unity提供的一些可以减少着色器内存溢出方面的内建变量** 到 **学习可以让我们的着色器代码更加高效的方法**。这一章将会包含下面的这些知识点： - 什么是低成本着色器 - 着色器的性能分析 - 针对移动设备修改着色器 diff --git "a/_posts/shader_book/2023-04-02-\351\200\232\350\277\207Unity \346\270\262\346\237\223\347\272\271\347\220\206\345\256\236\347\216\260\345\261\217\345\271\225\346\225\210\346\236\234.md" "b/_posts/shader_book/2023-04-02-\351\200\232\350\277\207Unity\346\270\262\346\237\223\347\272\271\347\220\206\345\256\236\347\216\260\345\261\217\345\271\225\346\225\210\346\236\234.md" similarity index 65% rename from "_posts/shader_book/2023-04-02-\351\200\232\350\277\207Unity \346\270\262\346\237\223\347\272\271\347\220\206\345\256\236\347\216\260\345\261\217\345\271\225\346\225\210\346\236\234.md" rename to "_posts/shader_book/2023-04-02-\351\200\232\350\277\207Unity\346\270\262\346\237\223\347\272\271\347\220\206\345\256\236\347\216\260\345\261\217\345\271\225\346\225\210\346\236\234.md" index 0422d8cb9f2..802018d43f2 100644 --- "a/_posts/shader_book/2023-04-02-\351\200\232\350\277\207Unity \346\270\262\346\237\223\347\272\271\347\220\206\345\256\236\347\216\260\345\261\217\345\271\225\346\225\210\346\236\234.md" +++ "b/_posts/shader_book/2023-04-02-\351\200\232\350\277\207Unity\346\270\262\346\237\223\347\272\271\347\220\206\345\256\236\347\216\260\345\261\217\345\271\225\346\225\210\346\236\234.md" @@ -90,7 +90,7 @@ tags: [U3D, Shader,Cookbook,中文版] } ``` 事实上 `SystemInfo.supportsImageEffects` 在较新的Unity版本中，是一直返回 **true** 的，这个属性已经被废弃掉了【译者述】 - - 5.为了能够从Unity的渲染器中抓取 **渲染图像（Rendered Image）**，我们需要利用下面这个Unity内置的 **OnRenderImage()** 方法。请输入下面的代码以便于我们能访问当前的 **渲染纹理（Render Texture）**： + - 5.为了能够从Unity的渲染器中抓取 **渲染图像（Rendered Image）**，我们需要利用下面这个Unity内建的 **OnRenderImage()** 方法。请输入下面的代码以便于我们能访问当前的 **渲染纹理（Render Texture）**： ```c# private void OnRenderImage(RenderTexture src, RenderTexture dest) { @@ -131,7 +131,7 @@ tags: [U3D, Shader,Cookbook,中文版] _LuminosityAmount ("GrayScale Amount", Range(0.0, 1)) = 1.0 } ``` - - 9.现在我们的着色器将使用纯CG着色器代码编写，而不是使用Unity内置的 **表面着色器（Surface Shader）** 代码。因为这样我们的屏幕效果可以得到更好的优化，因为这里我们仅仅是需要处理 **渲染纹理（Render Texture）** 的像素而已。所以我们将在着色器中创建一个新的 **通道块（Pass block）** 并且添加一些我们之前没有看过的 **#pragma** 声明： + - 9.现在我们的着色器将使用纯CG着色器代码编写，而不是使用Unity内建的 **表面着色器（Surface Shader）** 代码。因为这样我们的屏幕效果可以得到更好的优化，因为这里我们仅仅是需要处理 **渲染纹理（Render Texture）** 的像素而已。所以我们将在着色器中创建一个新的 **通道块（Pass block）** 并且添加一些我们之前没有看过的 **#pragma** 声明： ```c# Pass { @@ -196,4 +196,97 @@ tags: [U3D, Shader,Cookbook,中文版] 当完成我们的着色器之后，返回到Unity编辑器让它编译着色器并且看看有没有遇到任何的错误。如果没有，就将这个新的着色器拖拽并且赋值给 **TestRenderImage.cs** 脚本，并且修改脚本上面的灰度变量的值。你应该可以在游戏窗口中看到游戏从有颜色变为灰色。下面的图片演示了这个屏幕效果： ![diagram](https://linkliu.github.io/game-tech-post/assets/img/shader_book/diagram86.png){: .shadow width = "90%" }
- 当完成了这些之后，我们就有了一个非常方便的途径去测试新的屏幕效果着色器，这样就不用反复的去编写 **屏幕效果系统（Screen Effect system）** 的代码了。接下来让我们更深入的去了解一下在 **渲染纹理（Render Texture）** 中都发生了什么，并且在整个过程中是如何处理它的。 \ No newline at end of file + 当完成了这些之后，我们就有了一个非常方便的途径去测试新的屏幕效果着色器，这样就不用反复的去编写 **屏幕效果系统（Screen Effect system）** 的代码了。接下来让我们更深入的去了解一下在 **渲染纹理（Render Texture）** 中都发生了什么，并且在整个过程中是如何处理它的。 + + +*** +
+ +- **原理介绍** + 为了完成我们的屏幕效果并且在Unity中能运行起来，我们需要创建一个脚本和一个着色器。这个脚本在Unity的编辑器上会实时刷新，它也负责从从主摄像机中捕获 **渲染纹理（Render Texture）** 并且把它传到着色器中。一旦这个渲染纹理到达着色器，我们就可以使用这个着色器进行逐像素操作。 +
+ 在脚本的开始运行的时候，我们进行了一些检测，这样是为了确保我们当前选择build的平台是否支持屏幕效果，是否支持我们的着色器。它们是当前平台是否支持屏幕效果和是否支持我们使用的着色器的实例。所以检查一下我们在 **Start()** 方法中所做的事情，确保如果当前平台不支持屏幕效果的时候不会有任何的报错。 +
+ 当我们的游戏脚本通过了检测之后，我们就通过调用Unity内建的 **OnRenderImage()** 方法来初始化屏幕效果系统。这个方法负责抓取渲染纹理，并且通过调用 **Graphics.Blit()** 方法将它传给着色器，并且将处理好的图像返回给Unity的渲染器。你可以通过下面的两个链接找到这两个方法更详细的信息： + - **OnRenderImage：** [https://docs.unity3d.com/ScriptReference/MonoBehaviour.OnRenderImage.html](https://docs.unity3d.com/ScriptReference/MonoBehaviour.OnRenderImage.html) + - **Graphics.Blit:** [https://docs.unity3d.com/ScriptReference/Graphics.Blit.html](https://docs.unity3d.com/ScriptReference/Graphics.Blit.html) + +
+ 一旦当前的渲染纹理到达着色器后，着色器就通过 **frag()** 函数处理获取到的纹理，并且返回每一个像素最终颜色。 +
+ 可以看到这很强大，对于游戏的最终渲染图像，它能给我们类似于Photoshop这种工具一样控制。这些屏幕效果就像Photoshop中的层级概念一样在摄像机中按次序的工作。当你把这些屏幕效果依次前后叠好，它们就会按照排列顺序处理。这些仅仅是屏幕效果工作过程的一个大致步骤，但也是屏幕效果系统如何工作的核心。 + + +*** +
+ +- **额外内容** + 现在我们完成了一个简单的屏幕效果系统并且能够运行，让我们来了解一下我们能从Unity的渲染器中获得的一些其他的有用的信息： + ![diagram](https://linkliu.github.io/game-tech-post/assets/img/shader_book/diagram87.png){: .shadow width = "90%" } + 我们可以通过打开Unity内建的深度模式来让当前游戏中的所有物体都有深度效果。一旦深度效果打开，我们就可以为很多不同的效果使用深度信息。让我们来了解一下这是怎么实现的： + - 1.创建一个名为 **SceneDepth_Effect** 的着色器。然后双击打开编辑。 + - 2.我们将会创建两个属性，主纹理属性和深度控制属性。深度控制属性用来控制场景深度的程度。在你的着色器中输入下面的代码： + ```c# + Properties + { + _MainTex ("Albedo (RGB)", 2D) = "white" {} + _DepthPower ("Depth Power", Range(1, 5)) = 1 + } + ``` + - 3.接下来我们要在 **CGPROGRAM** 块中添加相应的变量。我们将添加一个叫 **_CameraDepthTexture** 的额外变量。这是Unity通过UnityCG **cginclude** 文件提供给我们的一个内建的变量。它提供了来自摄像机的深度信息： + ```c# + Pass + { + CGPROGRAM + #pragma vertex vert_img + #pragma fragment frag + #pragma fragmentoption ARB_precision_hint_fastest + #include "UnityCG.cginc" + + uniform sampler2D _MainTex; + fixed _DepthPower; + sampler2D _CameraDepthTexture; + ``` + - 4.我们将使用Unity提供的几个内建的函数来完成我们的 **深度着色器（depth shader）**，一个是 **UNITY_SAMPLE_DEPTH()**，另一个是 **linear01Depth()**。第一个函数从变量 **_CameraDepthTexture** 中获得深度信息并且为每一个像素生成一个单精度浮点值。**Linear01Depth()** 函数确保这个单精度浮点值能控制在 [**0** - **1**]范围内，因为这个值要作为指数，因为在场景内[**0** - **1**]之间的值能确保它的位置在摄像机内【翻译不太准确，有知道的请留言】： + ```c# + fixed4 frag(v2f_img i) : COLOR + { + float d = UNITY_SAMPLE_DEPTH(tex2D(_CameraDepthTexture, i.uv.xy)); + d = pow(Linear01Depth(d), _DepthPower); + return d; + } + ``` + - 5.完成我们的着色器之后，让我们把注意力转移到我们的屏幕效果脚本上来。我们需要给脚本添加一个 **depthPower** 变量，这样我们就可以让用户在编辑器上去修改这个值： + ```c# + #region Variables + public Shader curShader; + public Material curMaterial; + public float depthPower = 1.0f; + #endregion + ``` + - 6.我们的 **OnRenderImage()** 方法需要更新一下好让我们能够传递正确的值给着色器： + ```c# + private void OnRenderImage(RenderTexture src, RenderTexture dest) + { + if (curShader != null) + { + material.SetFloat("_DepthPower", depthPower); + Graphics.Blit(src, dest, material); + } + else + { + Graphics.Blit(src, dest); + } + } + ``` + - 7.要完成我们的屏幕深度效果，我们需要告诉Unity让它在当前的摄像机上打开深度渲染。我们可以通过设置摄像机的 **depthTextureMode** 属性来达到目的： + ```c# + private void Update() + { + Camera.main.depthTextureMode = DepthTextureMode.Depth; + depthPower = Mathf.Clamp(depthPower, 0, 5); + } + ``` +
+ 当代码写好后，保存你的脚本和着色器然后返回到Unity编辑器让它们完成编译。如果没有遇到什么错误，你将会看到如下图类似的结果： + ![diagram](https://linkliu.github.io/game-tech-post/assets/img/shader_book/diagram88.png){: .shadow width = "90%" } \ No newline at end of file diff --git a/assets/img/shader_book/diagra87.png b/assets/img/shader_book/diagra87.png new file mode 100644 index 00000000000..92f3e509878 Binary files /dev/null and b/assets/img/shader_book/diagra87.png differ diff --git a/assets/img/shader_book/diagram87.png b/assets/img/shader_book/diagram87.png new file mode 100644 index 00000000000..92f3e509878 Binary files /dev/null and b/assets/img/shader_book/diagram87.png differ diff --git a/assets/img/shader_book/diagram88.png b/assets/img/shader_book/diagram88.png new file mode 100644 index 00000000000..b9d02790a1f Binary files /dev/null and b/assets/img/shader_book/diagram88.png differ