1. Introduction
The continuous development of mobile terminals such as mobile phones makes people's life more and more convenient. Video games, as media entertainment, have gradually shifted from console or computer to mobile, creating a huge number of mobile game manufacturers and a wide variety of mobile games. Due to the fact that NPR generally has better visual performance than realistic rendering technology under the same performance consumption, it has developed rapidly on mobile phones. Among them, toon shading technology has received widespread attention in recent years due to the favor of modern young consumer groups. However, the attraction of traditional Toon Shading technology for the two-dimensional mobile player group is gradually weakening, with players entering a state of aesthetic fatigue. And the current two-dimensional game market is gradually saturated, the competition between games is more and more fierce, and the conditions for becoming "popular" mobile games are more and more blurred. The healthy survival rate of new two-dimensional game is generally low. In order to provide a useful reference direction for the research and development of emerging two-dimensional game, it is necessary to study the current development direction of two-dimensional game. Due to the particularity of its player group, two-dimensional game is a type of game that pays more attention to the game screen, so it is an important part to study the development direction of applicable Toon Shading technology. It can be found that a new special Toon Shading —— Hybrid Toon Shading, is already used by some mobile game manufacturers, and has been recognized by players.
While this rendering method has formed a certain trend in the market, there has been no systematic study on its developmental reasons and technical differences. Therefore, in order to explore these issues, grasp the future development direction of toon shading, and understand the technical details of mobile game images related to toon shading, this paper first investigates the general process of traditional toon shading. Subsequently, a brief overview of the general operations of hybrid toon shading is provided, including Adjust the diffuse and specular reflections of direct and indirect lighting separately, and inserting various NPR operations such as binarization shadows, stroke edges, color blending, etc, with a key point is the NPR and PBR regional processing balance. A comparison of these two rendering methods allows for an understanding of their respective advantages and disadvantages, thereby shedding light on the technical differences and developmental reasons behind hybrid toon shading.
2. Concept of Toon Shading techniques
Toon Shading is a branch of non-realistic rendering technology (hereinafter referred to as NPR). NPR is a rendering technique that to some extent corresponds to the PBR technique. The earliest proposal of NPR can be traced back to the early 1990s, when Pat Hanrahan and Bruce Gooch jointly published a paper titled "Non Photorealistic Rendering" in 1995, which is considered a groundbreaking work in the field of NPR. Afterwards, NPR has been committed to simulating various artistic styles and expressing different artistic characteristics that PBR does not have, which is more in line with people's aesthetic taste [1]. Among them, NPR style can be roughly divided into the following categories, hand-painted style, cartoon style, watercolor style and sketch style. Toon Shading generally refers to cartoon style NPR. This concept was first proposed by Dr. Philippe Decaudin from France in a paper [2]. Toon shading focuses on imitating various modern animation styles, creating exaggerated, simplified, and distinct animation styles.
3. The application of Toon Shading technology in mobile games
3.1. Advantages of Toon Shading technology in mobile games
The application of toon shading in gaming environments is not as widespread as realistic rendering, but due to the unique advantages of toon shading, Toon Shading technology is more widely used in mobile games [2]. Such as Mihoyo’s 3d mobile games such as Genshin, Honkai Impact 3rd, Kuro Game's Gray Raven:Punishing, Netease's Onmyoji, etc. Toon Shading originally has a unique advantage different from PBR, that is, it can draw an artistic style detached from reality. Specific mobile game, the use of Toon Shading advantages have two main advantages.
First, the picture performance is in line with the aesthetic appreciation of the “two-dimensional” group in the contemporary young people. In today's environment, "two-dimensional" generally refers to the cross media collection with animation (A), comics (C), games (G) and related novels (N), that is, ACGN as the core, related fans and corresponding online culture [3]. Because this new concept is a restructuring and upgrading of the concept of "otaku" from Japan [4], two-dimensional games generally refer to toon shading games that favor Japanese style painting. Then, of course, the two-dimensional group refers to the people who like this kind of works. The following figure 1, figure 2, and figure 3 are toon shading, PBR, and two-dimensional style images, respectively.
Figure 1. Toon shading image: game screenshot of Honkai:Star Rail [5]
Figure 2. PBR image: game screenshot of Death Stranding [6]
Figure 3. Two-dimensional style image: game screenshot of Blue Archive [7]
It can be clearly seen that Figure 1 which use Toon shading and Figure 3 have the same simplified artistic style, while Figure 2 which use PBR is more realistic and does not conform to the usual two-dimensional style. So toon shading technology can create two-dimensional images that meet the needs of the two-dimensional group. According to the 2023 China Game Industry Report, the actual revenue of mobile games in China reached 74.88% in 2023, a year-on-year increase of 17.51%, far exceeding the revenue of console and computer games[8]. And the revenue of the two-dimensional mobile game market was 31.706 billion yuan, up 31.01% year on year, as well as the two-dimensional game group had a high willingness to consume, the profitability of top products is surprising[9]. Among them, according to the Gamma data report, the revenue of Honkai: Star Rail will be up to billions in 2023, and the limelight even once overshadowed the previous Genshin[9]. Such rapid income make the "two-dimensional" element of Honkai: Star Rail cannot be ignored, so the use of toon shading in mobile games can well capture this consumer group and create considerable benefits.
Second, Under the same performance consumption, toon shading generally has better visual performance than PBR. A major challenge in mobile game development is performance limitations. Due to the lightweight design of mobile terminals like smartphones, they generally do not have the performance of mainstream game consoles or computers on the market. This situation makes it difficult for excellent game graphics on the game console or computer to be directly implemented on mobile phones, which requires rendering technicians of mobile games to balance graphics and performance under limited performance. In order to achieve good PBR, it is necessary to restore complex physical phenomena in reality. Most games rely on high-precision texture and ray tracing techniques to simulate physical phenomena such as Defocus, reflection, and refraction [10]. Due to the fact that the reference point of PBR is in the real world, the absence of any of these factors will significantly reduce the realism, and calculating every bounce of photons in this process requires performance [10]. Computer devices, with high-performance dedicated computing modules such as independent graphics cards, can easily implement the above two technologies, but mobile phones do not. In contrast, NPR does not have such high requirements because NPR itself is designed to achieve artistic style visuals and does not strictly follow reality, even designers may focus on depicting the edges of the animation model and reducing the number of model faces to simulate the effect of hand drawn animation[11]. So NPR basically has the characteristic of simplification, and toon shading is no exception. Therefore, static lighting technology, simplifying style or using low precision textures, Technologies used for performance compromise, such as those mentioned above, do not appear abrupt in toon shading. On the contrary, it may even make the picture more distinctive.
3.2. Technical analysis of Toon Shading technology implemented in mobile games
To further explore toon shading, the following will briefly introduce the basic process of toon shading (Figure 4 ).
Figure 4. Toon shading flow chart (Picture credit :Original)
The universal Toon Shading pipeline is roughly divided into four steps: Illumination Model, Rim Light, Terminator Line, and Outline.
The first step of Toon Shading is to modify the Illumination Model. The initial lighting model of all kinds of game engine on the market generally follows the pbr rules, so the first step is to modify the lighting model. Need to modify NDotL to calculate Lambert lighting, usually in two ways, the Step function and the RampMap [12]. A simple Step function is given a numerical value, and then greater than this value is 1, less than this value is 0 [12]. The smoohstep function is a function that can be used to smoothly generate the transition value between 0 and 1, from which it can get the smooth Lambert calculation results. By remapping this calculation through step, it get the boundary of the shadow and the control of the position. RampMap method is to use Lambert illumination as the mapping value to get the corresponding stylized illumination, which is similar to the method of Step function [12]. The shading changes and color change can be realized by modifying the color transition of the ramp map.
The second step is Rim Light, and there are two common implementation methods, Fresnel node and depth offset. The calculation of the Fresnel node is implemented in Shader Graph and is usually used to acquire the underlying edge light. This is also a method based on NDotV to obtain edge light by calculating the dot product of normals and camera angle direction. Depth offset can have a good effect on objects with fewer surface inflections, and can obtain equally wide hard edge light. This method involves offsetting the vertices of the model, resampling the depth, and comparing it with the depth of the original model[12]. When the depth difference is greater than a certain value, it becomes the edge.
The third step is Terminator Line, mainly to find the brightness range of the Terminator Line area. The Step function of the first step can be used and repeat it, one positive and one negative, then multiply to get the junction of the light and shade, next can fill the color to draw the terminator line. Another way is to use ramp maps to directly draw the terminator line.
The fourth step is Outline, which is to draw the edge line or outline of the object. Usually applied are Backface and edge detection. Backface Is a procedural geometry contour rendering method. This way is that the front and back of the object are rendered once, and then the back of the rendering is squeezed out to get the edge line trace. Edge detection is not limited to game rendering, it is an operation of image processing. Model contour detection techniques similar to edge detection can be seen as an extension and application of edge detection in three-dimensional space, and model contour detection technology is the most fundamental problem in NPR, with very important applications, so edge detection is also fundamental and important [13]. Edge detection is common to use Sobel operators which is an action convolution kernel.
After the above process, then can complete a simple and basic Toon Shading. This is also the basic process of Toon Shading used by most mobile games on the market. However, with the development of the times, this traditional(refers to basically composed of NPR technology) toon shading style can no longer meet the needs of mobile game players as before, and fully utilize the performance of mobile phones. Therefore, the development and use of new toon shading methods has become a trend for mobile game manufacturers who have been accustomed to using toon shading methods in the past.
4. Hybrid toon shading technology in mobile games
4.1. The limitations of the traditional two-dimensional-style mobile game graphics performance
In the past, mobile game manufacturers that mainly used traditional toon shading. However, with the continuous improvement of mobile phone performance, mobile devices are now able to support rendering technologies that were previously difficult to use but have higher performance. In contrast, this rendering method is prone to the problem of monotonous game graphics. The following Figure 5 is the common Toon Shading mobile games before 2021. From left to right there are Genshin, Onmyoji, Honkai Impact 3rd.
Figure 5. In game screenshots of mobile games using traditional toon shading before 2021 [14][15][16]
Figure 6. Game screenshots of mobile games - Honkai Impact 3rd [16]
Figure 6 is a real rendering image of the character details in one of the games mentioned above. Most of the shadows on the characters model are maps, or pre-baked shadows. The shadows will not automatically change with the environment, and the picture performance will be relatively fixed, which is the usual treatment of NPR. At the same time, the surface of the skin will not make real and obvious subsurface reflection, and the clothing section also uses highly stylized and simplified textures the overall look is smooth and flat. The resulting rendering is excellent for the typical cartoon images. But when placed in a gaming environment, especially in environments with dynamic and complex lighting, it will appear stiff. The solution to the above problem is hybrid toon shading, which is a special toon shading. While maintaining the plane sense of cartoon style, it has the dynamic shadow performance of PBR, and the object map material changes more abundant than NPR.
4.2. Technical analysis of hybrid toon shading technology implemented in mobile games
Hybrid toon shading is a rendering technology that combines PBR with NPR. The principle lies in maintaining the realism of PBR while adjusting factors such as lighting, materials, and shadows to achieve a rendering result that resembles a traditional cartoon style. This includes emphasizing contours, simplifying shading, handling shadows, adjusting materials, and color rendering, in order to endow the image with a unique cartoon style. This technique is widely utilized in areas such as game development, animation production, and virtual reality, but it is rarely used in mobile games. The following image is general process of hybrid toon shading (Figure 7).
Figure 7. Hybrid toon shading flow chart(Photo/Picture credit :Original)
In short, the hybird toon shading is insert the characteristics of NPR in the PBR process and adjusted appropriately [17].
The first is the processing of data initialization, mainly and normal related processing, NDotL related calculation such as binary shadow, facial shadow, hair shadow and so on can be operated here and integrated together [17]. And NDotV can also control part of the Finier effect.
Direct light roughly includes diffuse reflection, mirror reflection and gloss options. The obvious changes include GGX highlights in the normal distribution function, anisotropic highlights, Beckmann, etc [17]. Some color mixing or overlay operations commonly required in toon shading also need to be added here, such as linear light, soft light, overlay, etc.
The operation of the indirect light part can significantly improve the stereo of the model, but this is not necessarily a good thing for toon shading [17]. Therefore, it is necessary to adjust the proportion of indirect light in various parts, such as the skin, hair, face, and clothing. Especially, the proportion of indirect light in the skin and face parts needs to be specially reduced. At the same time, highlights of the eyes, screen space reflection, edge light, etc. can also be added here.
After the above processing, a common hybrid toon shading with both PBR and NPR features can be obtained. By comparing the process with toon shading technology, It can be observed that hybrid toon shading mostly involves changes in lighting and shadows. The usual NPR techniques such as stroke and binary shadows are still being used, but at the same time, more detailed diffuse and specular effects of direct and indirect lighting are added and adjusted. The two types of lighting and shadow settings are essentially conflicting, so it is necessary to apply various lighting effects in various modules, and finally adjust the rendering effect of each part and the overall to achieve balance.
4.3. The current application status of hybrid toon shading in mobile games
The application of hybrid toon shading in mobile games has become increasingly popular among developers seeking visually appealing and stylistic game graphics. One notable example of this approach is the blending of realistic lighting and shading with exaggerated character features and simplified textures, resulting in a vibrant and unique visual style. After 2020, this rendering method has begun to appear on a certain scale, such as the Figure 8 from the left to right are(the following time is the first surfaced time) 2021’s Snowbreak: Containment Zone, Ex Astris, Girls' Frontline 2: Exilium, 2022’s Arknights: Endfield.
Figure 8. In game screenshots of mobile games using hybrid toon shading [18][19][20][21]
Figure 9. Game screenshots of Girls' Frontline 2: Exilium (left) and Honkai:Star Rail(right) on the real machine [20][5]
The above that Figure 9 is character detailed comparison of Girls' Frontline 2: Exilium and Honkai:Star Rail. It can be seen that, the material texture on the left has a clear and realistic diffuse reflection and self-shadowing effect. Based on actual observation, this shadow can change in real-time with the lighting of the game environment. On the right side, there is no obvious lighting effect, which makes the texture appear insufficiently detailed. At the same time, the shadow on the right is a highly stylized and directly drawn “fake” shadow, when the characters move, the shadows appear quite stiff. Besides, in addition to self-shadowing, more complex diffuse reflection and other effects, the character texture maps on the left obviously use more complex and more close to reality texture, rather than simplified ordinary cartoon style texture. This also greatly increases the richness of the game image.
In general, textures give a more realistic response to dynamic lighting, producing realistic real-time shadows and diffuse reflection effects, which are manifestations of PBR. However, directly applying the PBR effect to ready-made NPR effects will make the overall model texture look like "plastic". If furthermore, the model will become a anime figures(anime character models) feel. Unless the manufacturer initially wanted anime figures style game graphics, otherwise, generally speaking, this is not what the manufacturer wants, it looks too close to reality. Therefore, the main difficulty is how to achieve the organic combination of the two styles, which not only requires rendering personnel to have solid technical skills, but also essential artistic skills. Although the effect of Hybrid Toon Shading is indeed better than that of traditional Toon Shading, due to technical problems leading to high development threshold, it is difficult for many small mobile game factories to use this rendering method, and basically only mobile game manufacturers with a certain scale in the research and development. While the popularity of Hybrid Toon Shading has been restricted, but given that it is a relatively new rendering method, it is understandable to develop slowly at this stage.
Currently, hybrid toon shading in mobile games is characterized by its enhanced aesthetics, artistic freedom and cross-platform compatibility. This technique allows developers to create visually striking game graphics that attract players with their distinctive look and feel. By leveraging hybrid toon shading, developers can experiment with different styles, colors, and effects to enhance player immersion and create memorable gaming experiences across various platforms.
5. Conclusion
Overall, this article provides an in-depth exploration of toon shading and its application in mobile games. It begins by defining toon shading and elucidating its two primary advantages within the gaming context. The article then delves into the technical process of traditional toon shading while highlighting its inherent limitations. Furthermore, it introduces hybrid toon shading, offering a comprehensive overview of its technical process and distinguishing it from traditional methods. Through this comparison, the article effectively underscores the advantages and disadvantages of hybrid toon shading, shedding light on its current application status.
Given the discerning nature of the player base, particularly in the realm of two-dimensional gaming, the necessity for toon shading becomes apparent. Hybrid toon shading emerges as a solution to address aesthetic fatigue and the heightened demand for superior image quality among players. Leveraging the inherent visual superiority of hybrid toon shading, the technology demonstrates immense potential and ample room for development.
Envisioning a future where advancements in technology yield even more refined two-dimensional visuals in gaming, thereby offering players a fresh and immersive visual experience.
References
[1]. W. Qian, J. Cao, D. Xu, et al. Research status and prospects of non realistic rendering technology. Chinese Journal of Image and Graphics, 2020,25 (07): 1283-1295
[2]. X. Luan Research and Application of Shader Technology Based on CG. China Academy of Fine Arts, 2019
[3]. R. Mao. Role Games and Unique Players -- Viewing the Conservative Face of anime Players from Genshin Impact. China Book Review, 2023 (11): 29-40
[4]. T. Wang, G. Fang. Research on the Chinese Translation of Japanese anime Popular Words from the Perspective of Memetics. Western Academic Journal, 2023 (22): 52-55.
[5]. Mihoyo. Honkai:Star Rail [Video game].2023, Mihoyo
[6]. Kojima Productions. Death Stranding [Video game]. 2019, Kojima Productions
[7]. Nexon Games. Blue Archive [Video game]. 2021, Nexon Games
[8]. Xinhua News Agency The 2023 China Game Industry Report has been officially released December 15, 2023 Retrieved on April 27, 2022
[9]. X. Xu. The anime Game New Year: Emerging New Products and Intensified Competition. China Business News, 2024-01-01 (B16)
[10]. H. Zhou, Research on the Application of Cartoon Rendering Technology in Creative Animation . Shanghai University of Engineering and Technology, 2023.
[11]. H. An, Wang Baohui. Research on Cartoon Style Rendering Method for Building Models Based on UE4. Network New Media Technology, 2023,12 (02): 19-29.
[12]. L. Chen. Analysis of 3D Game Engine Architecture and Game Animation Rendering Technology. New Technologies and Products in China, 2022 (01): 16-18.
[13]. Y. Chen, Research on Image Cartoon Style Rendering Based on Deep Learning. Shanghai Jiao Tong University, 2022.
[14]. Mihoyo. Genshin [Video game]. 2020, Mihoyo
[15]. Netease. Onmyoji [Video game].2016, Netease
[16]. Mihoyo. Honkai Impact 3rd [Video game]. 2016, Mihoyo
[17]. Unity Official. Unity Celebrity Guests | NetEase TA Celebrity Brings You closer to Toon Shading (Part 2): Cartoon Performance Based on PBR. November 8, 2021.
[18]. Seasun Entertainment. Snowbreak: Containment Zone. [Video game]. 2023, Seasun Entertainment
[19]. HyperGryph.Ex Astris [Video game]. 2024, HyperGryph
[20]. Sunborn Network Technology. Girls' Frontline 2: Exilium [Video game].2023, Sunborn Network Technology
[21]. HyperGryph.Arknights: Endfield [Video game]. 2023, HyperGryph
Cite this article
Zheng,X. (2024). The application and development of toon shading technology in mobile games. Applied and Computational Engineering,76,302-310.
Data availability
The datasets used and/or analyzed during the current study will be available from the authors upon reasonable request.
Disclaimer/Publisher's Note
The statements, opinions and data contained in all publications are solely those of the individual author(s) and contributor(s) and not of EWA Publishing and/or the editor(s). EWA Publishing and/or the editor(s) disclaim responsibility for any injury to people or property resulting from any ideas, methods, instructions or products referred to in the content.
About volume
Volume title: Proceedings of the 2nd International Conference on Software Engineering and Machine Learning
© 2024 by the author(s). Licensee EWA Publishing, Oxford, UK. This article is an open access article distributed under the terms and
conditions of the Creative Commons Attribution (CC BY) license. Authors who
publish this series agree to the following terms:
1. Authors retain copyright and grant the series right of first publication with the work simultaneously licensed under a Creative Commons
Attribution License that allows others to share the work with an acknowledgment of the work's authorship and initial publication in this
series.
2. Authors are able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the series's published
version of the work (e.g., post it to an institutional repository or publish it in a book), with an acknowledgment of its initial
publication in this series.
3. Authors are permitted and encouraged to post their work online (e.g., in institutional repositories or on their website) prior to and
during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of published work (See
Open access policy for details).
References
[1]. W. Qian, J. Cao, D. Xu, et al. Research status and prospects of non realistic rendering technology. Chinese Journal of Image and Graphics, 2020,25 (07): 1283-1295
[2]. X. Luan Research and Application of Shader Technology Based on CG. China Academy of Fine Arts, 2019
[3]. R. Mao. Role Games and Unique Players -- Viewing the Conservative Face of anime Players from Genshin Impact. China Book Review, 2023 (11): 29-40
[4]. T. Wang, G. Fang. Research on the Chinese Translation of Japanese anime Popular Words from the Perspective of Memetics. Western Academic Journal, 2023 (22): 52-55.
[5]. Mihoyo. Honkai:Star Rail [Video game].2023, Mihoyo
[6]. Kojima Productions. Death Stranding [Video game]. 2019, Kojima Productions
[7]. Nexon Games. Blue Archive [Video game]. 2021, Nexon Games
[8]. Xinhua News Agency The 2023 China Game Industry Report has been officially released December 15, 2023 Retrieved on April 27, 2022
[9]. X. Xu. The anime Game New Year: Emerging New Products and Intensified Competition. China Business News, 2024-01-01 (B16)
[10]. H. Zhou, Research on the Application of Cartoon Rendering Technology in Creative Animation . Shanghai University of Engineering and Technology, 2023.
[11]. H. An, Wang Baohui. Research on Cartoon Style Rendering Method for Building Models Based on UE4. Network New Media Technology, 2023,12 (02): 19-29.
[12]. L. Chen. Analysis of 3D Game Engine Architecture and Game Animation Rendering Technology. New Technologies and Products in China, 2022 (01): 16-18.
[13]. Y. Chen, Research on Image Cartoon Style Rendering Based on Deep Learning. Shanghai Jiao Tong University, 2022.
[14]. Mihoyo. Genshin [Video game]. 2020, Mihoyo
[15]. Netease. Onmyoji [Video game].2016, Netease
[16]. Mihoyo. Honkai Impact 3rd [Video game]. 2016, Mihoyo
[17]. Unity Official. Unity Celebrity Guests | NetEase TA Celebrity Brings You closer to Toon Shading (Part 2): Cartoon Performance Based on PBR. November 8, 2021.
[18]. Seasun Entertainment. Snowbreak: Containment Zone. [Video game]. 2023, Seasun Entertainment
[19]. HyperGryph.Ex Astris [Video game]. 2024, HyperGryph
[20]. Sunborn Network Technology. Girls' Frontline 2: Exilium [Video game].2023, Sunborn Network Technology
[21]. HyperGryph.Arknights: Endfield [Video game]. 2023, HyperGryph