1

Topic: Load and overlay images over tiles with zoom scale and color fade

Hi Alex,

I am not sure if there is an example or solution for this requirements.

1. We need to load multiple images and overlay those images over tiles (1 degree long and lat).
2. Those need to also zoom in and out accordingly when we zoom the map in and out.
3. And finally we need be able to change color and fade the alpha value as well.

Is all this possible?

Thanks again!

Re: Load and overlay images over tiles with zoom scale and color fade

Hi.

Examples:
https://forum.infinity-code.com/viewtop … 9223#p9223
https://forum.infinity-code.com/viewtopic.php?id=2142

The second example that uses shaders is actually for a single texture, but this can be modified for multiple textures.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

3

Re: Load and overlay images over tiles with zoom scale and color fade

Thanks Alex.

With those examples I am not able to change the colors at the moment, but the alpha update works.

I have tried with TilesetWithOverlay.shader and TilesetWithOverlay2.shader:

     tilesetOverlay.material.SetColor("_Color", color);
     tilesetOverlay.material.SetColor("_OverlayColor", color);

Any suggestions?

Re: Load and overlay images over tiles with zoom scale and color fade

You need to modify the shader to add color support. Something like:

Shader "Infinity Code/Online Maps/Tileset With Overlay" 
{
    Properties 
    {
        _Color("Main Color", Color) = (1,1,1,1)
        _MainTex("Base (RGB) Trans (A)", 2D) = "white" {}
        _OverlayBackTex("Overlay Back Texture", 2D) = "black" {}
        _OverlayBackAlpha("Overlay Back Alpha", Range(0, 1)) = 1
        _TrafficTex("Traffic Texture", 2D) = "black" {}
        _OverlayFrontTex("Overlay Front Texture", 2D) = "black" {}
        _OverlayFrontAlpha("Overlay Front Alpha", Range(0, 1)) = 1
        
        _OverlayTex("Overlay Texture", 2D) = "black" {}
        _OverlayColor("Overlay Color", Color) = (1,1,1,1)
        _OverlayAlpha("Overlay Alpha", Range(0, 1)) = 1
        _OverlayTL("Overlay Top Left", Vector) = (0, 0, 0, 0)
        _OverlayBR("Overlay Bottom Right", Vector) = (1, 1, 0, 0)
    }

    SubShader 
    {
        Tags {"Queue"="AlphaTest-300" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert alphatest:_Cutoff 

        sampler2D _MainTex;
        sampler2D _OverlayBackTex;
        half _OverlayBackAlpha;
        sampler2D _TrafficTex;
        sampler2D _OverlayFrontTex;
        half _OverlayFrontAlpha;
        fixed4 _Color;

        sampler2D _OverlayTex;
        fixed4 _OverlayColor;
        half _OverlayAlpha;
        float4 _OverlayTL;
        float4 _OverlayBR;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_OverlayBackTex;
            float2 uv_TrafficTex;
            float2 uv_OverlayFrontTex;
            float3 worldPos;
        };

        void surf(Input IN, inout SurfaceOutput o)
        {
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex);

            fixed4 t = tex2D(_OverlayBackTex, IN.uv_OverlayBackTex);
            fixed3 ct = lerp(c.rgb, t.rgb, t.a * _OverlayBackAlpha);

            t = tex2D(_TrafficTex, IN.uv_TrafficTex);
            ct = lerp(ct, t.rgb, t.a);

            t = tex2D(_OverlayFrontTex, IN.uv_OverlayFrontTex);
            ct = lerp(ct, t.rgb, t.a * _OverlayFrontAlpha);

            ct = ct * _Color;
            
            o.Albedo = ct;
            o.Alpha = c.a * _Color.a;

            float3 wp = IN.worldPos;
            
            float uvx = (wp.x - _OverlayTL.x) / (_OverlayBR.x - _OverlayTL.x);
            float uvy = (wp.z - _OverlayBR.z) / (_OverlayTL.z - _OverlayBR.z);

            if (uvx >= 0 && uvx <= 1 && uvy >= 0 && uvy <= 1)
            {
                t = tex2D(_OverlayTex, float2(uvx, uvy));
                fixed3 ct2 = lerp(t.rgb, _OverlayColor.rgb, _OverlayColor.a);
                o.Albedo = lerp(ct, ct2, t.a * _OverlayAlpha);
            }
        }
        ENDCG
    }

    Fallback "Transparent/Cutout/Diffuse"
}

P.S. I haven't tested this change in the shader, but it's very likely to work.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

5 (edited by A1 2024-12-27 12:46:54)

Re: Load and overlay images over tiles with zoom scale and color fade

Hi Alex,

I was just wondering what you meant with "The second example that uses shaders is actually for a single texture, but this can be modified for multiple textures."

A. To directly modifiy the shader for multiple textures?
or
B. Modify the script to user multiple textures with the shader?

And is there an example for that?

Many thanks!

Re: Load and overlay images over tiles with zoom scale and color fade

You need to modify both the shader and the script.
In the shader you need to copy-paste the property block from _OverlayTex and below, with new names.
Add the use of the new properties to the surf method.
Then modify the script to use the new properties.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

7 (edited by A1 2024-12-29 20:35:22)

Re: Load and overlay images over tiles with zoom scale and color fade

Thanks Alex.

You mean like the TilesetWithOverlay7.shader example for 7 property block from _OverlayTex?
See Thread: https://forum.infinity-code.com/viewtopic.php?id=2185

In my case I have an unknown amount of textures which I need to placed as an overlay over those tiles (Lon, Lat) as it already works with this examples you provided?

I hope this makes it clearer. Thanks again for all your help.

Re: Load and overlay images over tiles with zoom scale and color fade

If you have an amount number of textures, you cannot use the shader way.
In that case you need to use this way:
https://forum.infinity-code.com/viewtop … 6419#p6419

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.