iOS Dual Displays (Airplay) with EdgeDetectNormals Shader (ImageEffect)

Unity Engine
1

I’m using a modified ImageEffect EdgeDetectionShader to give outlines to my geometry, this has worked fine on a single screen and when using “Mirrored” Dual Displays through Airplay.

But I’m wanting to render two cameras to two separate screens on iOS (so I can have a UI on one but not the other) using the following code from GitHub :

using UnityEngine;
using System.Collections;

namespace UnityAssets
{
    public class DualDisplay : MonoBehaviour
    {
        public Camera mainCamera, controlsCamera;
        public bool autoEnable = true;


        public bool Available
        {
            get
            {
                return enabled && Display.displays.Length > 1;
            }
        }


        public bool Active
        {
            get
            {
                return enabled && controlsCamera.enabled;
            }
            set
            {
                if (!value || !Available)
                {
                    controlsCamera.enabled = false;

                    controlsCamera.SetTargetBuffers (Display.main.colorBuffer, Display.main.depthBuffer);
                    mainCamera.SetTargetBuffers (Display.main.colorBuffer, Display.main.depthBuffer);
                }
                else
                {
                    Display secondDisplay = Display.displays[1];

                    mainCamera.SetTargetBuffers (secondDisplay.colorBuffer, secondDisplay.depthBuffer);
                    controlsCamera.SetTargetBuffers (Display.main.colorBuffer, Display.main.depthBuffer);

                    controlsCamera.enabled = true;
                }
            }
        }


        void Reset ()
        {
            mainCamera = Camera.main;
        }


        void Start ()
        {
            if (mainCamera == null || controlsCamera == null)
            {
                Debug.LogError ("DualDisplay missing a camera reference");
                Destroy (this);
                return;
            }

            controlsCamera.enabled = false;
        }


        void Update()
        {
            if (Available)
            {
                if (autoEnable)
                {
                    Active = true;
                }
            }
            else
            {
                Active = false;
            }
        }
    }
}

This renders to two separate displays ( the iPad and the Airplay screen) but breaks the Edge Detection Image Effect ( as soon as I disconnect from Airplay the Image Effect starts working again ). Have tried putting the EdgeDetection script on each camera but no luck there.

I think it must be something to do with depth buffers but I’m all at sea and could do with a point in the right direction.

Modified EdgeDetection Script:-

using System;
using UnityEngine;

namespace UnityStandardAssets.ImageEffects
{
    [ExecuteInEditMode]
    [RequireComponent (typeof (Camera))]
    [AddComponentMenu ("Image Effects/Edge Detection/Edge Detection Color")]
    public class EdgeDetectionColor : PostEffectsBase
    {
        public enum EdgeDetectMode
        {
            TriangleDepthNormals = 0,
            RobertsCrossDepthNormals = 1,

        }
       
       
        public EdgeDetectMode mode = EdgeDetectMode.RobertsCrossDepthNormals;
        public float sensitivityDepth = 1.0f;
        public float sensitivityNormals = 1.0f;
        public float lumThreshold = 0.2f;
        public float edgeExp = 1.0f;
        public float sampleDist = 1.0f;
        public float edgesOnly = 0.0f;
        public Color edgesOnlyBgColor = Color.black;
        public Color edgesColor = Color.red;
       
        public Shader edgeDetectShader;
        public Material edgeDetectMaterial = null;
        private EdgeDetectMode oldMode = EdgeDetectMode.RobertsCrossDepthNormals;
       
   
        public Color gradientTop = Color.white;
        public Color gradientBot = Color.blue;

        public Color gradientTop2 = Color.white;
        public Color gradientBot2 = Color.blue;
        public float gradientHorizon = 1.0f;
        public float screenHeight = 3840.0f;
       
        public override bool CheckResources ()
        {
            CheckSupport (true);
           
            edgeDetectMaterial = CheckShaderAndCreateMaterial (edgeDetectShader,edgeDetectMaterial);
            if (mode != oldMode)
                SetCameraFlag ();
           
            oldMode = mode;
           
            if (!isSupported)
                ReportAutoDisable ();
            return isSupported;
        }
       
       
        new void Start ()
        {
            oldMode    = mode;
        }
       
        void SetCameraFlag ()
        {
                if (mode == EdgeDetectMode.TriangleDepthNormals || mode == EdgeDetectMode.RobertsCrossDepthNormals)
                GetComponent<Camera>().depthTextureMode |= DepthTextureMode.DepthNormals;
        }
       
        void OnEnable ()
        {
            SetCameraFlag();
        }
       
        [ImageEffectOpaque]
        void OnRenderImage (RenderTexture source, RenderTexture destination)
        {
            if (CheckResources () == false)
            {
                Graphics.Blit (source, destination);
                return;
            }
            if (edgeDetectMaterial == null)
            {
                edgeDetectShader = Shader.Find("Hidden/EdgeDetectColors");
                edgeDetectMaterial = CheckShaderAndCreateMaterial(edgeDetectShader, edgeDetectMaterial);
            }
            Vector2 sensitivity = new Vector2 (sensitivityDepth, sensitivityNormals);
            edgeDetectMaterial.SetVector ("_Sensitivity", new Vector4 (sensitivity.x, sensitivity.y, 1.0f, sensitivity.y));
            edgeDetectMaterial.SetFloat ("_BgFade", edgesOnly);
            edgeDetectMaterial.SetFloat ("_SampleDistance", sampleDist);
            edgeDetectMaterial.SetVector ("_BgColor", edgesOnlyBgColor);
            edgeDetectMaterial.SetFloat ("_Exponent", edgeExp);
            edgeDetectMaterial.SetFloat ("_Threshold", lumThreshold);
            edgeDetectMaterial.SetVector("_Color", edgesColor);

            edgeDetectMaterial.SetVector("_GradientTop", gradientTop);
            edgeDetectMaterial.SetVector("_GradientBot", gradientBot);

            edgeDetectMaterial.SetVector("_GradientTop2", gradientTop2);
            edgeDetectMaterial.SetVector("_GradientBot2", gradientBot2);

            edgeDetectMaterial.SetFloat ("_GradientHorizon", gradientHorizon);
            edgeDetectMaterial.SetFloat ("_ScreenHeight", screenHeight);
           
            Graphics.Blit (source, destination, edgeDetectMaterial, (int) mode);
        }
    }
}
2

Have been trying lots of different things and am getting a little closer, here’s a more concise question.

Outputting to 2 screens on iOS.

“iPad Screen” is 4:3 2224x1668 , “Airplay Screen” is 16:9 1920x1080.

Wanting to end up with Scene and UI on “iPad Screen”, Scene on “Airplay Screen”.

Both screens should display an EdgeDetection Image Effect.

…

My current setup has 2 cameras.

The “iPad Camera” renders into a RenderTexture then back to the Camera using this code in a script on the “iPad Camera”.

void OnEnable ()
        {
            SetCameraFlag();
            mainRenderTexture = new RenderTexture(Screen.width, Screen.height, 16, RenderTextureFormat.ARGB32);
            mainRenderTexture.Create();
            mainRenderTexture.useDynamicScale = true;
        }



void OnRenderImage (RenderTexture source, RenderTexture destination)

{      
            iPadCamera.targetTexture = null;
            Graphics.Blit (source, mainRenderTexture, edgeDetectMaterial, (int) mode);
            Graphics.Blit(mainRenderTexture, destination);
}

The “Airplay Camera” grabs a reference to iPad Camera’s mainRenderTexture and displays it using this code on a script on the “Airplay Camera”

private void OnPreRender()
{
    if (Display.displays.Length > 1){
                airPlayCamera.SetTargetBuffers(Display.displays[1].colorBuffer, Display.displays[1].depthBuffer);

        }
}

private void OnRenderImage(RenderTexture source, RenderTexture destination)

{
          Graphics.Blit(mainRenderTexture, destination, new Vector2(1f,1f), new Vector2(0,0));
}

Both cameras are set to “Render everything”, “Legacy Vertex Lit” the only difference being the AirplayCamera is set to depth -2 instead of depth -1 which seems to draw the UI on the iPad screen instead of the Airplay Screen.

The iPad Camera displays the UI and the Scene with the image effect. The Airplay Camera displays the Scene in just black and white silhouette without the Image Effect.

Anything I’m missing?