Guilty Gear Toon Line Control Techniques [ENG ver.]

Drawing beautiful lines in 3D Guilty Gear Series Toon Line Control Techniques

About today's lecture Screenshot OK SNS posting OK

Lecture Overview The Basics and Applications of Inverse Hull Method “Inverse Hull Method” is a technique for creating toon-like outlines. Even though it has a history of over 20 years, it remains to be a practical and effective method that continues to be used in the frontlines of game development, even to this day. Ever since GUILTY GEAR Xrd, we have been using this technique for all our flagship fighting game series. While it indeed is a highly popular and established technique, it still seems that many users of this technique use it without completely understanding its fundamental logic. In this session, we will cover the following: -Basics of Inverse Hull Method, and the logic of what makes it work. -Frequently encountered problems and their corresponding solutions. -Practical applications of the method, used in our games. By the end of this lecture, we hope that modelers and shader artists will have the knowledge needed to effectively apply this technique and get better visual results. This lecture is for: ・Modelers interested in anime-style character modeling ・Shader creators interested in creating anime-style visuals

Speaker Profile Motomura, C. Junya Arc System Works Co., Ltd. Lead Modeler / Technical Artist / etc. Originally a modeler, wanted to write shaders, so he became a technical artist. Job role include modeling, rigging, creating shaders, and giving lectures. Currently in charge of technical art support, R&D, and training future modelers. Representative works: GUILTY GEAR Xrd Series Lead Modeler / Technical Artist DRAGON BALL FighterZ (B andai Namco Entertainment) Director / Modeling Supervisor / Technical Artist DNF Duel (Nexon) Shaders and Rig Basis Development / Modeling Supervisor

Topics PART 1: Contour Lines and their roles PART 2: Major Contour Line techniques – pros and cons PART 3: Drawing Contour Lines using Inverse Hull Method PART 4: Using Multi-pass Shaders for Inverse Hull Method PART 5: Applications of Inverse Hull Method in GG Series PART 6: Special Inverse Hull Techniques in GG Series

Foreword Content is meant for Beginners to Intermediate level shader knowledge This lecture will not go through code/programming details for Inverse Hull shaders. Instead, we are focusing more on “What is happening”, “How can we apply this” and etc. for a more practical knowhow approach. As such, we hope that new modelers and shader artists should be able to understand and follow through this lecture. On the other hand, we also have some frequently encountered issues and solutions from using the technique, so moderately-experienced users should also benefit from this lecture. Non-dependent on specific engines/3D software Inverse Hull Method is a highly applicable and popular technique that can be applied in almost all sorts of 3D software and game engines. As such, the contents covered in this lecture is not restricted to any specific software. We may use Unreal Engine to show examples, since we developed the Guilty Gear series in the engine, but the fundamentals behind our implementation would be applicable almost in any modern engine or 3D software. The talk will be fast-paced We have a total of 79 slides, so we need to be quick. These slides will be made available so don’t worry about taking detailed notes.

Part 1 Contour Lines and their roles

Contour Lines: With, and Without

Contour Lines for differentiating A & B The presence of contour lines helps differentiate the character from the background, as shown in this example. Focusing our attention on the character’s right shoulder, we can see that the white clothing may blend with the background’s whiteness, but the presence of the contour line helps separate it visually. In essence, the human’s eye works better at separating different elements if they are segregated by lines.

Which is more eye-catching to you?

What exactly is a "contour line”? A tool for “Emphasizing” There is a common practice to place emphasis on things by making its edges stand out. Advertisements on magazines, newspapers, websites often tend to outline their messages with double(sometimes triple or more) outlines to make them more striking, impactful and attention grabbing. This is exactly what Contour Lines do. Emphasize, Exaggerate, Punctuate, and make things Stand out.

Summary We’re not biologists so we can’t tell for certain why, but the human eyes seem to catch differences easier with the presence of contour lines. As such, we can see this almost everywhere in the daily applications of fonts, pictures, diagrams and everything else where contour lines have been applied. Naturally, this also applies to games. In fact, in fast-paced games where players need to make split-second differentiations between two objects, contour lines are a very effective tool to help with that.

Part 2 Major Contour Line techniques the Pros and Cons

Major Contour Techniques Post Process Outline Uses post process shaders to compare neighboring pixel data with parameters such as depth and normals to determine edges, then draw those edges with a set color. Inverse Hull Method Uses vertex shaders to draw a duplicate of the mesh that is inverted and made slightly bigger to create the illusion of contour lines. In this session we will be elaborating more on this technique.

Post Process Outline Overview A post-processing shader is a shader that is applied across the entire screen. This method compares the already-drawn pixel data with its neighbors one by one, comparing their depth and normals. When the differential value exceeds a set threshold, the shader determine that spot to be the “Edge” and draws a color resulting in a line. Merit ・Evenly distributed, constant load and quality for the entire screen. ・Capable of maintaining constant line thickness despite different camera positions/distances. ・Able to draw lines where two meshes intersect. Disadvantage ・Inflexible to adjust line thickness and color for each part separately. ・Ultimately a post-process, making it difficult to check and verify inside the 3D modeling software, much less making fine tunings. ・A universal effect that is applied evenly across the entire screen, thus making fine adjustments like intentionally omitting specific lines or drawing extra lines difficult.

Inverse Hull Method Overview An unorthodox method that expands and inverts a copy of the same object, overlapping each other, letting the protruding portion function as a contour line. Often done by drawing the same mesh twice and using the Vertex Shader. Merit ・Easy to define where you want or don’t want the lines to be present. ・Easy to adjust the thickness and color on each area or vertex. Disadvantage ・More processing load if there is too many objects displaying contour lines. ・Dedicated effort required to maintain the desired thickness for all contour lines in all situations. ・Mesh Intersections do not produce contour lines.

Why Inverse Hull Method? (For Guilty Gear series) Ever since “GUILTY GEAR Xrd” series, Arc System Works branded 3D fighting games have all used the Inverse Hull Method. The reason for that is: ●Wider range of expressions with contour lines Using custom made shaders we were able to control the width and colors of the outlines, even turning them off completely on a per-vertex bases for the entire mesh. This made it much more viable for tuning the “Anime” look we were pursuing. ●Able to modify and render directly in 3D software This allowed us to easily display the model in their intended final form while modeling and animating. With visuals equivalent to what will be displayed in the final product, it allowed us to correct and modify to greater fidelity.

Part 3 Drawing Contour Lines using Inverse Hull Method

How it began The “Inverse Hull Method” was first introduced by SEGA in the year 2000, via the title “JET SET RADIO”. Minor implementations and applications may have differed over the years, but the basic concept remains the same over 20 years later, and is still widely used in many games today. ©SEGA (2000) "JET SET RADIO" (Dreamcast)

Inverse Hull Method – Fundamentals: Front and Back 1 All polygons have a “front” and a “back” side. Often, polygons are set to only display their “front” sides, so when the camera enters inside the mesh, the back facing polygons are no longer displayed. You can see the polygons’ “front” sides from outside the mesh. Upon entering inside the mesh, you’re now viewing the polygons from the “back”, thus they do not display. GIF

Inverse Hull Method – Fundamentals: Front and Back 2 You can choose in your shader settings how you want to display your polygon mesh: “Front only”, “Back only”, or “Both”. “Front only” will only display polygons outside “Back only” will only display polygons inside “Both” will display the polygons for both sides

Inverse Hull Method – Fundamentals: Front and Back 3 This is a look of a polygon mesh set to “Front Only” display, coupled with a bigger mesh set to “Back Only. Front Only Back Only Combined With this simple technique, you have the basis for the logic of the Inverse Hull Method.

Inverse Hull Method – Fundamentals: Front and Back 4 Let's say we have two identical meshes overlapping, with one of them set to display "Front only" and the other expanded slightly and set to show “Back only". The part where the second mesh is protruding from the first will remain visible forming “Lines”. This is the basic principle of the Inverse Hull Method. This part becomes a “Line” Front Back GIF camera From the camera’s perspective, the protruding part is visible, which could be used as “Lines”

Inverse Hull Method – Fundamentals: Vertex Normals How do we derive a “slightly bigger mesh” you might ask. What we do is take the original mesh and move all the vertices in the direction of their Vertex Normals. A Vertex Normal is basically the representation of the direction each vertex is facing. Think of it as the “direction” each vertex is facing. Moving the vertices in the direction of the normal will give you an expanded shape based on the original mesh.

Inverse Hull Method – Fundamentals: Duplicating Meshes When making a larger mesh, we could simply duplicate the mesh in the 3D software, and then tweak it by yourself, but doing so often results in doubling the polygon count and a lot of tedious editing. It's a hassle to manage it manually and human errors may occur. It is much easier to let the shaders handle the task. This is where the Multi-pass Shader comes into play.

Part 4 Using Multi-pass Shaders for Inverse Hull Method

Shaders Basics 1 Shaders are commonly divided into “Vertex Shaders” and “Pixel Shaders”. *Pixel shaders are sometimes also known as fragment shaders Vertex Shader Pixel Shader Decide the shape! Paint the color! *Conceptual diagram Calculate where the mesh will appear in the camera Calculate the final color by textures and light direction

Shaders Basics 2 Within the Vertex Shader, it is possible to do exactly what we explained earlier. It can take each vertex and move them in the direction of their normals, making the mesh appear as a slightly inflated version of itself. Expand by the Vertex Normals The shader will be set to show the mesh “Back only”, and thus, we get an inverted mesh.

Inverse Hull Method with two meshes We can prepare two meshes. On the “Main” mesh we draw the body content, and on the “Back face” mesh expand and invert the shape. Combine them together and we get a contour-lined visual. Main mesh color! shape! Merge! Back face mesh color! shape! But, it’s not very efficient to have to prepare 2 meshes, isn’t it?

Basics of Multi-pass Shader 1 Revisiting the basics again, this is roughly how a normal shader would function: Mesh Data to-bedisplayed (Bone-deformed mesh shape, etc.) Vertex Shader Pixel Shader Determine positions of Vertices in the screen Determine colors of all pixels (Camera position, vertex position offset, etc.) (Lighting, textures, etc.) A regular shader’s process flow Display frame

Basics of Multi-pass Shader 2 In a “Multi-pass” shader, we can “pass” the same mesh multiple times and re-draw them repeatedly with different settings. This is the main method used for our GG series. Pass 1: First draw the main body mesh Merge both draw results Mesh data tobe-displayed (Bone-deformed mesh shape, etc.) Vertex Shader *We’re drawing this essentially twice, but bone deformation calculations and etc. only needs to be done once! Half the work! Pixel Shader Pass 2: Next draw the back facing mesh Achieving Inverse Hull Method with just 1 mesh! Vertex Shader Pixel Shader

Implementing multi-pass shaders in the engine Unfortunately, Unreal Engine does not support multi-pass shaders by default. Therefore, we needed to modify the engine to allow these multi-pass renders. Take this material... Redraw again using this material! By applying special settings to the imported character meshes‘ material slots, we can set any material to be redrawn by a separate material.

Software that support Multi-pass Shaders You should now have a basic understanding of Multi-pass shaders. However, they work differently in each environment. This is because the rendering pipeline differs between each game engine and 3DCG software. 3DCG software – supports Multi-pass Shader? Game engines – supports Multi-pass Shader? MAYA 〇 Unreal Engine4 △ (need modification) 3ds MAX 〇 UNITY 〇 (HLSL or CGFX only) Softimage 〇 GODOT ? (untested) Blender ✕ *Real-time preview with custom shaders

Multipass Shader Summary ・We can draw a single mesh twice with different settings, using special shaders ・The first draw is for the main surface, while the second draw is for the contours. – This way, we get Inverse Hull Method with one mesh. ・Bone calculations only need to be done once. ・No need for 2 meshes, huge savings for management and memory cost! however...... ・Note that not all environments supports it freely. ・Useful, but not a set requirement to achieve Inverse Hull Method it self. ・Requires modification if you want to use in Unreal Engine4.

Part 5 Applications of Inverse Hull Method in GG Series

How we applied the method inGG series Now that we have a basic understanding on how Inverse Hull Method works, let us go further to explain how we applied this method in the Guilty Gear series. The Inverse Hull Method technique has been around in many games since the year 2000, but the details in their implementation differs for each title. The basic concept is the same, but every development team has their own preferences and needs, resulting in each title having an individual uniqueness to it. Naturally, we also have added many tweaks for it to work in Guilty Gear series. The core principle is relatively simple to understand, but due to its simplicity, every developer must make their own adjustments to avoid many of the pitfalls when implementing the method to their product. In this section, we will be discussing the various problems often found while implementing the Inverse Hull Method, the solutions we came up with for each of them and which are actually utilized in the Guilty Gear series.

Implementation tips ① Pre-requisite: Final-equivalent preview shader

Underlying Pre-requisite: Final-equivalent preview shader One of the key benefits of using Inverse Hull Method is that as long as you have prepared an adequate shader, you can view how the contour lines should look in the final game, right within the preview screen of the 3DCG software you are using. Modelers and Animators need to always check how their adjustments affects the final outcome, and being able to get real-time visual feedback on their adjustment is paramount to the quality of the visuals. At Arc System Works, we developed specialized shaders for each of the 3DCG software we use, which reproduce the same render results as though it is rendered from the game engine. Softimage Unreal Engine Maya

Implementation tips ② Achieving evenly-distributed lines with any composition

Achieving evenly-distributed lines in all compositions We can draw contour lines on the models thanks to the Inverse Hull Method, but now we need to answer another question. How thick should the lines be? The Inverse Hull Method makes use of the shader’s function to expand the backfacing mesh to create those contour lines, but exactly how much should we expand? It may seem like a simple problem, but many elements need to be considered when trying to get the perfect thickness, consistently, in all circumstances. How many millimeters should the lines be? 1mm? 2mm? Or 1cm?

Is the line width correct when close-up or long shot? The first problem we need to tackle is with the camera distance. Naturally, the ideal contour line thickness varies when doing a close-up shot, or during regular fighting-game style long shots. 1~3mm for face contour lines for close-ups? But 7~10mm for long shots?

What happens if you do not change the width Failing to consider camera distance and setting a fixed amount of width across the board will definitely cause discrepancies. A contour line meant for long shots would be too thick when the camera draws close, and likewise a close-shot contour line would be too thin for use in long shots. Taking a long-shot 10mm thickness up close Taking a close-up 2mm thickness long

Solution: Vary width according to distance To solve this issue, we can set the amount the vertices are displaced in their normal direction to be proportional to the distance between the camera and the vertex. This will result in thinner lines close-up, and wider lines at long shots, which is exactly what we want. Vary the mesh size diff. according to distance from camera Alright, case closed!... Or is it?

Not just the distance – FOV plays a part too Field of View (FOV) is basically the width of the vision-cone of the view of the camera. Even if the distance is kept the same, a change in FOV can result in the target object appearing bigger or smaller. This is often called “Zooming In” or “Zooming Out”. Camera distance: 9m FOV: 55° Camera distance: 9m FOV: 15° The above image illustrates the idea that even when the distance is kept constant, the varying FOV caused the image size to differ. Inverse Hull Method contour lines will need to also address this.

What happens if you zoom in by adjusting FOV When zooming in by reducing the FOV, with out any adjustments the contour lines will appear to be thicker. This is because the contour line width (the amount the mesh expanded) normally does not take FOV in to account. FOV: 35° Distance: 9m FOV:8° Distance: 9m Zoom in! Aside from solely relying on camera distance, you need to also account for FOV when setting the width of the contour lines.

Solution: Trigonometry One way to determine the ideal line width with varying FOV is to use Trigonometry math. There is a formula that perfectly fits the scenario where we want to calculate the width based on distance AND angles. Using this simple formula, we can account for both camera distance AND FOV together. B Outline width Basically just incorporate the formula where A is for camera distance, and multiply it simply with tan(FOV/2). θ camera A (distance) mesh B=Atan(θ) *Caution* Getting the camera FOV within shaders or game engine materials are often not straight forward. One way is to first calculate the tan(FOV) value within the game program, then pass the resulting value to the shader directly. Another way is getting the FOV by using the camera projection matrix (e.g. 1 / Proj[0][0])

Solving the FOV problem By allowing the contour lines to be adaptable with both the camera distance and FOV, it allows the outlines to show correctly both in close-up shots, or while zooming in. This opens up a wider range of artistic expressions with camera positions. Distance: 60cm 60cm Distance: FOV: 55° 55° FOV: Close-up on the face Distance: 350cm 350cm Distance: FOV: 10° 10° FOV: Zooming in on the face

Implementation tips ③ Adjusting contour line thickness using Vertex colors

Adjusting contour line thickness using Vertex colors thick thin thick thin standard In the Guilty Gear series, we achieved pen-like fine tuning to the line width (i.e. how much the outline vertex is being pushed outwards) by modifying the displacement amount by the alpha channel of the vertex colors. This is capitalizing on one of the benefits of Inverse Hull Method – freedom to control each vertex individually. Besides controlling how strong you want the lines to be, it can even go to the extreme end to 0 to eliminate lines you do not want to show. Such cases are prevalent in intricate parts such as eye lids and eye lashes, where you actually do not want contour lines to appear against your intention.

Controlling contour line width with Vertex colors Vertex colors have an upper limit at 1.0, but since we wanted to the freedom to adjust the contour lines both wider or thinner, we set the default value at 0.5. Lower values will make the lines thinner, and higher values will make it wider, and setting it 1.0 will cause the line to double its original thickness (in comparison to 0.5) Vertex color α "0.0” No lines Vertex color α "0.5” Standard Vertex color α "1.0” Max

Adjusting contour line thickness for individual parts We emphasize on customizing the contour lines individually for each area of the character mesh. For hair, feather-like parts, or intricate and small parts, we make the lines thinner and more delicate, while parts where we want to emphasize the strength and volume, such as muscles, we make the lines to appear thick and broader. This technique of emphasizing the strength of the lines is a common practice in illustrations and manga and since the goal is to make the picture more readable, there is no reason to not do it in games. Delicate areas such as hair - thin Small detailed parts - thin Muscles / large volume - thick

Implementation tips ④ Move the Backfacing Mesh “away”

Allowing the adjustment of the “depth” of the outline While it is crucial to be able to draw outlines, it is evenly important to be able to choose not to draw outlines. In some cases, you might make an artistic choice not to draw a line on certain areas of the character. We need to be able to allow this choice with our shaders, since we want full control over our art. Luckily, the Inverse Hull Method is capable of adjusting the outline with every vertex, making it possible to hide the lines in areas of our choice. We can make adjustments on exactly where we want and don’t want our lines to be, and even make it so that we get the lines only on the most exterior rim of the character mesh.

Move the Backfacing Mesh “Away” It is actually quite simple to perform the “Only show the most exterior rim” trick. You simply need to place the outlining mesh “deeper” away from the camera, from their original position. Practically, you will have to tweak the Depth values for the vertices involved within the shader. For artists to understand this concept easier, basically we are “shifting the backfacing meshes away from the camera”. Normal render Shift the vertexes for the outline mesh away mesh camera Outline mesh As a result, only the outmost contour gets displayed

The trick of shifting the Backfacing Mesh to the “Back” By shifting the Backfacing mesh away, we are now able to freely decide which areas we want(or do not want) the outlines to show. In Guilty Gear series, we control how much this effect takes place with the Vertex color B value. The images to the left , we changed the value of the Vertex Color B of the hair to make the outlines only show on the outmost exterior rim of the mesh. Normal display Edit vertex color only for hair parts

Implementation tips ⑤ Hard Edges, Custom Vertex Normal Problems & Solutions

Hard Edges Issues The Inverse Hull Method relies on the Vertex Normals to decide which direction each vertex are displaced in order to shape the outline. However, when such Vertex Normals have hard edges, or when the Vertex Normals were customized for lighting effects, this can fall apart. Especially for Hard Edges, two adjacent Vertex Normals will be facing entirely different directions, as such the expanded inverted hull would end up looking segregated and disjointed. Hard edges provide for sharp and distinct shadows, as the Vertex Normals face a distinct direction for each polygon. As the Vertex Normals are not smoothly transitioned, naturally the backfacing mesh would end up disjointed. And since the backfacing mesh is disjointed, it would then cause the outline to appear segregated.

Customized Vertex Normal issues It is very common in 3D anime styles for modelers to artificially alter the Vertex Normals for better control in lighting. In practice, this often creates problems for outlines with the Inverse Hull method. This is because customized Vertex Normals for lighting purposes may not match the assumption the Inverse Hull method is based upon. Normals edited to the form of a ball/sphere One popular method to control the lighting of the hair is to spherize the vertex normals. Some areas of the Backfacing mesh no longer align with the shape of the mesh Since the normals aren’t aligned with the actual shape of the hair mesh any more, the Backfacing mesh will not expand in the expected direction.

Solution for both Hard Edges and Customized Vertex Normals Hard Edges allows for sharp contrast in shadows, but causes broken lines + Non-Hard Edges allow the lines to continue, but the shadows become awkward What we want : Best from both worlds! = One method to solve this issue is to actually “have two sets of Vertex Normals“. One set of Vertex Normals for lighting, and a completely different set of Vertex Normals solely for the Inverse Hull Method. By having two sets of Vertex Normals, we get the best of both worlds where we can have the sharp lighting contrast, and a smooth continuing Inverted Hull contour line altogether.

Results of having a “second set of Vertex Normals” Inverse Hull using lighting normals Inverse Hull using the second set of Vertex Normals The second set of Vertex Normals allows the contour line to continue without breaking, while maintaining the intended lighting effect with customized normals. Inverse Hull using lighting normals Inverse Hull using the second set of Vertex Normals

A Second set of Vertex Normals? How? By default, a regular game engine would not support a “second set of Vertex Normal”. What we did in GG series was to use the “Tangent” parameter as the “second set of Vertex Normals” in order for us to resolve this issue. A "Tangent” is usually a parameter that every vertex would have for them to display their normal map. However, in Arc System Works toon shader fighting games, we generally do not use normal maps, so conveniently this Tangent became a freeto-use resource for us to utilize. We made use of this by overwriting the tangent parameter with a recalculated second set of Vertex Normals at the point of import into UE. This allowed us to have 2 sets of Vertex Normals to use separately. (Note: This requires modification to the engines import pipeline) Overwriting the tangent with the 2nd Vertex Normal during mesh importing. (Note: modification required)

Why Tangent though? We have thought of other methods such as storing the extra vertex normals in the Vertex Color parameters, but there are problems with such approach. To make lighting viable, Vertex Normals always follow the bones rotation. But this is not the case when it comes to vertex colors. If we tried storing the vertex normals in the vertex colors, the stored Vertex Normals will not keep up with the bone deformation, and either the contour lines or the lighting start going all over the place. The lighting Vertex Normal rotates together with the bone Values placed in the vertex color do not follow bone rotation Tangents work like Vertex Normals where they follow the bone’s deformations Tangent, on the other hand, were originally designed for lighting, similarly as to Vertex Normals, so they are fully receptible to the bone’s changes every frame. This is why they are found to be most suitable as the second Vertex Normal.

Inverse Hull Method in GG Series - Summary ・A preview environment in the 3DCG tool that recreates the same image from the game engine. ・Techniques for keeping the line thickness consistent regardless of distance and FOV. ・Adjusting line thickness using Vertex Colors. ・Shifting the outline mesh to the “back”. ・A “Second set of Vertex Normals” to tackle Hard Edges and Customized Vertex Normals to prevent disjointed lines.

Part 6 Special Inverse Hull Techniques in GG Series

Practical techniques to maximize Inverse Hull Method’s potential So far we have explained the various ways to implement the Inverse Hull Method on Arc System Works fighting games. However, simply “implementing” is not sufficient – from here on we will discuss how these techniques are used in practice, in order to maximize the potential of this method. In this section, we will be introducing two control techniques that expand on the Inverse Hull Method to achieve the desired expression. 1. Remove unnecessary lines 2. Important Technique: Close the Backface

Remove unnecessary lines

Avoid unintended lines It can be extremely distracting where lines appear unintentionally in delicate areas, especially the face. A specific expression, a specific angle, a specific distance, and a specific timing, all of which can be easily distracted by an excessive line. We can fix this by fine-tuning specific vertex color values, getting rid of these lines. An unintended line appears at this angle! Adjust the Vertex Color for the specific part!

Method to erase lines Top view of the face Visible lines camera camera Hide the lines by shifting the Backfacing mesh away from the camera As explained in earlier slides, by “pushing the Backfacing mesh away” we can hide specific lines at any part we want. This can be done at each vertex by adjusting the corresponding vertex color of the vertex, so basically you can tweak the lines by vertex precision. Unlike erasing lines by 0-ing their width, this method is ultimately simply moving the lines “away” from the camera, so the outermost contour line will always remain.

Push away the inner fabric to avoid it protruding When twisting soft materials such as fabrics, it may end up with the fabric’s inner facing surface protruding to the front. With the Inverse Hull method in effect, this could result in unintentional black colors showing through. This can be fixed by editing the vertex colors for the inner facing mesh only, moving the outline “away” and avoid the protruding issue. GIF Twisting the fabric’s bones too strongly will result in the inner mesh’s backface to protrude GIF Adjust the vertex colors for the inner mesh only Set the inner mesh outline to be “away” to prevent protrusions from occurring.

Techniques for creating lines intentionally

Problem of Floating lines One weakness of the Inverse Hull Method is the lines “Floating” in some areas of the mesh. Areas that shape a “Valley” on the mesh tend to not work well with the Inverse Hull Method. If you have an understanding on how this method works, you will also know why this is the case. Basically, it’s because of the gap that is formed when the mesh is expanded. GIF camera Visible lines gap Example showing the breaking in the “Valley” area. A gap exists between the Backfacing mesh and the main body, causing the line to appear as “Floating” and disconnected.

Solution to the problem of “Floating" lines The gap between the pushed out Backfacing mesh and the body mesh is the cause of the floating lines. As such, we need to close the gap by setting the vertex color of this specific part to 0 to resolve this problem. GIFGIF “Close the gap” by setting the vertex color to 0 for this specific part. Resolve the floating line issue by adjusting the vertex color value

Utilizing “Close the gap” ① Close the wrinkles This technique of “Closing the gap” can be applied in many areas for consistent lines. Line “Floating” Vertex color: 0.5 “Close the gap” Vertex color: 0.1 By reducing the width of the outline at the “Bottom of the Valley “ where the cloth fabric wrinkles, we “closed the gap” and prevent unwanted floating lines there.

Utilizing “Close the gap” ② Close the muscle valley Similarly, we can apply the same technique to close the gaps that appear in valleys formed between muscles. You can see a stark visual difference in how we can clean up the lines here.

Utilizing “Close the gap” ③ Close the opening camera "Close the gap” by setting the Vertex colors to 0 near the opening part For cylindrical objects such as gloves, cloth sleeves, etc., we can “close the gap” at their rims in order to draw a stable and consistent line.

Utilizing “Close the gap” ④ Get lines at shallow angles Top view of the face Backface culled line camera GIF In similar fashion, we can close the gap for the nose bridges of male characters, to create a contour line even when viewed at shallow angles. This is especially important for situations where we want to emphasize on the Depth of the facial structure.

Inverse Hull Method Operational Techniques Summary Inverse Hull Method is commonly mistaken as a convenient automatic tool that draws the contour outlines for you. However, more often than not, such “automatically” drawn lines are not always ideal to the artists’ eyes. You may be troubled by situations such as lines appearing where they shouldn’t, or wanting specific lines to appear at specific angles but unable to get them to do so. True “artistic expression” only happens when you have full control over how and when these lines are drawn on your character. Intentionallity is the key. The practical techniques we have explained here tackles most of such issues, but they are only possible upon the modeler’s understanding on the inverse hull method’s concept and behaviors. It is therefore crucial to have the modeler understand the concept and perform necessary adjustments, and the shader artist understand the requirements of the final visual presentation. With both of these pieces together, you will be ready to pursue a better quality in visuals.

Lecture Summary

Lecture Summary The Inverse Hull Method has been around for over 20 years, and is still the core technique in use today for NPR visual representations. The basic concept is fairly simple to understand, but the tricky part is implementing it efficiently, and effectively. We hope you have learnt some of the implementation requirements and practical methods in today’s lecture. Modelers who have learnt about the Inverse Hull Method, will now be able to utilize the concept and the logic behind the technique to better apply and utilize the technique to achieve cleaner and more visually appealing results. Technical Artists and Programmers who are implementing shaders for the Inverse Hull Method will now be able to better understand the artist’s needs and what problems need to be solved. We have always emphasized the importance for both the implementor and the user to know the concept and the principles, as well as the applications and behaviors of the technique, in order to produce the finest visual presentation quality. We sincerely hope this session had been beneficial to you.