Controlling the Shape of Outlines

What are Outlines and Strokes?

Outlining is an important factor in making a character look hand-drawn:

A Stroke is changes in width or color from the beginning to the end of a outline. The physical reason for the formation of Strokes is the change in pressure of the pen tip on the paper:

No strokes, outline with fixed width	With strokes, the starting and ending points are finer

Outlines with consistent width are easier to achieve, while outline with strokes are more difficult to achieve. Whether or not there are strokes is a key factor in making the outlines look more like hand-drawing. Therefore, whether strokes can be automatically generated has always been a watershed in outline technology.

There are also different types of strokes:

Implementation Methods of Outlines and Strokes

Below are some ways to implement outlines and strokes. 

MooaToon implements the ** Outer Outline** and Inner Outline mentioned in GUILTY GEAR's sharing :

- Outer Outline

Outer outline refers to the outline on the outside of the model, which is the "Outline" type in the picture above. After rendering the character, the back model of the character is rendered again, and at the same time it is extruded along the normal direction. This is the most classic and also used the most widespread outline technique.

The disadvantage of this technique is that the normals used for extrusion must be smooth, otherwise the outline will be broken at the hard edge. Moreover, the outline type is single and there are not many details.

GUILTY GEAR uses the vertex color as the outline width to simulate strokes locally:

Outer outline with stroke	Vertex color used to control outline width

No width adjustment at shoulders	With width adjustment at shoulders

The Unity Chan in the example was drawn vertex colors in Houdini:

tip

You can also draw vertex colors in DCC software such as Blender or Maya.

Draw Vertex Colors to Control Outline Width

Left: Before adjustment; Right: After adjustment

After the previous tutorial, you should be familiar with the process of baking vertex data in Houdini.

To add width-controllable outlines to your own model: 

1. Select and enable the attributePaint_face_vertexColor_alpha node.

2. Click Reset All Changes

3. Select the Group to draw 

4. Choose the Lighting Mode you think is appropriate

5. Press Enter to enter drawing mode, follow the instructions in the upper left corner to draw Alpha on the model, pay attention to the value of FG:

6. Display the mooa_outlinePreview node, select the attributePaint_face_vertexColor_alpha node, then enable material display to draw and preview the stroke in real time:

7. After drawing is complete, export the model using the OUTPUT_FBX or OUTPUT_OBJ node, and import it into UE.

Set the stroke according to the previous tutorial.

Then enable Use Vertex Color A as Outline Width in the outline material, and you will see the modified result:

FAQ

Bad Outline Shape

The principle of this outline is to extrude the mesh outwards and render only the back face as the outline.

The following reasons may lead to bad outline shapes:

• Incorrect Normals/UVs, or missing these data. Solutions:
  • Ensure that the mooa_bakeSmoothedNormalToUV34 node is connected before the mooa_dataInit node.
  • Ensure the input mesh has correct Normals and UVs. 
  • You can check all geometric properties in the Geometry Spreadsheet panel.
• Single-sided meshes may cause outlines to suddenly break at the mesh boundaries. Solutions:
  • Avoid using single-sided meshes. 
  • Set the outline width to 0 at the boundaries of single-sided meshes. 
• Complex multi-layer meshes that are very close together, and outlines that are too thick, may cause some outlines to suddenly appear or disappear. Solutions:
  • Reduce the outline width in complex structures. 
  • For structures like cloth that use physical simulation, ensure the outline width is less than the collision radius. otherwise, the outlines may penetrate the mesh.
  • Avoid overlapping/crossing complex topologies at close distances. 
  • Use inner outlines instead of outer outlines in complex structures. 
• The input mesh contains polygons with more than three edges. When UE imports the mesh, all polygons will be converted to triangles, which may result in inconsistencies with Houdini. Solutions:
  • Use the Divide node to convert to triangles before processing the mesh.

Alembic

Although Houdini can export multiple UV channels through Additional UV Attributes when exporting Alembic, UE does not support multiple UV channels when importing Alembic as Geometry Cache.

Since Alembic is usually only used for offline production or cutscenes, you can export the outline mesh generated by the mooa_outlinePreview node to UE. Also, ensure that the Compressed Position Precision in the import settings is small enough.

- Inner Outline 

In contrast to outer outline, inner outline is usually directly painted on the texture. Inner and outer outline can complement each other to achieve beautiful outline effects.

The advantage of this method is that it is simple and controllable, but due to the resolution limit of the texture and the usually fine outline, blurring and aliasing may occur when observed up close.

These methods can reduce blurring and aliasing without increasing the texture resolution:

- Homura Style Line

In GUILTY GEAR, Honmura C. Junya (本村・C・純也) proposed a method called the "Homura Style Line" which can achieve perfect inner outlines at any distance without resolution limitations through special UV layout and textures:

Inner outlines drawn on textures using conventional methods	Inner outlines by Homura Style Line

UV and textures of the Homura Style Line	Viewing the Homura Style inner outlines from a distance	Viewing the Homura Style inner outlines up close

UV and textures using conventional methods	Viewing conventional inner outlines from a distance	Viewing conventional inner outlines up close

This method can achieve high-precision inner outlines without relying on rendering algorithms, is compatible across different engines and renderers, but requires a significant amount of work from artists.

- SDF Anti-Aliasing 

Another method is to convert the inner outline texture of the conventional method into an SDF texture to improve accuracy and width control, similar to high-precision text rendering based on SDF.

MooaToon does not currently support this method. 

- Post-Processing Outlines 

The post-processing outlines is calculated by convolving the Depth/Normal/Color Buffer in screen space.

The advantage is that it works in full screen, the performance overhead is independent of scene complexity, and it is possible to implement almost any type of outline.

The disadvantage is the difficulty in precisely controlling local outlines. 

If you need precise control over outline visibility and width, you need to do some additional development on the rendering pipeline, such as Ni no Kuni (CG world 2018-06):

Base color	Vertex color	Mesh ID	Areas with abrupt changes in vertex color are detected as outlines

Currently, you can directly obtain post-processing outlines through plugins, such as:

• Post Process Hand Draw Outline
• Stylized Post Process Material Pack vol.1

- Pencil+

Pencil+ is a commonly used outline plugin in the film industry, representing the highest quality, controllability, and ease of use in the industry.

However, it can only be used for offline purposes and currently has no UE version. 

- Other Cutting-Edge Technologies 

In recent years, some new technologies have emerged in academia, such as real-time stroke with brush, neural network-based stroke, etc.

But it will take some time before they are implemented in the industry.