Tag: highlight

Overview

In this part we address occlusion issues, and potential conflicts with other assets by decoupling the effect from the camera depth/stencil buffer. We’ll also make improvements to make it easier to highlight multiple objects at the same time.

Quick recap of what we’ve been doing so far:

Acquire an 8 bit texture (without depth) to store the group ID.

1

RenderTexture.GetTemporary(_camera.pixelWidth, _camera.pixelHeight, 0, RenderTextureFormat.R8)
Bind GroupID Color + Camera Depth as render target.

1

_commandBuffer.SetRenderTarget(overlayIDTexture, BuiltinRenderTextureType.Depth)
Render all relevant objects again, to write their group ID to the GroupID texture, while also testing against camera depth and setting stencil to 1. The group ID is provided as a shader variable.
Bind Camera Color + Camera Depth as render target.

1

_commandBuffer.SetRenderTarget(BuiltinRenderTextureType.CameraTarget, BuiltinRenderTextureType.Depth)
Render all relevant objects, and use the stored group ID to determine outlines, while testing against camera depth and stencil. Fill color and Outline color are provided as shader variable.

Issues with this method:

Another asset might rely on the camera stencil buffer, resulting in a potential conflict.
During Step 3, we test against the camera depth buffer. This might fail if there are overlay objects occluding one another, because the camera depth buffer only has depth information on scene objects. In such a situation, far objects might render on top of near objects.
Left: Incorrect ordering, Right: expected result.

Using a separate depth/stencil buffer:

Acquire an 8 bit texture (with depth/stencil) to store the group ID.

1

RenderTexture.GetTemporary(_camera.pixelWidth, _camera.pixelHeight, 24, RenderTextureFormat.R8)

ℹ

Note that in Unity only 24 bit depth has a stencil buffer.
Bind GroupID Color + Depth as render target.

1

_commandBuffer.SetRenderTarget(overlayIDTexture)
Render all relevant objects to write their group ID to the GroupID texture with ZTest and ZWrite enabled, and set Stencil to 1.
Bind Camera Color + GroupID Depth Stencil as render target.

1

_commandBuffer.SetRenderTarget(BuiltinRenderTextureType.CameraTarget, overlayIDTexture)
Render all relevant objects again, while testing against GroupID depth and stencil, and use their group ID to determine outlines. Optionally test against camera Depth when a see through effect is not desired. Fill color and Outline color, are provided as shader variable. Since the Camera depth buffer is no longer bound, we need to do our Z tests against the _CameraDepthTexture texture.

Depth testing against “_CameraDepthTexture”

In order to test the depth of a fragment against a depth value from _CameraDepthTexture we need to bring both into the same space. This example shows how to do so in linear [0, 1] space.

Calculating linear depth for a fragment

Vertex to Fragment struct

struct v2f

{

float4 vertex : SV_POSITION;

float depth : TEXCOORD0;

};

Vertex shader

v2f Vert(appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.eyeDepth = UnityObjectToViewPos(v.vertex).z;

COMPUTE_EYEDEPTH(o.eyeDepth);

return o;

}

Fragment shader

float Frag(UNITY_VPOS_TYPE screenPos : VPOS, float eyeDepth : TEXCOORD0) : SV_Target

{

// The depth of the current fragment

float vDepth = eyeDepth / _ProjectionParams.z;

// [...]

}

Calculating linear depth for a value from_CameraDepthTexture

Fragment shader

// Get access to _CameraDepthTexture

UNITY_DECLARE_TEX2D(_CameraDepthTexture);

float Frag(UNITY_VPOS_TYPE screenPos : VPOS, float eyeDepth : TEXCOORD0) : SV_Target

{

// The depth of the fragment in the depth buffer

float gDepth = Linear01Depth(_CameraDepthTexture.Load(int3(screenPos.xy, 0)).r);

// [...]

}

Performing the depth test

Fragment shader

float _ZBias;

// Fragment shader (first pass)

float FragWriteOverlayID(UNITY_VPOS_TYPE screenPos : VPOS, float eyeDepth : TEXCOORD0) : SV_Target

{

#if EnableDepthTest

// The depth of the current fragment

float vDepth = eyeDepth / _ProjectionParams.z;

// The depth of the fragment in the depth buffer

float gDepth = Linear01Depth(_CameraDepthTexture.Load(int3(screenPos.xy, 0)).r);

// Depth test

if(vDepth - _ZBias > gDepth)

discard;

#endif

// Map range [0, 255] to [0.0f, 1.0f]

return (float)_GroupID / 255.0f;

}

ℹ

Since the calculations for both vDepth and gDepth differ, we need to use a small ZBias to avoid floating point imprecision induced Z fighting

Better multi-object support

We’ll extend OverlaySelectable to offer better access to all instances. We’ll also add the option to always highlight an object.

public class OverlaySelectable : MonoBehaviour

{

private static HashSet<OverlaySelectable> _instances = new HashSet<OverlaySelectable>();

public static IReadOnlyCollection<OverlaySelectable> Instances { get { return _instances; } }

public bool _mouseOverEffect = true;

public bool _highlightAlways = true;

public int _overlayGroupID = 1;

void OnEnable()

{

_instances.Add(this);

}

void OnDisable()

{

_instances.Remove(this);

}

Keeping a list of all instances is a matter of personal preference. I like my component data and logic separate, but this is not required. You could also add the fill and outline colors directly to the OverlaySelectable component. I opted to keep a list of all group colors in OverlayRenderer instead.

// [...]

void RenderOverlayObjects(IEnumerable<OverlaySelectable> instances)

{

_material.SetFloat(ShaderIDs._ZBias, _Bias);

// Request needed textures

var overlayIDTexture = RenderTexture.GetTemporary(_camera.pixelWidth, _camera.pixelHeight, 24, _groupIDTextureFormat);

// Step 1: Write Group IDs to overlayIDTexture

_commandBuffer.SetRenderTarget(overlayIDTexture);

_commandBuffer.ClearRenderTarget(true, true, Color.clear, 1.0f);

foreach (var instance in instances)

{

if (instance._highlightAlways)

{

_commandBuffer.SetGlobalInt(ShaderIDs._GroupID, instance._overlayGroupID);

_commandBuffer.DrawAllMeshes(instance.gameObject, _material, PassIDs.Pass_WriteGroupID);

}

// Step 2: Apply overlay effect

_commandBuffer.SetRenderTarget(BuiltinRenderTextureType.CameraTarget, overlayIDTexture);

_commandBuffer.SetGlobalTexture(ShaderIDs._OverlayIDTexture, overlayIDTexture);

foreach (var instance in instances)

{

if (instance._highlightAlways)

{

_commandBuffer.SetGlobalVector(ShaderIDs._FillColor, _GroupColors[instance._overlayGroupID]._fillColor);

_commandBuffer.SetGlobalVector(ShaderIDs._OutlineColor, _GroupColors[instance._overlayGroupID]._outlineColor);

_commandBuffer.DrawAllMeshes(instance.gameObject, _material, PassIDs.Pass_RenderOverlay);

}

// Don't forget to release the temporary render texture

RenderTexture.ReleaseTemporary(overlayIDTexture);

}

Planet of the Coders

Game Development & Programming

Tag Archives: highlight

Developing an Overlay Shader for Unity (Part 2)

Overview

Quick recap of what we’ve been doing so far:

Issues with this method:

Using a separate depth/stencil buffer:

Depth testing against “_CameraDepthTexture”

Calculating linear depth for a fragment

Calculating linear depth for a value from_CameraDepthTexture

Performing the depth test

Better multi-object support

Downloads

Content used