1 (edited by lefantan 2020-06-18 19:04:57)

Topic: How to create texture to used as overlay

Hi, I've tried following the example here: http://infinity-code.com/atlas/online-m … ample.html but couldn't get it to work as there are a couple of things in which I'm confused about.

I would like to overlay many different boundaries (example attached), however I'm not sure how I should approach this. Should I create one large huge overlay texture, if so what should be the width/height of the texture?

Thank you so much smile

Post's attachments

Attachment icon Capture.PNG 78.22 kb, file has never been downloaded. 

Re: How to create texture to used as overlay

Hello.

This example assumes that you are using a global overlay (the whole world).

You have three ways:
1. Combine your overlays and use with this example.
2. Combine your overlays, split it into tiles (for example, using MapTiler) and use example:
http://infinity-code.com/atlas/online-m … ample.html
3. I can make for you an example of how to use overlay on an area with boundaries. But it will take some time.

Kind Regards,
Infinity Code Team.

Do not know the best way to thank the developer? Rate the asset in Asset Store!

Re: How to create texture to used as overlay

I see, for global overlays, what are the dimensions used for the textures to ensure an accurate overlay?

If you have an example for making an overlay of an area that would be great! Thank you.

Re: How to create texture to used as overlay

I've also tried using maptiler desktop version 10, I imported the geojson file and tried to render but couldn't get it to export as png. Am i missing something here?

Re: How to create texture to used as overlay

You mean resolution, right?!
The bigger, the better.

At the beginning of next week (most likely on Monday) I will send you an example.

I am not a MapTiler specialist, and I don’t know what the problem is.
You better ask this question to MapTiler support.

Kind Regards,
Infinity Code Team.

Do not know the best way to thank the developer? Rate the asset in Asset Store!

Re: How to create texture to used as overlay

That would be awesome, I would love to understand better how this works

Re: How to create texture to used as overlay

Something like that:

using System;
using UnityEngine;

public class TilesetOverlayExample2 : MonoBehaviour
{
    // Overlay texture in mercator projection
    public Texture texture;

    /// <summary>
    /// Border coordinates of the overlay
    /// </summary>
    public double leftLongitude;
    public double topLatitude;
    public double rightLongitude;
    public double bottomLatitude;

    // Overlay transparency
    [Range(0, 1)]
    public float alpha = 1;

    private Mesh overlayMesh;
    private Material material;

    private void Start()
    {
        // Create overlay container
        GameObject overlayContainer = new GameObject("OverlayContainer");
        overlayContainer.transform.parent = transform;

        // Init overlay material
        MeshRenderer meshRenderer = overlayContainer.AddComponent<MeshRenderer>();
        MeshFilter meshFilter = overlayContainer.AddComponent<MeshFilter>();
        material = new Material(Shader.Find("Transparent/Diffuse"));
        material.mainTexture = texture;
        material.renderQueue += 1000;
        meshRenderer.sharedMaterial = material;

        overlayMesh = meshFilter.sharedMesh = new Mesh();
        overlayMesh.name = "Overlay Mesh";
        overlayMesh.MarkDynamic();
        overlayMesh.vertices = new Vector3[4];

        // Subscribe to events
        OnlineMapsTileSetControl.instance.OnMeshUpdated += UpdateMesh;

        // Init mesh
        UpdateMesh();
    }

    private void UpdateMesh()
    {
        overlayMesh.Clear();
        OnlineMapsTileSetControl control = OnlineMapsTileSetControl.instance;

        Vector3 p1 = control.GetWorldPosition(leftLongitude, topLatitude);
        Vector3 p2 = control.GetWorldPosition(rightLongitude, bottomLatitude);

        Vector2 size = control.sizeInScene;
        size.x *= -1;

        if (p1.x > 0 && p2.x > 0) return;
        if (p1.x < size.x && p2.x < size.x) return;
        if (p1.z < 0 && p2.z < 0) return;
        if (p1.z > size.y && p2.z > size.y) return;

        Vector2 uv0 = new Vector2(0, 1);
        Vector2 uv1 = new Vector2(1, 0);

        Vector3 v1 = p1;
        Vector3 v2 = p2;

        if (p1.x > 0)
        {
            float m = p1.x / (p1.x - p2.x);
            uv0.x = m;
            v1.x = 0;
        }

        if (p1.z < 0)
        {
            float m = p1.z / (p1.z - p2.z);
            uv0.y = 1 - m;
            v1.z = 0;
        }

        if (p2.x < size.x)
        {
            float m = (p1.x - size.x) / (p1.x - p2.x);
            uv1.x = m;
            v2.x = size.x;
        }

        if (p2.z > size.y)
        {
            float m = (size.y - p2.z) / (p1.z - p2.z);
            uv1.y = m;
            v2.z = size.y;
        }

        overlayMesh.vertices = new[]
        {
            new Vector3(v1.x, 0.1f, v1.z),
            new Vector3(v2.x, 0.1f, v1.z),
            new Vector3(v2.x, 0.1f, v2.z),
            new Vector3(v1.x, 0.1f, v2.z),
        };

        overlayMesh.normals = new[]
        {
            Vector3.up,
            Vector3.up,
            Vector3.up,
            Vector3.up
        };

        overlayMesh.uv = new[]
        {
            uv0,
            new Vector2(uv1.x, uv0.y), 
            uv1, 
            new Vector2(uv0.x, uv1.y), 
        };

        // Init triangles
        overlayMesh.SetTriangles(new[]
        {
            0, 1, 2,
            0, 2, 3
        }, 0);

        overlayMesh.RecalculateBounds();
        overlayMesh.RecalculateNormals();
    }

    private void Update()
    {
        if (Math.Abs(material.color.a - alpha) > float.Epsilon)
        {
            Color color = material.color;
            color.a = alpha;
            material.color = color;
        }
    }
}
Kind Regards,
Infinity Code Team.

Do not know the best way to thank the developer? Rate the asset in Asset Store!

8 (edited by lefantan 2020-06-29 21:34:08)

Re: How to create texture to used as overlay

Alex Vertax wrote:

You mean resolution, right?!
The bigger, the better.

At the beginning of next week (most likely on Monday) I will send you an example.

I am not a MapTiler specialist, and I don’t know what the problem is.
You better ask this question to MapTiler support.

Hey sorry, I meant that the aspect ratio of the texture such that when I use TilesetOverlayExample.cs, the texture will be display accurately over the map.

I tried using an overlay of 1080*1080 (as attached) with the TilesetOverlayExample script, the overlay container is initially offset incorrect in terms of y, after adjusting it( i try setting the overlay container to 0,-0.05,0), I still couldn't get it to overlay accurately. (Picture 1)

In the photos (Picture 2), the orange boundaries (using drawing api) are the correct overlay I'm trying to achieve with overlay and the purple one is one created with tilesetexample.

I hope I explained my problem clearly, thank you Alex for helping up.

Post's attachments

Attachment icon Example.zip 634.93 kb, 1 downloads since 2020-06-30 

Re: How to create texture to used as overlay

Thanks for the screenshots.
The bug in the example is fixed:

using System;
using UnityEngine;

namespace InfinityCode.OnlineMapsExamples
{
    /// <summary>
    /// Example of how to make the overlay for the tileset.
    /// </summary>
    [AddComponentMenu("Infinity Code/Online Maps/Examples (API Usage)/TilesetOverlayExample")]
    public class TilesetOverlayExample : MonoBehaviour
    {
        // Overlay texture in mercator projection
        public Texture texture;

        // Overlay transparency
        [Range(0, 1)] public float alpha = 1;

        private Mesh overlayMesh;
        private Material material;
        private Collider tilesetCollider;

        private void Start()
        {
            // Create overlay container
            GameObject overlayContainer = new GameObject("OverlayContainer");
            overlayContainer.transform.parent = transform;

            // Init overlay material
            MeshRenderer meshRenderer = overlayContainer.AddComponent<MeshRenderer>();
            MeshFilter meshFilter = overlayContainer.AddComponent<MeshFilter>();
            material = new Material(Shader.Find("Transparent/Diffuse"));
            material.mainTexture = texture;
            meshRenderer.sharedMaterial = material;

            overlayMesh = meshFilter.sharedMesh = new Mesh();
            overlayMesh.name = "Overlay Mesh";
            overlayMesh.MarkDynamic();
            overlayMesh.vertices = new Vector3[4];

            // Subscribe to events
            OnlineMaps.instance.OnChangePosition += UpdateMesh;
            OnlineMaps.instance.OnChangeZoom += UpdateMesh;

            // Init mesh
            UpdateMesh();
        }

        private void UpdateMesh()
        {
            OnlineMapsTileSetControl control = OnlineMapsTileSetControl.instance;
            if (tilesetCollider == null) tilesetCollider = control.GetComponent<Collider>();
            //Bounds bounds = tilesetCollider.bounds;

            // Clear overlay mesh
            overlayMesh.Clear(true);

            // Init vertices and normals
            Vector2 size = control.sizeInScene;
            Vector3 p1 = new Vector3(-size.x, 0, 0);
            Vector3 p2 = new Vector3(0, 0, size.y);
            float y = 0.5f;
            overlayMesh.vertices = new[]
            {
                new Vector3(p1.x, y, p1.z),
                new Vector3(p1.x, y, p2.z),
                new Vector3(p2.x, y, p2.z),
                new Vector3(p2.x, y, p1.z)
            };

            overlayMesh.normals = new[]
            {
                Vector3.up,
                Vector3.up,
                Vector3.up,
                Vector3.up
            };

            // Init overlay UV
            OnlineMaps map = OnlineMaps.instance;

            double tlx, tly, brx, bry;
            map.GetTileCorners(out tlx, out tly, out brx, out bry);

            int maxTileCount = 1 << map.zoom;

            float uvX1 = (float)(tlx / maxTileCount);
            float uvX2 = (float)(brx / maxTileCount);

            if (uvX1 > uvX2) uvX2 += 1;

            float uvY1 = (float)(1 - tly / maxTileCount);
            float uvY2 = (float)(1 - bry / maxTileCount);

            overlayMesh.uv = new[]
            {
                new Vector2(uvX2, uvY1),
                new Vector2(uvX2, uvY2),
                new Vector2(uvX1, uvY2),
                new Vector2(uvX1, uvY1)
            };

            // Init triangles
            overlayMesh.SetTriangles(new[]
            {
                0, 1, 2,
                0, 2, 3
            }, 0);

            overlayMesh.RecalculateBounds();
            overlayMesh.RecalculateNormals();
        }

        private void Update()
        {
            if (Math.Abs(material.color.a - alpha) > float.Epsilon)
            {
                Color color = material.color;
                color.a = alpha;
                material.color = color;
            }
        }
    }
}
Kind Regards,
Infinity Code Team.

Do not know the best way to thank the developer? Rate the asset in Asset Store!

10 (edited by lefantan 2020-06-30 18:14:09)

Re: How to create texture to used as overlay

Hey, thanks for the quick reply. I'm still getting the same problem with the script. The overlay i used is the same.

Post's attachments

Attachment icon test.PNG 387.44 kb, file has never been downloaded. 

Re: How to create texture to used as overlay

Here is a video of how it works on my side:
https://www.dropbox.com/s/miwprk71uhkhj … 7.mp4?dl=0

Kind Regards,
Infinity Code Team.

Do not know the best way to thank the developer? Rate the asset in Asset Store!

Re: How to create texture to used as overlay

Alex Vertax wrote:

Here is a video of how it works on my side:
https://www.dropbox.com/s/miwprk71uhkhj … 7.mp4?dl=0

Thank you for the video.  I figured why the script wasn't working, it's because I had the size of the tilemap set to 1,1.