# Introduction

## Jiffycrew Post Processs Line. This is not just an outliner.

We don't want this new asset pack is called "Outliner". While outliners only detect outlines of objects, **Jiffycrew Post Process Line** detects both outlines and rich interior feature lines of objects. To do so, it incorporates an advanced computer graphics feature line extraction technique introduced in the "**Suggestive Contours for Conveying Shape**" SIGGRAPH paper. The Suggestive Contour is a complex differential geometry mathematical definition to find view-dependent surface inflection points. Theoretically they are contours in nearby viewpoints, almost contours, and at the same time also the zeros of radial curvatures. In practice, this line is **effective to find lines along view-dependent valleys of surface wrinkles**. We believe our Jiffycrew Post Process Line firstly introduces this technique to game industry as an Unreal Engine 4 implementation.

![Differential Geometry Equations to define Suggestive Contours](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_fu8dkHfQEGUZxxDAW%2F-L_fuiuqOmtdwDz12imv%2Fsc.jpg?alt=media\&token=31422de4-ce6e-4889-8f45-d1bed998e188)

By incorporating this new line definition, Jiffycrew Post Process Line enables generating revolutionary line rendering images that provide an illusion of hand-drawing sketches by skilled artists. Please see below to compare ordinary outlining techniques that mostly uses silhouettes and creases (depth and normal discontinuities, respectively) and ours.

![Ordinary outliners (Silhouette + Crease)](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dm1oCdQzX70FBkike%2F-L_dmYrEJE5lpJehnPdw%2FStylizedVikings4.jpg?alt=media\&token=a77434b2-d351-470d-951a-43fed2e5872d)

![Jiffycrew Post Process Line (Silhouette + Crease + Suggestive Contour)](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dm1oCdQzX70FBkike%2F-L_dmaJ5U-KJfRrh9WPt%2FStylizedVikings5.jpg?alt=media\&token=37282d7a-0605-415d-aa47-38621f50f712)

![Ordinary outliners (Silhouette + Crease)](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dmz1DiAd8s9xoQuW_%2F-L_dn1lRoNDS7TwrFd7h%2FRevenent4.jpg?alt=media\&token=ffbf62d1-e8c5-4592-b3db-f6ebaa83aee4)

![Jiffycrew Post Process Line (Silhouette + Crease + Suggestive Contours)](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dmz1DiAd8s9xoQuW_%2F-L_dn48Zu_D5xKk53c-y%2FRevenent5.jpg?alt=media\&token=05850a56-e1d3-4906-852a-0293a956ba74)

{% hint style="info" %}
Click to see full resolution. Find more screenshots in our [screenshot chapter](https://jiffycrew.gitbook.io/jiffycrew-pp-line-ue4/screenshot).&#x20;
{% endhint %}

## Line-Augmented PBR: Rich Lines on top of PBR

Making an unique outlook is one very important aspect for successful game development. Imagine combining this rich line rendering technique with UE4's PBR. We show such rendering examples below. Find how the rich lines provide unique artistic feeling on top of realistic shading.

![Without lines](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dm1oCdQzX70FBkike%2F-L_dmI61oP0P18jrkGH8%2FStylizedVikings1.jpg?alt=media\&token=899dc684-650b-45d2-83c3-4492e5122254)

![With lines](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dm1oCdQzX70FBkike%2F-L_dmMIBYMmQ7Rc_bDjl%2FStylizedVikings3.jpg?alt=media\&token=9e3d1858-14f0-40fa-9e69-7a00d9c0b59c)

![Without lines](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dm1oCdQzX70FBkike%2F-L_dmRKdidxGiHvK1tZt%2FRevenent1.jpg?alt=media\&token=4c3b3e33-caf8-40c8-af9f-61a32372a956)

![With lines](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dm1oCdQzX70FBkike%2F-L_dmTEEd5CUdnGyJAWN%2FRevenent3.jpg?alt=media\&token=280142a0-2e85-4f1c-9ffe-8c77f3cd2507)

{% hint style="info" %}
Click to see full resolution. Find more screenshots in our [screenshot chapter](https://jiffycrew.gitbook.io/jiffycrew-pp-line-ue4/screenshot).&#x20;
{% endhint %}

## Redesigned User Experience of Line Application Process

**Jiffycrew Post Process Line** is a post process full screen effect. As a post process effect, we first designed it in a similar way to what others do. We tried to let users add a Post Process Volume, and then find blendables, and then assign post process material. We tried to let users move blending weight sliders to on and off the effect. We tried to let users make so many post process material instances to assign different scenes, and let users find and open each corresponding instance when they want to change the line style of specific scenes.

And it was really ~~mother father~~ cumbersome.

After we found it cumbersome, we threw away all the previous implementations and decided to make a new "one-click" method to apply lines and made it. With Jiffycrew Post Process Line, applying lines to your scene is simply done by dragging a blueprint actor class JiffycrewLineManager to your scene. All done.

![](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_dpzqh-LghR1ag59YO%2F-L_e0VDv4QBmmSfCnKBu%2Fdrag.jpg?alt=media\&token=072d1500-de16-4c78-9eee-45cec38d720c)

We also decided to make a single control panel for line control. Once added, the JiffycrewLineManager actor is what you only need to care. All the on/off switches, value sliders, color pickers, etc. are located there.&#x20;

![](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_fxM-xce65sdKuG2D4%2F-L_fyq41OEN3ftIrSpCW%2Fpanel.jpg?alt=media\&token=379d782b-d0f5-46dd-8154-86eb127a4307)

One subtle thing to mention. The render custom depth switch. People who have experiences of line extraction in UE4 all knows about it. After releasing our famous "Cartoon Rendering Pack" that has basic outlining function, so many people asked questions to us: why outlines are not shown? Yes. to draw lines, you need to click actors and turn their "render custom depth" switches on. We also tried to provide a better way to manage those actors that want to get lines. We tried tags, lists, and so on. And we gave up. Because all those approaches eventually need to touch the "render custom depth" switch which can also be used for other purposes. Touching them without letting users to know it, could open a hell gate.

The thing we did was, by default, the line rendering uses "scene depth" rather than "custom depth." So, when the manager actor was added, it just draws all the lines on top of all visible objects. Users who want to manage specific actors, then can turn on "Use Custom Depth" and do what they need to do.&#x20;

## Appearance Preservation along Depth Change

Implementing a complex mathematical definition itself is not a trivial task. Jiffycrew Post Process Line accurately implements several complex math formula for rich line drawing in the screen space using filtering. However, filtering is not everything for flawless high-quality line rendering in practice.&#x20;

After experiencing many public and commercial implementation of outliners, we found that the appearance of objects is dominated by lines when the object is zoomed out, showing distorted appearance. You can see a similar artifact below.

![](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_e3v4QPjzaHiI7vLUM%2F-L_e8f1-ktWhaeNpxuoM%2Fzoom-in.jpg?alt=media\&token=8411d923-5292-41c6-9a41-59b183533100)

![](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_e3v4QPjzaHiI7vLUM%2F-L_e7kUwZ94hboOOnAMQ%2Fzoom-out-1.jpg?alt=media\&token=4e40e1b6-c322-4fca-8e06-d1f15d122f73)

![Common artifact of ordinary outliners: The appearance is dominated by lines when zoomed-out. ](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_e3v4QPjzaHiI7vLUM%2F-L_e79c5H1BTYt9_Gnik%2Fzoom-out.jpg?alt=media\&token=34aa6da6-35a5-40dc-9d52-593544a19e90)

Jiffycrew Post Process Line solves this problem through adaptive control of multiple parameters along depth. See below to find differences from previous images. Users can turn on and off the "Depth Adaptation" switch to apply this effect.&#x20;

![](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_e3v4QPjzaHiI7vLUM%2F-L_e8xm9grgopjk2jXwd%2Fzoomout_ours1.jpg?alt=media\&token=680f9775-73cd-4a98-9605-63b1f6129c7a)

![](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_e3v4QPjzaHiI7vLUM%2F-L_e8xmA75lBzfgWe4uE%2Fzoomout_ours2.jpg?alt=media\&token=00e54399-c567-455a-a2d8-1a3bd0b2906a)

!["Depth Adaptation" Feature of Jiffycrew Post Process Line](https://1420268522-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_C7BQOT9azfGtKVJd6%2F-L_e3v4QPjzaHiI7vLUM%2F-L_e8xmB0bOGY63e3s0x%2Fzoomout_ours3.jpg?alt=media\&token=1337a318-59fe-426e-be81-9ad319bf5109)

This depth adaptation feature was firstly introduced in our "Cartoon Rendering Pack" for silhouettes and creases. We refined this beloved feature and also extended it to support suggest contours and highlights.

## More features/topics to discuss

We have many more features/topics to discuss. Honestly, implementing a flawless post process line material requires so many subtle things to handle. Below are several that we don't discuss or show samples here.&#x20;

* We support line coloring (different colors can be applied to different line types).
* We support to line blending with shading: line multiplication / linear blending.
* We support hidden line removal.
* We still support making post process material instances of our material
* We provide debug material instance for line analysis.&#x20;
* We have always improved our products based on users' feedback.
* And so on.



&#x20;
