Have a Regular Camera Draw over a UI Canvas

Questions & Answers
1

When using NGUI, I had a regular camera drawing on top of my UI for scene transitions. When playing around with the 4.6 UI system, I can’t seem to find an option in the editor to control the camera depth of a canvas. Taking a look at the Canvas documentation, it says that the Canvas is drawn after scene rendering. Is there a way to force a regular camera to draw on top of the UI?

2

You can get the camera to render on top of screen-space canvases by creating a canvas with a higher render order, giving it a RawImage, and get that camera to RenderToTexture, and assign that texture to the RawImage.

I was using the free TransitionKit created by prime31, and I had the same problem as you. That was my solution.

	/// <summary>
	/// Create's a RawImage on top of everything, then sets the transitionKit camera to render to it.
	/// </summary>
	/// <param name="topCanvas">Top canvas.</param>
	public void CreateRenderArea()
	{
		renderCanvasObj = new GameObject("TransitionRenderCanvas");
		Canvas renderCanvas = renderCanvasObj.AddComponent<Canvas>();
		renderCanvas.renderMode = RenderMode.ScreenSpaceOverlay;

		//make sure this canvas is drawn on top of everything else
		renderCanvas.sortingOrder = short.MaxValue; 
		RectTransform canvasTrans = renderCanvas.transform as RectTransform;
		renderCanvasObj.AddComponent<CanvasScaler>();
		DontDestroyOnLoad(renderCanvas);
		renderCanvasObj.AddComponent<GraphicRaycaster>();

		RenderTexture rt = new RenderTexture(Screen.width, Screen.height, 24);
		transitionKitCamera.targetTexture = rt;

		GameObject renderTex = new GameObject("transitionRenderTexture");

		RectTransform trans = renderTex.AddComponent<RectTransform>();
		trans.SetParent(renderCanvas.transform);
		trans.SetAsLastSibling();  //this way it will render last: On top of everything else.
		trans.pivot = new Vector2(0, 0);

		renderCanvasObj.AddComponent<CanvasRenderer>();
		RawImage img = renderTex.AddComponent<RawImage>();

		trans.sizeDelta = new Vector2(Screen.width, Screen.height);
		img.texture = rt;
	}

The way the TransitionKit works is that it creates a new camera for the transition, then deletes itself (and the camera) when the transition is complete. That way, you’ll be back to using your regular camera that isn’t rendering to texture, and all of the complications that entails (not being able to click on objects in the scene, etc…).

I don’t know how NGUI works, but maybe you could modify this idea to fit your needs.