1. This article is divided into three parts
1. Cartoon material analysis.
2. Optimize the direction.
3. Production specification.
Second, the text part
1. Cartoon material analysis
Cartoon rendering belongs to the category of non-photorealistic computer graphics ( NPR) . However, Bengsan's cartoon rendering is also known as the benchmark of the industry in China. I spent some time studying it some time ago, and it is also considered a recent cartoon rendering. Make a summary.
My original painting, 3D background will fully analyze the cartoon rendering of Bengsan from the perspective of art, and provide the necessary shader code of Unity2017 at the end of the article, and the node network of cartoon materials in maya and max, I hope everyone can make better cartoons Rendering works.
Then we start to get to the point. The single model of the three-character collapse is mainly divided into three parts, hair, head and body. The model part is not a difficult point in the industry, so I won't go into details. I believe that the art of most companies or outsourcing companies can solve this part of the problem. And there are really technical barriers that are the performance part of cartoon materials, so how can we express this material in work projects? And how to formulate production specifications to meet the performance in the game engine?
We take the body parts of the three characters for analysis, as follows:
It can be seen from the figure that the body part model has 2 textures, a color map (color) and a light map (LightMap). The color map uses color tiling mode, which is very simple, and the three RGB channels of Lightmap store three grayscale images respectively, mainly to reduce the amount of textures. In the picture, the skin part of the R channel character is pure black, and the other parts are different brightness. The gray color, but I think other parts are pure white. The value of this picture should be mainly to distinguish the skin part and the non-skin part. If you want to express the materials of other different parts, the corresponding conditional algorithm should be added to the code later. , the mobile game feels that this is not necessary. The G channel is to produce a masking effect similar to AO, and the B channel is naturally the highlight area. This is all the material used by Beng San to express the cartoon material.
In order to give people a more comprehensive understanding, why did Bengsan do this, did they create this method? Obviously not. Next, we will analyze the cartoon material of another game, which is the real benchmark of cartoon rendering in the industry - Guilty Gear " GUILTY GEAR Xrd -SIGN-", as shown below: 
Figure 1
" GUILTY GEAR Xrd -SIGN- " uses three textures, basic color texture color, including four-channel RGBA, Sss texture for shadow areas, three-channel RGB, ILM texture for lighting details and inner edges, including four-channel RGBA . The A channel of the color map should be used for masking, which mainly separates the hands, as shown in Figure 2. The specific use is unknown. It may be used for some special effects. It can be ignored if it is not used. It's very straightforward, but I don't think it needs to be so complicated. It's enough to make the shadow map directly through the color map. This may be related to the production process. Maybe they have a direct one-click conversion action or method. Bengsan does not have this. For texture, directly use the R channel of LightMap as a mask, and then use the color map to make the shadow part. It can be considered to reduce the texture and is suitable for mobile platforms. As shown in Figure 1, for the ILM texture, because of the Sss texture, the use of the R channel is not obvious, and the use of the G channel is not obvious. It may only add a little local small details, which can be ignored. The most important thing is the BA two channel B is the highlight map, channel A is the inner contour line, that is, the inner stroke has a feeling similar to AO. Of course, he has a thickness change. This is the UV unwrapping method of the Nakamura-style line, and all blocks are square. Yes, this UV unwrapping method is too troublesome to learn, and Bengsan also abandoned this method.
So to sum up, simplify the above texture, the texture with obvious collapse effect is the color texture, and the RB channel of LightMap. " GUILTY GEAR Xrd -SIGN- " the obvious textures are color texture, Sss texture, BA channel of ILM texture.
Let's take a look at the cartoon material algorithm part of Bengsan, taking the Unity2017 version as an example:
1. The generation of contour lines
2. Surface material part
The code is not complicated, of course, it is simplified to remove the G channel that does not work well, and a conditional statement is used to deal with the shadow effect of skin and non-skin.
The post-processing effect is added to the Game view. Before it is added, it is as follows:
The implementation method in Maya2017 is realized by the shaderfx node method. The node network diagram is the same as the shaderfx of 3ds Max2017, but the contour line is not displayed. The contour line is expressed by the Toon Outline that comes with maya, as follows:
The effect in Maya is as follows:
2. Optimization direction
In the R channel of Bengsan LightMap, it is enough to distinguish between skin and non-skin. Black and white are the best. If there are other special requirements, you can add additional ones. It does not feel very useful for the G channel, and the effect is not very good, so the above algorithm is useless. Going to the G channel, if you want to do this type of texture, it is not suitable for the contrast is too large, and the body part and head of Bengsan do not feel the same tone, which is very rough. For the performance of B channel highlights, please refer to the highlight performance of " GUILTY GEAR Xrd -SIGN-", there is room for improvement.
For the code part, you can create a cartoon effect through the direction of the gradient map, similar to the official cartoon material
3. Production specification
1. Make a mask map by specifying the purpose of the map
2. Reasonably use the gray value of the RGBA channel of the texture to express the masks of various materials, so that they can be processed separately in the code.
3. For the large-scale light-receiving surface of the cartoon material, there are two ways to deal with the relatively fragmented light-receiving surface. One is to draw VertexColor (vertex color) and then process it through code, which is also a material processing method. The second is to pass Edit the normal way to adjust the light-receiving surface, as shown below
Finally, attach the shader of Uinty2017
My knowledge is limited, and it is inevitable that there are some inappropriate understandings or omissions. Please forgive me. If you have any good suggestions or good ideas, please come to discuss and study together ......
quote
[ 2] Zenji Nishikawa [GUILTY GEAR Xrd -SIGN-] Part 1 of [ Real-time 3D Graphics of Pure Cartoon Animation ]
[ 3] Nishikawa Zenji [GUILTY GEAR Xrd -SIGN-] Part 2 of [ Real-time 3D Graphics of Pure Cartoon Animation ]