Skip to main content

Outlines ✏️

Add outlines to the screen either via image processing (Colour-Based) or depth processing (Depth-Based).

tip

There is a little preview in the shader editor to help you visualize the different options in Outlines!

Colour versus Depth​

At the top of the properties, there is a bar with two buttons: Colour-Based (Skinny) and Depth-Based (Thick). You can switch by clicking the two buttons, and to ensure that you are using Depth-Based (Thick), you also need to set Style to Depth (all the rest use Colour-Based).

Colour-Based:​

  • Treats the screen as a flat, 2D image.
  • Much faster on the user's GPU.
  • Has only thin lines before the outline starts to look sharp.
  • If there is a painting on the wall on the user's screen, all of the edges in it will be outlined, because there is no 3D consideration and we are finding 2D edges.

Depth-Based:​

  • Treats the scene as 3D objects.
  • Heavier on the user's GPU.
  • Can make very large, thick lines (and support Shader Options 🥺 -> Quality) at the expense of being more intense on the user's GPU.
  • If there is a painting on the wall on the user's screen, the edges won't be outlined because it is a single 3D object. Instead, June will find where edges of meshes are instead of where the edges of colours/pixels are.
warning

Because Depth-Baseduses Depth, you will need a Depth Light if you are using it (not if you are using Colour-Based). Similarly, it may only preview properly in play mode. See Recurring Settings ♻️ -> Depth for more information.

TL;DR: Choose colour-based if you only need a thin outline, want one of the special effects it can do (ex. dual sobel), and/or performance is a priority. Choose depth-based if you want a thick outline, want one of the special effects it can do (ex. vibe), and/or quality is a priority.

Colour-Based Styles​

  • Sobel, Laplacian, Prewitt, Kirsch, Average, Minimum, Maximum, Comparison: The most basic, thin outline. What you probably have seen before with other post-processing outlines. Each is a different algorithm that prioritizes different things and will look slighlty different. When in doubt just go with Sobel.
  • Dual Sobel: Two outlines with independent controls and colours.

Colour-Based Settings​

Outline Options​

  • Colour One: The colour of the outline.
  • Opacity One: The opacity of the outline.
  • Width: How spread out the outline is.
  • Tolerance: How much of a difference in colour is needed to be considered an edge (higher value = more edges).

Distortion​

  • Style: Smooth will distort the outline in real-time (like a normal distortion), while Sketch will distort the outline every x frames where x is determined by Speed (like a hand-drawn animation).
  • Power: How much the outline is distorted.
  • Speed: How fast the outline is distorted.

Effects​

  • Pixel: Makes the outline pixelated.
  • Glitch: Adds a glitch effect to the outline.
  • Noise: Adds noise to the outline (makes it fuzzy).
  • Background Opacity / Colour: The opacity and colour of the background behind the outline (for instance, if the outline is white and the background is black, you will only see the white outline on a black background).
  • Rainbow Opacity: Make the outline rainbow! Please see Recurring Settings ♻️ -> Rainbow for information on how to control the rainbow.

Offsets​

  • Zoom: Brings the outline (not the whole screen) closer or further away.
  • Angle: Rotates the outline.
  • Offset X / Y: Moves the outline left/right or up/down.

Dual Sobel​

If you are using Dual Sobel, you will have two sets of (most of) the above settings. The first set is for the first outline, and the second set is for the second outline.

Depth-Based Settings​

Outline Options​

  • Colour One: The colour of the outline.
  • Opacity One: The opacity of the outline.
  • Glow: How "smooth" the outline fades out. For instance, a lower value will have a strong colour on the inside of the outline and slowly fade out to nothing on the edge of the outline. A higher value will have have an instant cut-off from the outline to nothing.
  • Width: How spread out the outline is.
  • Outline Spread: How spread out the following effects are across the outline. For example, it would control how the Gradient effect is spread out across the outline.

Aura​

Aura will cut off portions of the outline, making it look wavey and flowing - think about it like an anime character's aura when they are charging up!

  • Aura Style: Enable or disable the effect.
  • Aura Scale: How big the holes in the outline are (ex. a higher value will make the outline look more wavey, while a lower value will make it look more like a few big blobs).
  • Aura Threshold: How much of the outline is cut off (ex. a higher value will cut off more of the outline, while a lower value will cut off less).

Vibe​

Adds an animated rainbow effect to the outline. The rainbow moves from inside the outline to the outside of the outline. I really like this effect!

  • Vibe Opacity: How much the rainbow should show up on top of the outline's colour.
  • Vibe Steps: How much of the outline each colour of the rainbow takes up. This takes Outline Spread into account!

Gradient​

Adds a gradient from the inside to the outside of the outline.

  • Gradient Style: Repeating will show the gradient multiple times across the outline, while Linear will show the gradient once.
  • Gradient Steps: How many times the gradient should repeat across the outline (only applies to Repeating). This takes Outline Spread into account!
  • Gradient Colour One, Two: The colours of the gradient.

Threshold​

Threshold makes the outline have a gap between the outline and the object it is outlining. For example, a Threshold Low of 0.2 and a Threshold High of 1 will add a small gap.

  • Threshold Style: Enable or disable the effect.
  • Threshold Low: How much of the outline is cut off on the inside - think of it like a starting point for the outline.
  • Threshold High: How much of the outline is cut off on the outside - think of it like an ending point for the outline.

Electric​

Cuts the outline into thin, wavey lines that represent electricity/static/energy.

  • Electric Style: Enable or disable the effect.
  • Electric Scale: How big the static lines are (a higher value makes more small lines).
  • Electric Threshold: How many static lines should be present in the outline (a higher value makes more static lines).
tip

Combine Electric with a blue colour and a high Electric Scale for a cool electricity effect!

Ethereal​

Ethereal maps out a moving, pastel rainbow across the outline.

  • Etheral: How big the rainbow should be (a higher value means more colours will be present across the outline). Set to 0 to disable the effect.

Distortion​

  • Style: Smooth will distort the outline in real-time (like a normal distortion), while Sketch will distort the outline every x frames where x is determined by Speed (like a hand-drawn animation).
  • Power: How much the outline is distorted.
  • Speed: How fast the outline is distorted.

Effects​

  • Pixelation: Makes the outline pixelated.
  • Glitch: Adds a glitch effect to the outline.
  • Noise: Adds noise to the outline (makes it fuzzy).

Offsets​

  • Zoom: Brings the outline (not the whole screen) closer or further away.
  • Angle: Rotates the outline.