How can I paint a picture and then compare it to another?

I want to make the game similar to [ink.inc][1] . Right now I’m trying to make the core gameplay of the game. There is an example image and I should try to paint as precise as I can and then compare them. Right now I found 2 separate solutions on the internet: One for painting and saving the texture and one for comparing textures.
The first one is from a youtube tutorial: Implement Drawing and Saving in Unity 2018 🎮 HD - YouTube
The code from this video:


using System.Collections;
using System.IO;
using UnityEngine;

public class Paintable : MonoBehaviour {

    public GameObject Brush;
    public float BrushSize = 0.1f;
    public RenderTexture RTexture;

	// Use this for initialization
	void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {

        if (Input.GetMouseButton(0))
        {
            //cast a ray to the plane
            var Ray = Camera.main.ScreenPointToRay(Input.mousePosition);
            RaycastHit hit;
            if(Physics.Raycast(Ray, out hit))
            {
                //instanciate a brush
                var go = Instantiate(Brush, hit.point + Vector3.up * 0.1f, Quaternion.identity, transform);
                go.transform.localScale = Vector3.one * BrushSize;
            }

        }
	}

    public void Save()
    {
        StartCoroutine(CoSave());
    }

    private IEnumerator CoSave()
    {
        //wait for rendering
        yield return new WaitForEndOfFrame();
        Debug.Log(Application.dataPath + "/savedImage.png");

        //set active texture
        RenderTexture.active = RTexture;

        //convert rendering texture to texture2D
        var texture2D = new Texture2D(RTexture.width, RTexture.height);
        texture2D.ReadPixels(new Rect(0, 0, RTexture.width, RTexture.height), 0, 0);
        texture2D.Apply();

        //write data to file
        var data = texture2D.EncodeToPNG();
        File.WriteAllBytes(Application.dataPath + "/savedImage.png", data);


    }
}

The second with this code from StackOverflow answer:


private bool CompareTexture (Texture2D first, Texture2D second)
{
    Color[] firstPix = first.GetPixels();
    Color[] secondPix = second.GetPixels();
    if (firstPix.Length!= secondPix.Length)
    {
        return false;
    }
    for (int i= 0;i < firstPix.Length;i++)
    {
        if (firstPix _!= secondPix*)*_

{
return false;
}
}

return true;
}
----------
The problems that I currently have are the following:
1) While painting the tutorial way the output looks weird and colors are not exact as in a play mode.
In unity the painted picture looks like this:
_*Screenshot by Lightshot
If you open it in finder it looks like this:
_Screenshot by Lightshot
How can I make it look the same as in Unity?
2) Because of the lighting and other stuff, the colors are obscured ob the painted image and as a result, I can’t compare these images with the original one.
Would be grateful for any help :slight_smile:
_
[1]: https://play.google.com/store/apps/details?id=com.srgstudios.inkinc&hl=en*_

To compare 2 textures you could:


  • Loop through every pixel of each texture, compare their colors and count the matching pixels;
  • Then you could divide this value from the total amount of pixels (of one texture);
  • With that, you should get a value from 0 to 1, that corresponds to how much the textures match with each other.

(This is assuming that you’re working with flat colored images, like simple drawings)

Hope this helps!