unity-2d-rigging-shader

This is an example of one way to add an outline shader to a 2D animated rigged model. Created using Unity version 2021.3.27f1 on 14th June 2023.

This is based on the comment from prokhorvig on the Unity Forum https://forum.unity.com/threads/adding-outline-to-character-based-on-multiple-sprites.863101/#post-7730607

Demo video: https://github.com/albertferras/unity-2d-rigging-shader/assets/7689174/0f47da84-2861-42c5-b097-260ce68657f1

Setup:

The rigged model is Fei, which is available in the Samples provided by the official 2D animation package. There are two GameObjects added on screen: 1 - (WHITE FLOOR. name=Fei Without Shader) Gameobject with the rigged model objects (sprite&bones), on layer 'Default'. 2 - (RED FLOOR. name=Fei With Shader) Same as above, but this one is rendered on layer 'RenderLayerForCameraB' The Fei appearing on the GREEN FLOOR is the 'Fei with shader' but with the outline shader applied.

Setup:

Globally:

• Create one Layer 'RenderLayerForCameraB'
• Create a Target Sorting Layer (for sprites): SpriteLayerB. You can do this from any Light2D or GameObject with sprite

Rigged Model (on the RED floor in the example above):

• Set Layer=RenderLayerForCameraB on (+all its child too)
• Set SortingLayer=SpriteLayerB to all SpriteRenderers of your rigged model.
• (Optional) Add animator to later see the outline match the animation.

Main Camera:

• CullingMask: Everything except 'RenderLayerForCameraB'

Camera B:

• CullingMask: Only 'RenderLayerForCameraB'
• Output Texture: 'CameraBRenderTexture'
• Place the camera so that it can see your rigged model (RED FLOOR one in our case)
• IMPORTANT You cannot enable PostProcessing in this Camera. Doing so will break the Alpha (transparency) of your RenderTexture

GlobalLight for Camera B:

• TargetSortingLayers: SpriteLayerB

RenderTexture (Create->Render Texture on the Project panel (assets folder))

• Name: CameraBRenderTexture
• Color format: R32G32B32A32_SFLOAT
• Size: 512x512

With this setup, the CameraB is going to draw our RiggedModel on our RenderTexture. It should have Alpha channel (transparency) already working. If not, try configuring your CameraB: Environment>BackgroundType: SolidColor (any with alpha=0). Note that I also got it working with 'Unitialised' or 'Skybox'.

We will now draw this RenderTexture on our screen and apply a Material(with a shader) in it. Disclaimer: I've only managed to add the rendertexture on a Canvas, so placing it properly on the screen is a bit more tricky since you need to check your camera position/viewport and where you're rendering your texture. This is out of scope for this example project.

Right click on your Scene and create a UI->RawImage. Select the RenderTexture we've created and move it to your desired location. To make it easier to place, modify the Canvas and set Render Mode to World Space. Now, you just need to apply a Material with your favorite shader. In this project we added a Material with the Outline shader.

Outline Shader used

Zoom Left side:

Zoom Right side:

OutlineSubgraph: