Unity Shader - Noise 噪点应用,实现类似流水的表面效果

141 篇文章 34 订阅
74 篇文章 4 订阅

整体效果

在这里插入图片描述
水平流动
在这里插入图片描述

垂直流动
在这里插入图片描述

扰动放大+扰动速度=激流
在这里插入图片描述

Noise 纹理

详细参考:柏林噪声(Perlin Noise)(译)

下面简单说说
噪点可以用不同的平滑波函数来叠加,即可组合出其他的噪点
如下:
在这里插入图片描述
将它们叠加在一起
在这里插入图片描述

同样,噪点生成的噪点图(其实都是波的高低数据),也可以叠加,组合出另一个噪点图
在这里插入图片描述
在这里插入图片描述
上面6个噪点图,叠加在一起,如下图:
在这里插入图片描述

是不是很像云朵、烟雾一样。简直就是魔术似的,太帅了。

另外说一个叠加计算方式,unity shader代码如下:

fixed4 col = (
                tex2D(_MainTex1, i.uv) + 
                tex2D(_MainTex2, i.uv) + 
                tex2D(_MainTex3, i.uv) + 
                tex2D(_MainTex4, i.uv) + 
                tex2D(_MainTex5, i.uv) + 
                tex2D(_MainTex6, i.uv)
                ) / 6;

或是:逐噪点图的减半amp系数的,我们这个例子使用上面那种简单处理

fixed4 col = (
                tex2D(_MainTex1, i.uv) + 
                tex2D(_MainTex2, i.uv) * 0.5 + 
                tex2D(_MainTex3, i.uv) * 0.25 + 
                tex2D(_MainTex4, i.uv) * 0.125 + 
                tex2D(_MainTex5, i.uv) * 0.0625 + 
                tex2D(_MainTex6, i.uv) * 0.03125
                ) * 0.5;

然后将网站那个参考网站上的图下下来,简单矩形扣出每个图片来在unity中做实验

将它们叠加在一起,生成最终噪点图
在这里插入图片描述
但对于只存了单通道数据的柏林噪点图,喜欢用灰度来存:
所以我在shader加了这么一句,求三原色灰度值:

col.rgb = dot(col.rgb, float3(0.299,0.587,0.114));

下面是效果:
在这里插入图片描述
然后,我用另一外*.cs脚本,导出到文件,脚本如下:

using System;
using System.IO;
using UnityEngine;

public class BlitToTex : MonoBehaviour
{
    public RenderTexture Rt;
    public Material Mat;
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            if (Rt == null || Mat == null) return;
            var newTex = new Texture2D(128, 128);
            Graphics.Blit(newTex, Rt, Mat);
            Graphics.CopyTexture(Rt, 0, 0, 0, 0, 128, 128, newTex, 0, 0, 0, 0);
            newTex.Apply(false, false);
            newTex.ReadPixels(new Rect(0, 0, 128, 128), 0, 0);
            var dir = "Assets/Textures/PerlinNoiseTex";
            if (Directory.Exists(dir)) Directory.CreateDirectory(dir);
            var file = $"{dir}/{DateTime.Now.Ticks}_outTex.jpg";
            File.WriteAllBytes(file, newTex.EncodeToJPG());
            Debug.Log($"out put tex2d success:{file}");
        }
    }
}

完整Shader

// jave.lin 2019.08.12
Shader "Test/PerlinNoiseApp" {
    Properties {
        [NoScaleOffset] _MainTex ("MainTex", 2D) = "white" {}               // 主纹理
        [NoScaleOffset] _NoiseTex ("NoiseTex", 2D) = "white" {}             // 噪点图
        _NoiseScaleX ("NoiseScaleX", Range(0, 1)) = 0.1                     // 水平噪点放大系数
        _NoiseScaleY ("NoiseScaleY", Range(0, 1)) = 0.1                     // 垂直放大系数
        _NoiseSpeedX ("NoiseSpeedX", Range(0, 10)) = 1                      // 水平扰动速度
        _NoiseSpeedY ("NoiseSpeedY", Range(0, 10)) = 1                      // 垂直扰动速度
        _NoiseBrightOffset ("NoiseBrightOffset", Range(0, 0.9)) = 0.25      // 噪点图整体的数值偏移
        _SpecularGlossy ("SpecularGlossy", Range(0, 1)) = 0.16              // 水面光泽度
        _SpecularIntensity ("SpecularIntensity", Range(0, 1)) = 0.5         // 高光强度
    }
    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
			#include "Lighting.cginc"
			#include "AutoLight.cginc"
            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 normal : NORMAL;
            };
            struct v2f {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 normal : TEXCOORD1;
                float3 wPos : TEXCOORD2;
            };
            sampler2D _MainTex;
            sampler2D _NoiseTex;
            fixed _NoiseScaleX;
            fixed _NoiseScaleY;
            fixed _NoiseSpeedX;
            fixed _NoiseSpeedY;
            fixed _NoiseBrightOffset;
            fixed _SpecularGlossy;
            fixed _SpecularIntensity;
            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.normal = UnityObjectToWorldNormal(v.normal);
                o.wPos = mul(unity_ObjectToWorld, v.vertex);
                return o;
            }
            fixed4 frag (v2f i) : SV_Target {
                fixed2 ouvxy = fixed2( // 噪点图采样,用于主纹理的UV偏移的
                    tex2D(_NoiseTex, i.uv + fixed2(_Time.x * _NoiseSpeedX, 0)).r,
                    tex2D(_NoiseTex, i.uv + fixed2(0, _Time.x * _NoiseSpeedY)).r);
                ouvxy -= _NoiseBrightOffset; // 0~1 to ==> -_NoiseBrightOffset~ 1 - _NoiseBrightOffset
                ouvxy *= fixed2(_NoiseScaleX, _NoiseScaleY); // 扰动放大系数
                fixed4 col = tex2D(_MainTex, i.uv + ouvxy); // 加上扰动UV后再采样主纹理

                i.normal.xy += ouvxy; // 扰动法线

                // diffuse
                half3 L = normalize(_WorldSpaceLightPos0.xyz);
                half3 N = normalize(i.normal);
                half LdotN = dot(L, N);
                fixed3 diffuse = col.rgb * LdotN;

                // specular
                half3 specular = 0;
                half3 V = normalize(_WorldSpaceCameraPos.xyz - i.wPos);
                half3 H = normalize(L + V);
                if (LdotN > 0)
                {
                    half HdotN = max(0, dot(H, N)); // blinn-phone
                    specular = _LightColor0.rgb * pow(HdotN, _SpecularGlossy * 100) * _SpecularIntensity;
                }

                // ambient
                half3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;

                return fixed4(diffuse + specular + ambient, 1);
            }
            ENDCG
        }
    }
    Fallback "Diffuse"
}

噪点图

最后将我在那个网站里扣出来,再到Unity Shader合作,在到CSharp脚本导出的纹理分享出来:
在这里插入图片描述

好了,那么有了噪点图后,我们就可以用它来搞事情了。
那就是我们开篇的效果图了。

噪点图,在游戏中应用非常的广泛:

  • 看似随机的地形(MC:MineCraft就用了这个算法来生成地图的)
  • 除了地形高度,还有地表表面的混合纹理
  • 天空的云
  • 火焰效果
  • 水面波纹
  • 模型消融(溶解)
  • 程序纹理
    • 各种岩石:花岗岩、鹅卵石,等

还有好多,我都记不起,基本很多看似随机,但是效果又很像大自然中奇妙造艺的东西,基本都用噪点算法来模拟的。

References

  • 6
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值