【Unity3D】半球卷屏特效

RedZero9 · 发表于 2023-1-9 11:15

1 原理

凸镜贴图和渐变凸镜贴图中介绍了使用 OpenGL 实现凸镜贴图及其原理，通过顶点坐标映射到纹理坐标，并构造三角形网格，构建了真正的三维凸镜模型。本文通过 Shader 实现半球卷屏特效，通过屏幕坐标映射到纹理坐标，不需要构建凸镜模型，效率更高。
1）凸变换原理
以下凸变换的原理图及公式推导，该图是截面图，vertex 是屏幕坐标，texture 是纹理坐标。

注意：屏幕坐标原坐标原点在屏幕左上角，y 轴向下，x、y 轴的值域分别为 [0, ScreenWidth]、[0, ScreenHeight]，纹理坐标原坐标原点在纹理图片左下角，x、y 轴的值域都是 [0, 1]，这里已进行了一些预处理，将屏幕坐标和纹理坐标的坐标轴都变换到中心位置，x、y 轴的值域都变换到 [-1, 1]。
2）渐变原理
当凸镜半角 (φ/2) 较小时（近似0°），凸镜半径较大 (近似无穷大)，屏幕只需要贴到凸镜的很小一块区域，该区域近似一个平面；当凸镜半角 (φ/2) 较大时（等于90°），凸镜半径较大（等于 1/sin(φ/2)），屏幕贴满整个凸镜；当凸镜半角 (φ/2) 由 0° 渐变到 90° 时，就会看到屏幕逐渐卷曲的效果。
2 代码实现

CurlEffect.cs
using UnityEngine;

[RequireComponent(typeof(Camera))]  // 屏幕后处理特效一般都需要绑定在像机上
public class CurlEffect : MonoBehaviour {
public float curlSpeed = 0.4f; // 卷屏速度
private Material smallConvexMaterial; // 小凸变换材质
private Material largeConvexMaterial; // 大凸变换材质
private bool enableSmallConvex = false; // 小凸变换开关
private bool enableLargeConcave = false; // 大凸变换开关
private float alpha; // 卷屏凸镜渐变半角

private void Awake() {
      smallConvexMaterial = new Material(Shader.Find(&#34;Custom/Curl/SmallConvex&#34;));
      largeConvexMaterial = new Material(Shader.Find(&#34;Custom/Curl/LargeConvex&#34;));
      smallConvexMaterial.hideFlags = HideFlags.DontSave;
      largeConvexMaterial.hideFlags = HideFlags.DontSave;
}

private void Update() {
      if (Input.GetMouseButton(0)) {
         alpha = 0.01f;
         curlSpeed = Mathf.Abs(curlSpeed);
         enableSmallConvex = true;
         enableLargeConcave = false;
      }
}

private void OnRenderImage (RenderTexture source, RenderTexture destination) {
      if (enableSmallConvex) {
         smallConvexMaterial.SetFloat(&#34;_alpha&#34;, alpha);
         IncreaseAlpha();
         Graphics.Blit (source, destination, smallConvexMaterial);
      } else if (enableLargeConcave) {
         largeConvexMaterial.SetFloat(&#34;_alpha&#34;, alpha);
         IncreaseAlpha();
         Graphics.Blit (source, destination, largeConvexMaterial);
      } else {
         Graphics.Blit (source, destination);
      }
}

private void IncreaseAlpha() { // alpha自增
      alpha += Time.deltaTime * curlSpeed;
      if (alpha > Mathf.PI / 2 && curlSpeed > 0) {
         alpha = Mathf.PI / 2;
         curlSpeed = -curlSpeed;
      } else if (alpha < 0.01f && curlSpeed < 0) {
         alpha = 0.01f;
         curlSpeed = -curlSpeed;
         enableSmallConvex = !enableSmallConvex; // 大凸镜和小凸镜交替执行
         enableLargeConcave = ! enableLargeConcave;
      }
}
}
SmallConvex.shader
Shader &#34;Custom/Curl/SmallConvex&#34; // 小凸镜变换
{
Properties
{
      _MainTex (&#34;mainTex&#34;, 2D) = &#34;white&#34; {}
}

SubShader
{
      Pass
      {
         ZTest Always
         Cull Off
         ZWrite Off
         Fog { Mode off }

         CGPROGRAM

         #pragma vertex vert_img // UnityCG.cginc中定义了vert_img方法, 对vertex和texcoord进行了处理, 输出v2f_img中的pos和uv
         #pragma fragment frag
         #pragma fragmentoption ARB_precision_hint_fastest

         #include &#34;UnityCG.cginc&#34;

         sampler2D _MainTex;
         float _alpha;

         float2 beforeConvex(float2 pos)
         { // 小凸化前置变换, 将pos的窄边映射到(-1, 1)之间
            pos /= _ScreenParams.xy; // 坐标映射到(0, 1)之间
            pos = pos * 2 - 1; // 坐标映射到(-1, 1)之间
            pos.y = -pos.y; // 屏幕坐标系原点在左上角, y轴向下, 所以要取反
            pos.x *= (_ScreenParams.x / _ScreenParams.y); // 窄边映射到(-1, 1)之间, 宽边映射到(-ratio, ratio)之间(ratio为屏幕宽高比)
            return pos;
         }

         float2 convex(float2 pos)
         { // 凸化变换, 将屏幕坐标映射到纹理坐标, 窄边映射到(-1, 1)之间, 宽边大致映射到(-ratio, ratio)之间(ratio为屏幕宽高比)
            float rho = length(pos);
            float beta = rho * sin(_alpha);
            if (beta > 1)
            {
                  return float2(-10000, -1000000);
            }
            return pos * asin(beta) / _alpha / rho;
         }

         float2 afterConvex(float2 uv)
         { // 小凸化后置变换, 将uv的窄边和宽边都映射到(0, 1)之间
            uv.x = uv.x / (_ScreenParams.x / _ScreenParams.y) / 2 + 0.5; // 坐标由(-ratio, ratio)还原到(0, 1)
            uv.y = uv.y / 2 + 0.5; // 坐标由(-1, 1)还原到(0, 1)
            return uv;
         }

         fixed4 frag(v2f_img i) : SV_Target // uv坐标的计算不能在顶点着色器中进行, 因为屏后处理的顶点只有屏幕的4个角顶点
         {
            float2 pos = beforeConvex(i.pos.xy);
            float2 uv = convex(pos);
            uv = afterConvex(uv);
            if (uv.x < 0 || uv.y < 0 || uv.x > 1 || uv.y > 1)
            {
                  return float4(0, 0, 0, 0);
            }
            return tex2D(_MainTex, uv);
         }

         ENDCG
      }
}

Fallback off
}
LargeConvex.shader
Shader &#34;Custom/Curl/LargeConvex&#34; // 大凸镜变换
{
Properties
{
      _MainTex (&#34;mainTex&#34;, 2D) = &#34;white&#34; {}
}

SubShader
{
      Pass
      {
         ZTest Always
         Cull Off
         ZWrite Off
         Fog { Mode off }

         CGPROGRAM

         #pragma vertex vert_img // UnityCG.cginc中定义了vert_img方法, 对vertex和texcoord进行了处理, 输出v2f_img中的pos和uv
         #pragma fragment frag
         #pragma fragmentoption ARB_precision_hint_fastest

         #include &#34;UnityCG.cginc&#34;

         sampler2D _MainTex;
         float _alpha;

         float2 beforeConvex(float2 pos)
         { // 大凸化前置变换, 将pos的宽边映射到(-1, 1)之间
            pos /= _ScreenParams.xy; // 坐标映射到(0, 1)之间
            pos = pos * 2 - 1; // 坐标映射到(-1, 1)之间
            pos.y = -pos.y; // 屏幕坐标系原点在左上角, y轴向下, 所以要取反
            pos.y /= (_ScreenParams.x / _ScreenParams.y); // 宽边映射到(-1, 1)之间, 窄边映射到(-1/ratio, 1/ratio)之间(ratio为屏幕宽高比)
            return pos;
         }

         float2 convex(float2 pos)
         { // 凸化变换, 将屏幕坐标映射到纹理坐标, 宽边映射到(-1, 1)之间, 窄边大致映射到(-1/ratio, 1/ratio)之间(ratio为屏幕宽高比)
            float rho = length(pos);
            float beta = rho * sin(_alpha);
            if (beta > 1)
            {
                  return float2(-10000, -1000000);
            }
            return pos * asin(beta) / _alpha / rho;
         }

         float2 afterConvex(float2 uv)
         { // 大凸化后置变换, 将uv的宽边和窄边都映射到(0, 1)之间
            uv.x = uv.x / 2 + 0.5; // 坐标由(-1, 1)还原到(0, 1)
            uv.y = uv.y * (_ScreenParams.x / _ScreenParams.y) / 2 + 0.5; // 坐标由(-ratio, ratio)还原到(0, 1)
            return uv;
         }

         fixed4 frag(v2f_img i) : SV_Target // uv坐标的计算不能在顶点着色器中进行, 因为屏后处理的顶点只有屏幕的4个角顶点
         {
            float2 pos = beforeConvex(i.pos.xy);
            float2 uv = convex(pos);
            uv = afterConvex(uv);
            if (uv.x < 0 || uv.y < 0 || uv.x > 1 || uv.y > 1)
            {
                  return float4(0, 0, 0, 0);
            }
            return tex2D(_MainTex, uv);
         }

         ENDCG
      }
}

Fallback off
}
3 运行效果

4 推荐阅读

渲染管线
固定管线着色器一
固定管线着色器二
表面着色器
顶点和片段着色器
选中物体描边特效
水波特效
卷轴特效
凸镜贴图
渐变凸镜贴图

声明：本文转自【Unity3D】半球卷屏特效

		自动登录	找回密码
密码			立即注册

[笔记] 【Unity3D】半球卷屏特效

本帖子中包含更多资源