Screen-space outline effect for Unity (FREE)

Hello Everyone!

I'd like to present free open source outline effect package:

• Github repository;
• Npm package;
• Documentation.

UnityFx.Outline implements configurable per-object and per-camera outlines. Both solid and blurred outline modes are supported (Gauss blur). The outlines can be easily customized either through scripts or with Unity editor (both in edit-time or runtime).

Implementation is based on Unity command buffers, compatible with Unity Post-processing Stack v2, extendable and has no external dependencies.

Supported outline parameters are:

• Color;
• Width (in pixels);
• Type (solid or blurred);
• Intensity (for blurred outlines);
• Depth testing;
• Alpha testing;
• Sprite outlines.

Supported platforms:

• Windows/Mac standalone;
• Android;
• iOS;
• WebGL;
  
• Other platforms (untested).

Outline example:


FAQ:

Q: When I enable the outlines, FPS drops significantly. What can I do to fix this?
A: There are several things to keep in mind:

• This is a screen space effect, it trades performance for outline quality.
• Each outline adds a full-screen pass, so the more outlines you use, the bigger is the performance hit. If you need to have large number of objects outlined, it might be better to search for non-screen-space outline implementation.
  
• Outline width significantly affects performance, make it as small as possible.

Q: What is OutlineLayerCollection?
A: It is basically an outline configuration of outlines used by the app. Each OutlineLayer in it contains outline settings + list of game objects using the settings.

Q: How do I add the library to my Unity project?
A: The library is published as NPM package. Please follow the instructions here. The is no Asset Store package.​

I hope the asset will be useful for someone!
Feedback is much appreciated.

 

Hello! Thanks for making this. It's pretty simple to use and produces really nice outlines. I do have a question though.

Is it possible to make the outlines respect the depth of objects in the scene? Or, at the very least, make it so outlines are occluded by certain designated objects? I'm making a third person game and I'd prefer it if the outlines weren't drawn on top of my main character's mesh. I tried changing the Ztest to LEqual in the outline shaders, but that just made the outlines render behind everything else in the scene.

Sorry if this is a dumb question! I'm still pretty new to graphics programming.

 

Hello @gehko. I have just published a release with depth testing support. You can download it via NPM or from github releases.

There are a number of optimizations and fixes in the release as well.

Added

• Added support for depth testing when rendering outlines. When enabled, outlines are only rendered around the visible object parts (#1).
• Added a few convenience methods to OutlineEffect.
• Added editor tooltips for outline component fileds.

Fixed

• Get rid of GC allocatinos during command buffer updates.
• Fixed compiler warning in post-processing compatibility package (0649).
• Fixed IndexOutOfRangeException when setting outline width to max value (#4).

Removed

• Removed change tracking support in package entities (#2).

 

Why 3 projects in the github? Why all the asset code in package? How can I integrate them into my project?I tried to put all the packages together, but it didn't work. I'm using HDRP

 

Hello @ANUBISKONG. Each of the github projects is focused on outline implementation for specific render pipeline (built-in, universal, high-definition and and post-processing). The asset code is placed in Packages folder, because this is the way Unity suggests for development of UPM packages. Please see the README for information on package usage (in short, all packages are added via Unity Package Manager).

That said, HDRP outlines are not supported yet. You can track the feature progress via watching corresponding issue. The next release will have URP support.

 

Thanks for reply, When will the next version be released?

 

It should be released soon. A few days, maybe weeks.

 

Finally, URP support is here! With a number of other improvements and bugfixes.

Added
- Added URP support (#5).
- Use procedural geometry (DrawProcedural) on SM3.5+.
- Added support for both forward and deferred renderers (built-in RP).
- Added ignore layer mask settings to `OutlineLayerCollection` (previously the ignore layers were specified when adding game objects to layers).
- Added `OutlineBuilder` helper script for managing `OutlineLayerCollection` content from editor (#8).

Changed
- Changed `OutlineSettings` to display enum mask instead of checkboxes.
- Changed inspector look and feel for `OutlineLayerCollection` assets.
- Merged shaders for the 2 outline passes into one multi-pass shader.
- `OutlineLayerCollection` doe not depend on `OutlineRenderer` now.

Fixed
- Fixed outline rendering on mobiles (#7).
- Fixed outline shader error on low-end devices.
- Fixed post-ptocessing implementation to require depth texture.

Removed
- Dropped .NET 3.5 support, minimal Unity version is set to 2018.4.
- Removed `IOutlineSettingsEx` interface.

As always, any feedback is welcome!

 

Support for transparent/semi-transparent objects. It creates lines inside a transparent objects when the opaque object is intersected.

 

Hello @Umresh, could you share more details please? Which render pipeline do you use? Which package/version? Code sample/screenshot of outline settings would also be very helpful.

If you are using OutlineEffect script, try changing RenderEvent value to AfterSkybox.

 

Hi @Arvtesh I'm impressed with this package so far, it's looking decent. I ran into one issue. My outlines are rendering on top of my worldspace UI, is there anyway to fix this? I'm using the unity Post Processing Layer on my Main Camera + the Outline Behavior script on my object.


I'm using the the built-in pipeline, 2018.4.23.

Perhaps it would work if there was someway I could remove the UI camera from this selection? The UI camera gets automatically added.

 

Hello @Dobalina. First of all, thank you for the feedback.

Please note, that both `OutlineBehaviour` and `OutlineEffect` components are not compatible with Post Processing stack v2 in general. They still might work in my experience, but changing scene setup or using another Unity/package versions might break it.

I just tested these components with overlay Unity UI. The problem appears to be related to `CameraEvent` used by the components. If set to `AfterSkybox`, everything looks good, higher values force outlines to be rendered over the UI (and this is the default I think). The problem is latest release of the library doesn't provide an easy way to set this parameter.

I'm going to address the issue in the next release.

 

Hmm I tried using setting to Outline Effect to AfterSkybox though I'm still seeing outlines ontop of the worldspace UI. I'm curious if you tried it with a two camera setup? That being, a MainCamera to render everything except the UI layer + a sub camera that only renders UI layered objects.

Not sure if this is of any help, but it looks like I'm also double rendering outlines. Once for my MainCamera and again for my sub UI camera. I can see the outlines in the maincamera are properly rendering behind the worldspace UI, though the outline is rendering again in the UI. Not sure if this is part of the issue or expected behavior.


In this image I purposely offset my UI camera + a worldspace UI object to showcase this.

 

Yes, outlines are supposed to be rendered by all cameras (for OutlineBehaviour). OutlineEffect is for per-camera outlines. That said, I've added ability to set the only target camera for OutlineBehaviour. The code is pushed to develop, this fix is scheduled for the next library version.

 

hello this is my feedback)
Doesn't work on Android, although everything works in the editor (2020.1f2) ...

 

Hello @Stein_69, thank you for the feedback. Could you please be more specific:

• Which render pipeline are you using?
• Is there Unity post-processing stack in your project?
• Which outline tools do you use?
• Is there anything useful in logcat trace?

 

Hi @Arvtesh,

first of all: This is an amazing asset! Thanks for sharing this!

Although I've stumbled across a problem, trying to implement your package into my URP XR Project.
When using the outline effect in VR, the outline gets only rendered on the left eye. Although the shader seems to calculate both outline for the left and the right eye, but composes them both into the left eyes image.


I'm not very familiar with shader programming but I think it might be a problem with the outline shader.
I've tried to make the shader SinglePassInstancing compatible as mentioned in the Unity Docs. But I couldn't figure out how to fix this.
Do you have any idea or hint for me?

 

Hello @TobySch, thank you for the feedback! Which XR platform do you target? Most likely it is either a problem with shader or a bug in `OutlineRenderer` implementation. If you can share more details, I might be able to help.

 

Hey @Arvtesh. Thanks for your quick response.
I'm mainly targeting WMR and OpenVR but also Oculus in the future. All the platforms should be supported by URP, I guess.
I'm using Unity 2019.4.8 with URP v7.4.3 and XR Management v3.2.13. I'm also using your URP Render Pipeline integration.

I think I've tracked down the issue to the outline shader. It seems like the shader is not Singe Pass Instanced compatible.
When switching back to the old (build in) XR Management using 'SinglePass' as stereo rendering mode it all works fine on both eyes.
But the new 'XR Plugin Management' package forces you to use 'SinglePass Instanced' as rendering mode, what seems to cause the issue.

Since the unity examples are somehow different in structure to your shader code, it is very difficult for me (as a shader noob) to fully understand what's going on there
There is an example at the bottom of this Article which also handles 2D textures as screen space effect in Stereo mode. Similar to how the outline shader works (right?).

Thanks for your support!
Cheers Toby

 

@TobySch I've made a few fixes to outline shaders. They are not piblished yet. Could you get latest Outline.shader from develop branch and see if it fixes the instancing issue?

 

Thanks @Arvtesh for your quick response. But still no Luck.

 

Unfortunately I don’t have a VR device, therefore I cannot test my changes and fix the problem quickly. If there is anything else I can help you, please don’t hesitate asking here or create an issue on GitHub.

 

Don't worry. Thanks for your support! I'll give an update, if I make some Progress.

 

First of all, congratulations for an awesome asset!

I'm triying to achieve Outline effect with PostProcess on Android/IOS. In the editor work like a charm (The best in terms of performance), but when I try in Mobile devices make me a lot of artifacts:

Without Postprocess work perfectly fine, seems like an error in the Postprocess Adaptation with mobile compilation.

Thank you very much!

 

Hello @Hukha, which post effects do you use? Is there anything useful in logcat? Is it Andoid or iOS (or both)?

 

We are using Ambient occlusion, Bloom and Vignette. But without any of these active, still no work the outline with the "Outline" Effect in the Post-process Volume.
Anything useful in logcat, sorry.
The issue it's on both platforms.

Thanks!

 

@Hukha there appears to be an issue with outline procedural rendering. Until the fix is available please set OutlineResources.UseFullscreenTriangleMesh to true. This should resolve the issue (at least this fixed it for me).

 

I will try it, thank you!
(I will update with the state)

 

Hi @Arvtesh

Thanks for making this and sharing it with everyone
I'm trying to achieve a simple outline effect when the mouse is over an object but I have a problem. I attached the Outline Effect to my main camera and the Outline Behaviour to the object I wanna have outlined but the object is not outlined. I saw that, for some reasons, the "Cameras" list inside the Outline Behaviour is empty, even if the main camera has Outline Effect. If I add the object inside the layer of the main camera's Outline Effect using a script, it works but I expect the Outline Behaviour to do that, right ?
I'm using Cinemachine and URP.

Let me know if you need more details.

Thanks!

 

Hello @alexutzblue, first of all, OutlineEffect and OutlineBehaviour are not compatible with URP. Please use dedicated package. For built-in rendering you need either OutlineEffect or OutlineBehavior, not both. Hope this helps.

 

A new release of the library has just been publised with a number of fixes and improvements. Thanks for all your great feedback!

Added

• Added support for alpha-testing (#10).
• Added support for merging outline layer objects (#12).
• Added RemoveGameObject helper method to OutlineEffect (#15).
• Added ability to customize render event in OutlineBehaviour.
• Added ability to render outlines to the specified camera only for OutlineBehaviour.
• Added warning for unsupported render pipelines for OutlineBehaviour and OutlineEffect.

Changed

• Misc inspector improvements.
• Changed default render event to AfterSkybox.

Fixed

• Fixed incorrect condition for selection of render method, which sometimes caused problems with outline rendering on mobiles (#14).

 

Hey @Arvtesh ! I Setupped your package for URP in my 2020.2.0b5 project but I can't get it to work.
Depth texture is activated, created a layer collection but can't see it in game and scene view.

 

Same here. I've tried to use it on URP (Unity 2020.1.3f1) but it just doesn't work. Seems like

_feature.OutlineLayers.GetRenderObjects(_renderObjects);

from OutlinePass.cs file doesn't gather any render objects at all. Why is that?

Edit: I've debugged the code and it seems like objects have to have OutlineBuilder component set for outline to appear.

 

Hey @sleepyGrin, did you add the game objects you want to outline to the layer collection? This can be done with scripts or using OutlineBuilder component.

 

Exaclty, the layer collection only contains outline settings when the app starts. To apply these settings to game objects, you should add them to corresponding layer with scripts. Another option is to use OutlineBuilder component (which actually does the same).

 

So I've been playing around with the asset and I must say it's great!

I have run into some issues, however. It seems like the outlines keep rendering over my dynamic objects and changing the render event doesn't help (in fact it can only make it worse, check the screenshot). I'm using the built-in renderer with these settings. Any suggestions?

Also, I've been playing around with the ignore layers function but it doesn't seem to do anything.

 

Hello @MyReallyLongName, which object do you attach OutlineBehaviour to? The intended behaviour for it is to outline all renderers on the GameObject it is attached to and its children, excluding renderers in IgnoreLayers layer. In other words, if you want the ball to be outlined, you should attach OutlineBehaviour to its GameObject.

P.S. Outlines ignore depth testing unless you choose corresponding render flags in Outline Settings.

 

Hi, just tried it in URP in Unity 2020.2.0b6 and it does not seem to work. I've tried the example in 2019.4 (with URP) and it did work correcly but the same example does not work in 2020.2

 

@slimshader thank you for the feedback, I’ll look into this as soon as I have time. Does it work for you in 2020.1?

 

Will install and check

Update: It indeed works in 2020.1 but the problem might be related to something else: Unity 2020.2 uses URP 10.0.0-preview.26 and there is no way to downgrade to non-preview

 

Hi! I'm using URP and tried to set up the package:
I installed both the general and the URP package, added the Scriptable Render Asset to the ForwardRenderer. I tried looking into the Readme to find out what to do next, but I'm at a loss... Sorry for the dumb question but what do I have to do now to make certain objects outlined?

 

Hey @slimshader, I've not looked into the issue yet (hopefully I'll have time on the week-end). But here's a discussion of similar issue: https://forum.unity.com/threads/custom-renderer-features-broken-on-10-0-0-preview-26.980541/. I'll make an update when I have more info.

 

Hello @zOrcGames, to enable outlines in URP, you have to do the following:

1. Install the com.unityfx.outline.urp package;
2. Add OutlineFeature to URP render features list (this asset is called UniversalRenderPipelineAsset_Renderer, press Add Renderer Feature button in its inspector and then select Outline Feature);
3. Create an OutlineLayerCollection asset and assign it to the OutlineFeature created in the previous step (right mouse click on a folder in Project view, then Create/UnityFx/Outline/Outline Layer Collection);
4. Setup at least onle layer in the OutlineLayerCollection created;
5. Using scripting, when app starts, add game objects that should be outlined to the OutlineLayerCollection (you can use OutlineBuilder component for this purpose to avoid writing any code).

Hope this helps, if you have any more questions, please don't hesitate to make another post here or create an issue on Github.

 

@Arvtesh Thanks! This works like a charm.

 

Hay, did you have time to take a look? Or is it up to Unity to fix URP?

 

Hey @slimshader, I was quite busy at the office, sorry for the delay. This is indeed a problem with the library (caused by some changes in URP core). The fix is quite trivial, so you can do that yourself of wait for next version. I've added a github issue for it. You can track progress by the issue state.

 

Hey! Just tried the asset from the github repo and outline works correctly now, thanks There is still small problem tho: OutlineBuilder is causing NullReferenceException:

Code (CSharp):

1. NullReferenceException: Object reference not set to an instance of an object
2. UnityEditorInternal.ReorderableList.get_count () (at <b39c8a57494f4bd1bf11d6afae39993d>:0)
3. UnityEditorInternal.ReorderableList.GetListElementHeight () (at <b39c8a57494f4bd1bf11d6afae39993d>:0)
4. UnityEditorInternal.ReorderableList.DoLayoutList () (at <b39c8a57494f4bd1bf11d6afae39993d>:0)
5. UnityFx.Outline.OutlineBuilderEditor.OnInspectorGUI () (at Assets/Plugins/UnityFx.Outline/Editor/Scripts/OutlineBuilderEditor.cs:113)

 

I use URP, how to add and remove GameObject to "outline layer" from code?
OutlineBuilder work nice but it just for debuging in editor?

 

I observed the same error I just pasted OutlineLayerCollection.asset into "Outline Layers" and this error disappeared

 

Hello there, you can use OutlineLayerCollection scripting interface to add or remove game objects to/from layers. Outline builder is more a ‘quick start’ solution. Hope this helps.