实现玻璃效果

Gemfile.lock

@@ -15,7 +15,7 @@ GEM
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.2.0)
+    concurrent-ruby (1.2.2)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
@@ -119,4 +119,4 @@ DEPENDENCIES
   wdm (~> 0.1.1)
 
 BUNDLED WITH
-   2.4.3
+   2.3.22

_posts/shader_book/2023-02-10-实现一个玻璃效果的着色器.md

@@ -41,10 +41,70 @@ tags: [U3D, Shader,Cookbook,中文版]
   sampler2D _GrabTexture;
   fixed4 _Colour;
   ```
-  3. dd
-  4. dd
-  5. dd
-  6. dd
-  7. dd
+  3. 将下面的纹理信息添加到输入和输出结构体中：
+  ``` c#
+  struct vertInput 
+	{
+    float4 vertex : POSITION;
+    float4 color : COLOR;
+    float2 texcoord : TEXCOORD0;
+  };
+  struct vertOutput 
+  {
+    float4 vertex : SV_POSITION;
+    float4 color : COLOR;
+    float2 texcoord : TEXCOORD0;
+    float4 uvgrab : TEXCOORD1;
+    };
+  ```
+  4. 将UV数据从输入结构体赋值到输出结构体中：
+  ``` c#
+  vertOutput vert(vertInput input) 
+  {
+    vertOutput o;
+    o.vertex = UnityObjectToClipPos(input.vertex);
+    o.color = input.color;
+    o.texcoord = input.texcoord;
+    o.uvgrab = ComputeGrabScreenPos(o.vertex);
+    return o;
+  }
+  ```
+  5. 使用下面的片元函数：
+  ``` c#
+  half4 frag(vertOutput i) : COLOR
+  {
+    half4 mainColour = tex2D(_MainTex, i.texcoord);
+    half4 bump = tex2D(_BumpMap, i.texcoord);
+    half2 distortion = UnpackNormal(bump).rg;
+    i.uvgrab.xy += distortion * _Magnitude;
+    fixed4 col = tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(i.uvgrab));
+    return col * mainColour * _Colour;
+    }
+  ```
+  6. 因为这个材质是透明的，所以我们还需要在它的 **SubShader** 块中改变它的 **标签(tags)**
+  ``` c#
+  Tags{ "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Opaque" }
+  ```
+  7. 接下的工作就是为玻璃设置纹理和法线贴图从而替换掉抓取纹理。   
+
+*** 
+<br>
+
+- **原理介绍**   
+  该着色器的核心作用是使用抓取通道来获取已经被渲染在屏幕上的东西。我们在片元函数中实现了扭曲效果的。在这里法线贴图被解析并且用来计算抓取纹理的UV数据偏移：   
+  ``` c#
+  half4 bump = tex2D(_BumpMap, i.texcoord);
+  half2 distortion = UnpackNormal(bump).rg;
+  i.uvgrab.xy += distortion * _Magnitude;
+  ```   
+  **_Magnitude** 这个滑动条用来控制效果的强弱。   
+
+
+*** 
+<br>
+
+- **额外内容**   
+  这个效果非常的通用；它可以基于法线贴图，通过抓取屏幕来创建扭曲效果。如果想模拟一些更有趣的效果没理由不使用它。有很多游戏会在爆炸中或者一些科幻设备上使用扭曲效果。这个材质也可以应用到球体中，如果使用不同的法线贴图，它还可以很好的模拟爆炸中的冲击波。
+
 
 

package.json

@@ -22,8 +22,8 @@
     "gulp-insert": "^0.5.0",
     "gulp-rename": "^2.0.0",
     "gulp-uglify": "^3.0.2",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint": "^15.2.0",
+    "stylelint-config-standard-scss": "^7.0.1",
     "uglify-js": "^3.17.4"
   },
   "dependencies": {