Table of Contents

🔳 CosterGraphics.Systems.OutlineSystem

🧑‍🎨 OutlineSystem Renderer Features Overview

The OutlineSystem includes four Scriptable Renderer Features, for Simple, Basic, Advanced or Pro level outlines:


%%{
  init:{
    'flowchart':{
        'nodeSpacing':16, 
        'rankSpacing':16
    }
  }
}%%
flowchart
    subgraph RendererFeatures[🧑‍🎨Outline3D Renderer Features]
    direction TB
        Outline3DRenderFeatureSimple(<img src='../../../../../images/articles/Systems/OutlineSystem/Components/RendererFeatures/Outline3DRenderFeatureSimple/CosterGraphics-Systems-OutlineSystem-Outline3DRenderFeatureSimple.jpg' /><p style="text-align:right;">🧑‍🎨</p>Outline3DRenderFeatureSimple) 
        Outline3DRenderFeatureBasic(<img src='../../../../../images/articles/Systems/OutlineSystem/Components/RendererFeatures/Outline3DRenderFeatureBasic/CosterGraphics-Systems-OutlineSystem-Outline3DRenderFeatureBasic.jpg'/><p style="text-align:right;">🧑‍🎨🧑‍🎨</p>Outline3DRenderFeatureBasic)
        Outline3DRenderFeatureAdvanced(<img src='../../../../../images/articles/Systems/OutlineSystem/Components/RendererFeatures/Outline3DRenderFeatureAdvanced/CosterGraphics-Systems-OutlineSystem-Outline3DRenderFeatureAdv.jpg' /><p style="text-align:right;">🧑‍🎨🧑‍🎨🧑‍🎨</p>Outline3DRenderFeatureAdv)
        Outline3DRenderFeaturePro(<img src='../../../../../images/articles/Systems/OutlineSystem/Components/RendererFeatures/Outline3DRenderFeaturePro/CosterGraphics-Systems-OutlineSystem-Outline3DRenderFeaturePro_Foldout.jpg' /><p style="text-align:right;">🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨</p>Outline3DRenderFeaturePro)
    end
classDef default padding: 0px, stroke-width:2px;
style RendererFeatures font-size: 12px, stroke-width: 2px, stroke-dasharray: 10 10;

Each higher tier builds on top of the functionality of the tier below it for backwards compatibility.
The lowest tier's Simple Renderer Feature supports only the Simple Composite outline shaders while the Basic feature supports both the Simple as well as the Basic Composite outline shaders. The Pro feature supports all the Simple, Basic, Advanced and Pro Composite shaders.

While the Pro feature offers the most flexibility of all four, all of the features are optimized to only run the render passes needed to generate the render textures that are required by the composite shaders by checking the Composite shader's properties. It is only slightly more efficient to use a lower tier renderer feature when not using a higher level Composite shader but there is a little bit more overhead compared to the lower tier features.

1. 🧑‍🎨Outline3DRenderFeatureSimple

Outline3DRenderFeatureSimple
🧑‍🎨
🎭 Mask Materials:
Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph
Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph

🖼️ Final Composite Material:
Outline3DSimple-Cmp-Silhouette-Outside-Default.shadergraph
(Or any other Simple tier Composite shader)

The Simple Renderer Feature supports all Simple Composite outline shaders that only require any of the following two binary black/white color mask textures or the URP camera opaque texture:

flowchart
%%{init:{'flowchart':{'nodeSpacing': 16, 'rankSpacing': 64}}}%%
    subgraph MaskTextures[🧑‍🎨Outline3DRenderFeatureSimple<br/> 🎭Mask Textures]
    direction TB
        OutlineColorTextureMask(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMask.jpg'/></div><div class="Header"><div class="Name">Texture2D_OutlineColorTextureMask</div><div class="Icon">⬜</div></div></div></div>
        )
        OutlineColorTextureMaskDepthTested(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskDepthTestedPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMaskDepthTested.jpg'/></div><div class="Header"><div class="Name">Texture2D_OutlineColorTextureMaskDepthTested</div><div class="Icon">🧱</div></div></div></div>
        )
        CameraOpaqueTexture(
            <div class="FlowChartNodeCard"><div class="Body"><div class="Image"><img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/CameraColorCopyPass/CosterGraphics-Systems-OutlineSystem-CameraOpaqueTexture.jpg'/></div><div class="Header"><div class="Name">Texture2D_CameraOpaqueTexture</div><div class="Icon">📸</div></div></div></div>
        )
    end

style MaskTextures                       font-size: 12px, stroke-width:2px, stroke-dasharray: 10 10;

  1. ⬜Texture2D_OutlineColorTextureMask
    Binary white on black color texture mask of the Outline3D objects
  2. 🧱Texture2D_OutlineColorTextureMaskDepthTested
    Binary white on black color texture mask of the Outline3D objects, depth tested against other non-outline scene geometry using L Equal depth comparison. (For the example image above the Outline3D components of the bunny in the front and the turret in the center were disabled)
  3. 📸Texture2D_CameraOpaqueTexture
    A copy of the URP camera color buffer for performing edge detection on the scene's color and for other full-screen effects.

🏒 Outline3DRenderFeatureSimple Render Pass Execution Order

The default Render Pass execution order of the 🧑‍🎨Outline3DRenderFeatureSimple is shown in the diagram below. After the mask Render Passes are done, the Outline3DRenderFeature executes the final full-screen composite pass which renders the final outlines to the scene cameras:


flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨Outline3DRenderFeatureSimple]
    direction TB
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass("🧱OutlineColorMaskDepthTestedPass")
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineCompositePass(🔳OutlineCompositePass)
    end

    OutlineCompositePass
    -..->
    Out([🎥Camera Color Texture])

classDef default margin: 256px;
style Outline3DRenderFeature font-size: 12px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

See the Outline3DRenderFeatureSimple Renderer Features page for a detailed description of the Render Passes:


2. 🧑‍🎨🧑‍🎨Outline3DRenderFeatureBasic

Outline3DRenderFeatureBasic
🧑‍🎨🧑‍🎨
🎭 Mask Shaders:
⬜ Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph
🧱 Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph

⬛ Outline3DBasic-Msk-DepthTextureMask-Default.shadergraph
🟦 Outline3DBasic-Msk-NormalsTextureMask-Default.shadergraph
🟩 Outline3DBasic-Msk-UVTextureMask-Default.shadergraph

🖼️ Final Composite Shader:
🖼️ Outline3DSimple-Cmp-Silhouette-Outside-Default.shadergraph
(Or any other Simple tier Composite shader)

The Basic Renderer Feature supports composite shaders that require one or more of the texture masks from the Simple renderer feature and adds support for the Basic mask textures listed below:

flowchart
    subgraph MaskTextures[🧑‍🎨🧑‍🎨Outline3DRenderFeatureBasic<br/> 🎭Mask Textures]
    direction TB
        OutlineDepthTextureMask(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineDepthMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineDepthTextureMask.jpg'/><br/>
            ⬛Texture2D_OutlineDepthTextureMask
        )

        OutlineNormalsTextureMask(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineNormalsMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineNormalsTextureMask.jpg'/><br/>
            🟦Texture2D_OutlineNormalsTextureMask
        )

        OutlineUVTextureMask(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineUVMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineUVTextureMask.jpg'/><br/>
            🟩Texture2D_OutlineUVTextureMask
        )
    end

    style MaskTextures              font-size: 12px, stroke-dasharray: 5 5;
    style OutlineDepthTextureMask   font-size: 8px;
    style OutlineNormalsTextureMask font-size: 8px;
    style OutlineUVTextureMask      font-size: 8px;

  1. ⬛Texture2D_OutlineDepthTextureMask
    A depth texture mask storing the depth information of the Outline3D objects
  2. 🟦Texture2D_OutlineNormalsTextureMask
    A normals texture mask storing the view space normals of the Outline3D objects
  3. 🟩Texture2D_OutlineUVTextureMask
    A color texture mask storing the objects UV coordinates for cross-hatching effects etcetera

🏒 Outline3DRenderFeatureBasic Render Pass Execution Order

The default Render Pass execution order of the 🧑‍🎨🧑‍🎨Outline3DRenderFeatureBasic is shown in the diagram below. After the mask Render Passes are done, the Outline3DRenderFeature executes the final full-screen composite pass, which renders the final outlines to the scene cameras:


flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨🧑‍🎨Outline3DRenderFeatureBasic]
    direction TB
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass(🧱OutlineColorMaskDepthTestedPass)
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineDepthMaskPass(⬛OutlineDepthMaskPass)
        -->
        OutlineNormalsMaskPass(🟦OutlineNormalsMaskPass)
        -->
        OutlineUVMaskPass(🟩OutlineUVMaskPass)
        -->
        OutlineCompositePass(🔳OutlineCompositePass) 
    end
    OutlineCompositePass
    -..->
    Out([🎥Camera Color Texture])

classDef default margin: 256px;
style Outline3DRenderFeature font-size: 10px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

See the Outline3DRenderFeatureBasic Renderer Features page for a detailed description of the Render Passes:


3. 🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeatureAdv

Outline3DRenderFeatureAdv
🧑‍🎨🧑‍🎨🧑‍🎨
🎭 Mask Shaders:
⬜ Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph
🧱 Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph

⬛ Outline3DBasic-Msk-DepthTextureMask-Default.shadergraph
🟦 Outline3DBasic-Msk-NormalsTextureMask-Default.shadergraph
🟩 Outline3DBasic-Msk-UVTextureMask-Default.shadergraph

🪪 Outline3DAdv-Msk-ObjectIDTextureMask-Default.shadergraph

🖼️ Final Composite Shader:
🖼️ Outline3DSimple-Cmp-Silhouette-Outside-Default.shadergraph
(Or any other Simple tier Composite shader)

The Advanced Renderer Feature supports composite shaders that require one or more of the texture masks from the Basic or Simple renderer features and adds support for the Advanced ObjectID mask texture:

flowchart
    subgraph MaskTextures[🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeatureAdv<br/>🎭Mask Textures]
    direction TB
        OutlineObjectIDTextureMask(
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineDepthMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineDepthTextureMask.jpg'/><br/>
            🪪Texture2D_OutlineObjectIDTextureMask
        )
    end

    style MaskTextures                 font-size: 12px, stroke-dasharray: 10 10, stroke-width: 2px;
    style OutlineObjectIDTextureMask   font-size: 10px;

    classDef default padding:20pc

  1. 🪪Texture2D_OutlineObjectIDTextureMask
    Color Texture mask containing the ObjectIDs from the Outline3D objects stored in the (R) channel, InstanceIDs which are assigned by the Advanced Render Feature stored in the (G) channel and a 1.0 or 0.0 boolean flag value if an ObjectID was written into the (B) channel.

🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeatureAdv Render Pass Execution Order

The default Render Pass execution order of the 🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeatureAdv is shown in the diagram below. After the mask Render Passes are done, the Outline3DRenderFeature executes the final full-screen composite pass, which renders the final outlines to the scene cameras:

flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeatureAdvanced]
    direction TB
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass(🧱OutlineColorMaskDepthTestedPass)
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineDepthMaskPass(⬛OutlineDepthMaskPass)
        -->
        OutlineNormalsMaskPass(🟦OutlineNormalsMaskPass)
        -->
        OutlineObjectIDMaskPass(🪪OutlineObjectIDMaskPass)
        -->
        OutlineCompositePass(🔳OutlineCompositePass) 
    end

    OutlineCompositePass
    -..-> 
    Out([🎥Camera Color Texture])
        
classDef default margin: 256px;
style Outline3DRenderFeature font-size: 10px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

See the Outline3DRenderFeatureAdv Renderer Features page for a detailed description of the Render Passes:


4. 🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro

Outline3DRenderFeaturePro
🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨
🎭 Mask Shaders:
⬜ Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph
🧱 Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph

⬛ Outline3DBasic-Msk-DepthTextureMask-Default.shadergraph
🟦 Outline3DBasic-Msk-NormalsTextureMask-Default.shadergraph
🟩 Outline3DBasic-Msk-UVTextureMask-Default.shadergraph

🪪 Outline3DAdv-Msk-ObjectIDTextureMask-Default.shadergraph

🌱🏞️ Outline3DPro-Msk-JFA-UVSeedsTextureMask-Silhouette_Outside-Default.shadergraph
🌱🏠 Outline3DPro-Msk-JFA-UVSeedsTextureMask-Silhouette_Inside-Default.shadergraph

🔃 Intermediate Buffer Shaders:
🌱📸 Outline3DPro-Intermediate-JFA-UV-CopyPass-Default.shadergraph
🦘↔️ Outline3DPro-Intermediate-JFA-UV-JumpPassHorizontal-Default.shadergraph
🦘↕️ Outline3DPro-Intermediate-JFA-UV-JumpPassVertical-Default.shadergraph

🖼️ Final Composite Shader:
🖼️ Outline3DSimple-Cmp-Silhouette-Outside-Default.shadergraph
(Or any other Simple tier Composite shader)


The Pro Renderer Feature supports all of the Simple, Basic and Advanced Composite shaders and also adds support for the Pro textures listed below, which are mainly for JFA Distance Field based outlines. The Pro Renderer Feature generates Jump Flood Algorithm filled texture masks that contain the sceen space UV positions of the closest edges of the Outline3D geometry which are then used in the Composite JFA shaders to calculate outline distance and signed distance fields with.

  1. 🌱🏞️Texture2D_OutlineJFAUVSeedTextureMask_Outside A color texture mask containing the screen space UV coordinates of only the Outline3D object's geometry. Used by the JFA Jump passes.)
  2. 🌱🏠Texture2D_OutlineJFAUVSeedTextureMask_Inside A color texture mask containing the screen space UV coordinates that are outside of the Outline3D object's geometry. Used by the JFA Jump passes to calculate distances inside the geometry.)
  3. 🦘🏞️Texture2D_OutlineJFAUVJumpTextureMask_Outside A color texture containing the UVs of the closest edges of the Outline3D geometry from outside the masked geometry. Used for generating the unsigned distance field outlines)
  4. 🦘🏠Texture2D_OutlineJFAUVJumpTextureMask_Inside A color texture containing the UVs of the closest edges of the Outline3D geometry from inside the masked geometry. Used for generating the unsigned distance field outlines)

Outline3DRenderFeaturePro Render Pass Execution Order

The default Render Pass execution order of the 🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro is shown in the diagram below. After the mask Render Passes are done, the Outline3DRenderFeature executes the final full-screen composite pass, which renders the final outlines to the scene cameras:


flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro]
        direction TB
        Outline3DRenderFeaturePro(Outline3DRenderFeaturePro) 
        --> 
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass(🧱OutlineColorMaskDepthTestedPass)
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineDepthMaskPass(⬛OutlineDepthMaskPass)
        -->
        OutlineNormalsMaskPass(🟦OutlineNormalsMaskPass)
        -->
        OutlineUVMaskPass(🟩OutlineUVMaskPass)
        -->
        OutlineObjectIDMaskPass(🪪OutlineObjectIDMaskPass)
        -->
        OutlineJFAUVSeedsMaskPass_Outside(🌱🏞️OutlineJFAUVSeedsMaskPass_Outside)
        -->
        OutlineJFAUVSeedsMaskCopyPass_Outside(📋🌱🏞️OutlineJFAUVSeedsMaskCopyPass_Outside)
        -->
        JFALoopOutside

            subgraph JFALoopOutside [🪣JFA Flood Fill Loop Outside]
                OutlineJFAUVHorizontalJumpPass_Outside(↔️🦘🏞️OutlineJFAUVHorizontalJumpPass_Outside)
                -.->
                OutlineJFAUVVerticalJumpPass_Outside(↕️🦘🏞️OutlineJFAUVVerticalJumpPass_Outside)

                OutlineJFAUVVerticalJumpPass_Outside
                -.->
                OutlineJFAUVHorizontalJumpPass_Outside
            end

        JFALoopOutside
        -->
        OutlineJFAUVSeedsMaskPass_Inside(🌱🏠OutlineJFAUVSeedsMaskPass_Inside)
        -->
        OutlineJFAUVSeedsMaskCopyPass_Inside(📋🌱🏠OutlineJFAUVSeedsMaskCopyPass_Inside)
        -->
        JFALoopInside

            subgraph JFALoopInside [🪣JFA Flood Fill Loop Inside]
                OutlineJFAUVHorizontalJumpPass_Inside(↔️🦘🏠OutlineJFAUVHorizontalJumpPass_Inside)
                -->
                OutlineJFAUVVerticalJumpPass_Inside(↕️🦘🏠OutlineJFAUVVerticalJumpPass_Inside)

                OutlineJFAUVVerticalJumpPass_Inside
                -->
                OutlineJFAUVHorizontalJumpPass_Inside
            end

        JFALoopInside
        -->
        OutlineCompositePass(🔳OutlineCompositePass)
        end

    OutlineCompositePass
    -..->
    Out([🎥Camera Color Texture])
    
classDef default margin: 340px;
style Outline3DRenderFeature font-size: 10px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

See the Outline3DRenderFeaturePro Renderer Features page for a detailed description of the Render Passes:


Full Render Pass Execution Order Overview

The default render execution order for each Outline3DRenderFeature tier. This is the order in which each Render Pass is executed when all of the RenderPassEvents are set to the same injection point with the default being RenderPassEvent.BeforeRenderingTransparents.

flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨Outline3DRenderFeatureSimple]
    direction TB
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass("🧱OutlineColorMaskDepthTestedPass")
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineCompositePass(🔳OutlineCompositePass)
    end

    OutlineCompositePass
    -..->
    Out([🎥Camera Color Texture])

classDef default margin: 256px;
style Outline3DRenderFeature font-size: 12px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨🧑‍🎨Outline3DRenderFeatureBasic]
    direction TB
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass(🧱OutlineColorMaskDepthTestedPass)
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineDepthMaskPass(⬛OutlineDepthMaskPass)
        -->
        OutlineNormalsMaskPass(🟦OutlineNormalsMaskPass)
        -->
        OutlineUVMaskPass(🟩OutlineUVMaskPass)
        -->
        OutlineCompositePass(🔳OutlineCompositePass) 
    end
    OutlineCompositePass
    -..->
    Out([🎥Camera Color Texture])

classDef default margin: 256px;
style Outline3DRenderFeature font-size: 10px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

flowchart
direction LR
%%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeatureAdvanced]
    direction TB
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass(🧱OutlineColorMaskDepthTestedPass)
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineDepthMaskPass(⬛OutlineDepthMaskPass)
        -->
        OutlineNormalsMaskPass(🟦OutlineNormalsMaskPass)
        -->
        OutlineUVMaskPass(🟩OutlineUVMaskPass)
        -->
        OutlineObjectIDMaskPass(🪪OutlineObjectIDMaskPass)
        -->
        OutlineCompositePass(🔳OutlineCompositePass) 
    end

    OutlineCompositePass
    -..-> 
    Out([🎥Camera Color Texture])
        
classDef default margin: 256px;
style Outline3DRenderFeature font-size: 10px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;

flowchart
direction LR
  %%{init:{'flowchart':{'nodeSpacing':16, 'rankSpacing':32}}}%%
    subgraph Outline3DRenderFeature[🧑‍🎨🧑‍🎨🧑‍🎨🧑‍🎨Outline3DRenderFeaturePro]
        direction TB
        Outline3DRenderFeaturePro(Outline3DRenderFeaturePro) 
        --> 
        OutlineColorMaskPass(⬜OutlineColorMaskPass)
        --> 
        OutlineColorMaskDepthTestedPass(🧱OutlineColorMaskDepthTestedPass)
        --> 
        OutlineCameraColorCopyPass(📸OutlineCameraColorCopyPass)
        -->
        OutlineDepthMaskPass(⬛OutlineDepthMaskPass)
        -->
        OutlineNormalsMaskPass(🟦OutlineNormalsMaskPass)
        -->
        OutlineUVMaskPass(🟩OutlineUVMaskPass)
        -->
        OutlineObjectIDMaskPass(🪪OutlineObjectIDMaskPass)
        -->
        OutlineJFAUVSeedsMaskPass_Outside(🌱🏞️OutlineJFAUVSeedsMaskPass_Outside)
        -->
        OutlineJFAUVSeedsMaskCopyPass_Outside(📋🌱🏞️OutlineJFAUVSeedsMaskCopyPass_Outside)
        -->
        JFALoopOutside

        subgraph JFALoopOutside [🪣JFA Flood Fill Loop Outside]
        direction TB
            OutlineJFAUVHorizontalJumpPass_Outside(↔️🦘🏞️OutlineJFAUVHorizontalJumpPass_Outside)
            -->
            OutlineJFAUVVerticalJumpPass_Outside(↕️🦘🏞️OutlineJFAUVVerticalJumpPass_Outside)

            OutlineJFAUVVerticalJumpPass_Outside
            -->
            OutlineJFAUVHorizontalJumpPass_Outside
        end

        JFALoopOutside
        -->
        OutlineJFAUVSeedsMaskPass_Inside(🌱🏠OutlineJFAUVSeedsMaskPass_Inside)
        -->
        OutlineJFAUVSeedsMaskCopyPass_Inside(📋🌱🏠OutlineJFAUVSeedsMaskCopyPass_Inside)
        -->
        JFALoopInside

        subgraph JFALoopInside [🪣JFA Flood Fill Loop Inside]
        direction TB
            OutlineJFAUVHorizontalJumpPass_Inside(↔️🦘🏠OutlineJFAUVHorizontalJumpPass_Inside)
            -->
            OutlineJFAUVVerticalJumpPass_Inside(↕️🦘🏠OutlineJFAUVVerticalJumpPass_Inside)

            OutlineJFAUVVerticalJumpPass_Inside
            -->
            OutlineJFAUVHorizontalJumpPass_Inside
        end

        JFALoopInside
        -->
        OutlineCompositePass(🔳OutlineCompositePass)
        end

    OutlineCompositePass
    -..->
    Out([🎥Camera Color Texture])
    
classDef default margin: 340px;
style Outline3DRenderFeature font-size: 10px, stroke-width:2px, stroke-dasharray: 10 10;
style OutlineCompositePass fill:#501099;
style Out fill:#109999;