《三弦》技术分享—波纹效果及其实现

06月

609 0 0

文/侑虎科技邓佳迪
作者个人主页：https://zhuanlan.zhihu.com/p/34806560，同时，作者也是U Sparkle活动参与者哦，UWA欢迎更多开发朋友加入U Sparkle开发者计划，这个舞台有你更精彩！

这篇文章主要和大家聊一聊带波浪的地面的实现，以及场景特效的实现方法。如下图所示，地板随时间以波浪状变化，角色在地板上走的时候会随着它的波浪高低起伏。

波浪函数的实现，这里是函数实现，用的是两个方向的波进行叠加，波纹随时间变化。即构造一个全局函数，因为c#代码和Shader代码里都要使用，所以这是一个以World-Space的坐标x,z，以及游戏时间Time.time为变量的，以波浪高度y为结果的函数。使用的波纹函数为三角函数：

两路波形线性叠加，具体实现如下：

[SerializeField] float height1 = 1f;
[SerializeField] float frequency1 = 1f;
[SerializeField] float wavelength1 = 1f;
[SerializeField] Vector3 wave1Direction;
[SerializeField] float height2 = 1f;
[SerializeField] float frequency2 = 1f;
[SerializeField] float wavelength2 = 1f;
[SerializeField] Vector3 wave2Direction;
[SerializeField][Range(0,10f)] float overallHeight = 1f;
[SerializeField][Range(0,10f)] float overallFrequency = 1f;
[SerializeField][Range(0,10f)] float overallWaveLength = 1f;
[SerializeField] float offset;
public float GetHeight( float x , float z )
{
float x1 = x * wave1Direction.normalized.x + z * wave1Direction.normalized.z;
float y1 = Mathf.Sin (x1 / (wavelength1 * overallWaveLength) + Time.time * frequency1 * overallFrequency) * height1 * overallHeight;
float x2 = x * wave2Direction.normalized.x + z * wave2Direction.normalized.z;
float y2 = Mathf.Sin (x2 / (wavelength2 * overallWaveLength) + Time.time * frequency2 * overallFrequency) * height2 * overallHeight;
return y1 + y2 + offset;
}

至此，视觉部分已经完成。

这里把错误示范列出来，利用Mesh实现波浪效果的脚本：

public Mesh m_mesh;
- void Update ()
  - {
    - {
      - List<Vector3> verticles = new List<Vector3> (m_mesh.vertices);
        
        for (int i = 0; i < verticles.Count; ++i) {
        var vect = verticles [i];
        vect.y = GetWaveHeight( vecticles[i].x , verticles[i].z );
        verticles [i] = vect;
        }
        
        m_mesh.SetVertices (verticles);
        m_mesh.RecalculateBounds ();
        }
        }

物体的黑色部分被加强，相当于一个反向的Bloom。

选择Standard Asset里的Optimized Bloom作为基础，进行修改。源代码在Asset Store上可以免费下载：

https://assetstore.unity.com/pac ... image-effects-83913

首先分析Bloom的代码，查看BloomOptimized和在MobileBloom.Shader里，可以看到Bloom的流程是：

Downsample（提取颜色高亮的部分）->Blur（进行横竖方向的模糊）->Bloom(把高光颜色和原画面进行叠加)

根据这个流程，如果我们需要把Bloom效果反向，在Bloom部分把颜色进行剔除，同时需要在DownSample部分进行修改，进行曲线上的调整。

具体的做法如下：

fixed4 fragDownsample ( v2f_tap i ) : SV_Target
- {
  - fixed4 color = tex2D (_MainTex, i.uv20);
    - color += tex2D (_MainTex, i.uv21);
      - color += tex2D (_MainTex, i.uv22);
        color += tex2D (_MainTex, i.uv23);
        //return max(color/4 - THRESHHOLD, 0) * ONE_MINUS_THRESHHOLD_TIMES_INTENSITY;
        // this curve is used for no reason, I just feel it looks good
        return ( color / 4 ) * THRESHHOLD + 1 - THRESHHOLD;
        }
        
        fixed4 fragBloom ( v2f_simple i ) : SV_Target
        {
        #if UNITY_UV_STARTS_AT_TOP
        fixed4 color = tex2D(_MainTex, i.uv2);
        // return color + tex2D(_Bloom, i.uv);
        // combine the color by mutiply
        return color * max( 1 - ( 1 - tex2D(_Bloom, i.uv)) * INTENSITY , 0 );
        #else
        fixed4 color = tex2D(_MainTex, i.uv);
        // return color + tex2D(_Bloom, i.uv);
        return color * max( 1 - ( 1 - tex2D(_Bloom, i.uv)) * INTENSITY , 0 );
        #endif
        }

复制代码
最后的成果展示：

文末，再次感谢邓佳迪的分享，如果您有任何独到的见解或者发现也欢迎联系我们，一起探讨（QQ群：465082844）。也欢迎大家来积极参与U Sparkle开发者计划，简称US，代表你和我，代表UWA和开发者在一起！
关于UWA：

由侑虎科技开发的游戏/VR应用性能优化平台，目前提供 1）性能诊断与优化 2）资源检测与分析 3）UWA GOT 三大工具，帮助开发者在短时间内大幅度提升性能表现；同时其搭建的知识分享的博客和答疑解惑的互动平台使广大开发者收益。

标签：魔兽开发经验爬坑游戏开发者开发技术游戏开发论坛

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！