Shader实现城市建筑整体流光效果

最新推荐文章于 2022-07-29 17:40:32 发布

小郭起床写博客

最新推荐文章于 2022-07-29 17:40:32 发布

阅读量1.1k

点赞数 1

分类专栏： Unity3DShader 文章标签： shader 流光 flow

本文链接：https://blog.youkuaiyun.com/bianchengxiaosheng/article/details/102524200

版权

Unity3DShader 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了一种在城市建筑模型上实现流光效果的方法，通过Pixshader计算像素点的世界坐标，利用比例值与流光位置差映射颜色，展示了Shader代码及动图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

城市建筑整体流光效果

在做可视化城市项目的时候，要实现城市整体流光效果，如下图参考：

在这里插入图片描述
实现功能参考图:

在这里插入图片描述

实现原理

Pixshader中计算每个像素点在世界坐标系中的位置
像素点的世界坐标位置与地图范围的比例值
像素点的世界坐标位置与地图范围的比例值与流光所在位置的比例值做减法，算出比值差值范围
通过比值差值范围映射出流光宽度内的颜色值

材质实现

Shader "Custom/WorldFlow" {
    Properties {
        _FlowValue("value",Range(0,1)) = 1
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200
        
        Pass{
            CGPROGRAM

            #include "UnityCG.cginc"
            #pragma vertex vert
            #pragma fragment frag


            struct v2f {
                float4 pos: SV_POSITION;
                float4 worldpos : TEXCOORD0;
            };

            v2f vert( appdata_img v ) 
            {
                v2f o;
                o.pos = UnityObjectToClipPos( v.vertex ) ;
                o.worldpos = mul(unity_ObjectToWorld, v.vertex);
    ![result](D:\UnityPro\SamrtCity\DOC\城市建筑整体流光效果\result.gif)            // o.wo![result](D:\UnityPro\SamrtCity\DOC\城市建筑整体流光效果\result.gif)rldpos.w = o.pos.z / o.pos.w;
                return o;
            }
            fixed _FlowValue;
            float4 frag( v2f o ) : COLOR
            {
                fixed currentValue = o.worldpos.x / 500;//地形的长度500
                fixed absValue = abs(currentValue - _FlowValue)/0.05;//0.05为流光的宽度,以500米的地形则为500 * 0.05 = 25宽度（对应在世界坐标系下），左右对半为50宽度
                fixed range =1 - saturate(absValue);//5米只有有的闪亮值

                return fixed4(1,1,1, 1.0) * range; // o.worldpos.xyz/255 是为了颜色输出。 
            }

            ENDCG
        }
    } 
    FallBack "Diffuse"
}

动图展示

在这里插入图片描述