Table of Contents

🔳 CosterGraphics.Systems.OutlineSystem


🧑‍🎨🧑‍🎨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

    classDef default padding:30pc
    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

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 Outline3DRenderFeatureBasicRenderPasses["Render Pass Execution Order"]
    direction TB
        Outline3DRenderFeatureBasic(
            Outline3DRenderFeatureBasic 
            <p align = 'right'>🧑‍🎨🧑‍🎨</p>
        )

        OutlineColorMaskPass(
            ⬜<b>OutlineColorMaskPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMask.jpg' 
            />
            <div align = 'left'>
            <b>Requires Shader</b>:
            <i>Outline3DSimple-Msk-ColorTextureMask-Default.shadergraph</i><br/>
            <b>Produces</b> :
            ⬜Texture2D_OutlineColorTextureMask
            </div>
        )

        OutlineColorMaskDepthTestedPass(
            🧱<b>OutlineColorMaskDepthTestedPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineColorMaskDepthTestedPass/CosterGraphics-Systems-OutlineSystem-OutlineColorTextureMaskDepthTested.jpg' 
            />
            <p align = 'left'>
            <b>Requires Shader</b>:
            <i>Outline3DSimple-Msk-ColorTextureMaskDepthTested-Default.shadergraph</i><br/>
            <b>Produces</b>:
            Texture2D_OutlineColorTextureMaskDepthTested
            </p>
        )

        OutlineCameraColorCopyPass(
            <b>📸OutlineCameraColorCopyPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/CameraColorCopyPass/CosterGraphics-Systems-OutlineSystem-CameraOpaqueTexture.jpg' 
            />
            <p align = 'left'>
            <b>Requires Shader</b>:
            <i>None</i>
            <b>Produces</b>:
            Texture2D_CameraOpaqueTexture
        )

        OutlineDepthMaskPass(
            <b>⬛OutlineDepthMaskPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineDepthMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineDepthTextureMask.jpg' 
            />
            <p align = 'left'>
            <b>Requires Shader</b>:
            <i>Outline3DBasic-Msk-DepthTextureMask-Default.shadergraph</i><br/>
            <b>Produces</b>:
            Texture2D_OutlineDepthTextureMask
            )

        OutlineNormalsMaskPass(
            <b>🟦OutlineNormalsMaskPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineNormalsMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineNormalsTextureMask.jpg' 
            />
            <p align = 'left'>
            <b>Requires Shader</b>:
            <i>Outline3DBasic-Msk-NormalsTextureMask-Default.shadergraph</i><br/>
            <b>Produces</b>:
            Texture2D_OutlineNormalsTextureMask
        )

        OutlineUVMaskPass(
            <b>🟩OutlineUVMaskPass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineUVMaskPass/CosterGraphics-Systems-OutlineSystem-OutlineUVTextureMask.jpg' 
            />
            <p align = 'left'>
            <b>Requires Shader</b>:
            <i>Outline3DBasic-Msk-UVTextureMask-Default.shadergraph</i><br/>
            <b>Produces</b>:
            Texture2D_OutlineUVTextureMask
        )

        OutlineCompositePass(
            <b>🖼️OutlineCompositePass</b>
            <img 
                src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-FullScreenCompositeContour.jpg' 
            />
            <p align = 'left'> 
            <b>Requires Shader</b>:
            <i>Outline3DBasic-Cmp-Contour-Depth&NormalsEdge.shadergraph</i>
            &lpar;Or any other Basic or lower tier Composite shader&rpar;
            <b>Produces</b>: 
            The final composite image
        )
    end
    subgraph Output[Output]
    direction TB
        Out(
            <b>🎥Camera Color Buffer</b>
            <img src='../../../../../images/articles/Systems/OutlineSystem/RenderPasses/OutlineCompositePass/CosterGraphics-Systems-OutlineSystem-FullScreenCompositeContourFinal.jpg'/>
        )
    end

Outline3DRenderFeatureBasic --> OutlineColorMaskPass --> OutlineColorMaskDepthTestedPass --> OutlineCameraColorCopyPass --> OutlineDepthMaskPass --> OutlineNormalsMaskPass --> OutlineUVMaskPass --> OutlineCompositePass ===> Out

style Outline3DRenderFeatureBasicRenderPasses stroke-dasharray: 10 10, stroke-width:2px;
style Outline3DRenderFeatureBasic       fill:#109999;
style OutlineCompositePass              fill:#501099;
style Output                            stroke-dasharray: 10 10, stroke-width:2px;
style Out                               fill:#109999;

%% Adds a padding to the default node class to make all the nodes the same size
classDef default padding: 20pc;