{"id":7865,"date":"2017-08-09T12:20:48","date_gmt":"2017-08-09T10:20:48","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/?p=7865\/"},"modified":"2020-01-25T19:33:41","modified_gmt":"2020-01-25T18:33:41","slug":"3d-ar-vr-style-definition","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/3d-ar-vr-style-definition\/","title":{"rendered":"Efficient, aesthetic, suitable \u2013 style definition\tfor 3D, AR, and VR"},"content":{"rendered":"<p>Visual design has a long and storied tradition. Still it is a lively and dynamic topic and constantly exposed to current influences and trends. With the emerging technologies of virtual reality (VR) and augmented reality (AR) designers have to learn how to create impressive and positive experiences for users of these media.<\/p>\n<p>There are hundreds of tutorials on developing 3D applications, but one part routinely left out in these tutorials is the style definition for the visualization. There is a wide range of visual options that carry distinct advantages and disadvantages.<\/p>\n<p>This article is a quick summary of possible styles, each illustrated with examples from video games.<\/p>\n<h3>Photorealism<\/h3>\n<p>Photorealism is characterized by being as lifelike as possible \u2013 from detailed textures to high-polygon models to real-world lighting.<\/p>\n<div id=\"attachment_7872\" style=\"width: 1930px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7872\" class=\"wp-image-7872 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-HorizonZeroDawn.png\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-HorizonZeroDawn.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-HorizonZeroDawn-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-HorizonZeroDawn-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-HorizonZeroDawn-1024x576.png 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><p id=\"caption-attachment-7872\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/www.guerrilla-games.com\/play\/horizon\" target=\"_blank\" rel=\"noopener noreferrer\">Horizon Zero Dawn<\/a><\/p><\/div>\n<p><!--more--><\/p>\n<p>While there are different variations of photorealism and each application differs from the next there are some common principles. The photorealistic style offers a user experience with maximum immersion, a realistic world resembling current movies.<\/p>\n<p>Especially objects like single machine parts in an industrial context are well suited for a photorealistic style, keeping very close to the real-world product.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7873\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-SEW.png\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-SEW.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-SEW-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-SEW-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/01-Fotoreal-SEW-1024x576.png 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>The price of this realism is a lot of work. The high detail grade requires a correspondent development effort. In short, photorealism aims to be as life-like as possible, with high demands on hardware and implementation.<\/p>\n<h3>Mixed<\/h3>\n<p>The mixed style is not an actual style but an umbrella term for the endless possible combinations of different styles. For example, a style could use realistic lighting and textures but exaggerate the proportions of the models. It is a stylized view of reality with a variable degree of abstraction.<\/p>\n<div id=\"attachment_7875\" style=\"width: 1034px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7875\" class=\"wp-image-7875 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-Brink.jpg\" alt=\"\" width=\"1024\" height=\"640\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-Brink.jpg 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-Brink-300x188.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-Brink-768x480.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-7875\" class=\"wp-caption-text\">Source: <a href=\"http:\/\/www.neoseeker.com\/Articles\/Games\/Reviews\/brink_pc\/\" target=\"_blank\" rel=\"noopener noreferrer\">Brink<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_7876\" style=\"width: 1930px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7876\" class=\"wp-image-7876 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-TeamFortress2.jpg\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-TeamFortress2.jpg 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-TeamFortress2-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-TeamFortress2-768x432.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/02-Mixed-TeamFortress2-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><p id=\"caption-attachment-7876\" class=\"wp-caption-text\">Source: <a href=\"http:\/\/www.teamfortress.com\/artwork.php\" target=\"_blank\" rel=\"noopener noreferrer\">Team Fortress 2<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<p>In this style, the developers have a high degree of freedom for their design and can adapt the style to the use case. Mixed style is suited for many applications. It can create a coherent world that appears realistic enough so users accept it without hesitation, but still has the freedom and possibilities of a stylized display. For a SEW Eurodrive project we recreated the company\u2019s trade show booth in virtual reality in a mixed style. Users consistently described a strong immersion.<\/p>\n<p><div class=\"MediaEmbedContainer\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/vuuB2ZM1j00\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div><\/p>\n<p>In cooperation with Festo we created an application to display products using augmented reality. Products are displayed virtually in a real-world context and this way can be zoomed or viewed from inside.<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7888\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3dVisualisierung-Festo.jpg\" alt=\"\" width=\"2048\" height=\"1229\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3dVisualisierung-Festo.jpg 2048w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3dVisualisierung-Festo-300x180.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3dVisualisierung-Festo-768x461.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/3dVisualisierung-Festo-1024x615.jpg 1024w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/p>\n<p>The mixed style is the most varied style and therefore used most often. The variable grade of abstraction enables designers to match the requirements of the device or application. It is at home between realism and complete abstraction, a stylized display of reality with varying implementation costs.<\/p>\n<h3>Cel Shading<\/h3>\n<p>Cel Shading is a display style that renders 3D objects so they appear hand-drawn similar to a classic animated movie.<\/p>\n<div id=\"attachment_7878\" style=\"width: 1510px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7878\" class=\"wp-image-7878 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Celshading_teapot_large.png\" alt=\"\" width=\"1500\" height=\"363\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Celshading_teapot_large.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Celshading_teapot_large-300x73.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Celshading_teapot_large-768x186.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Celshading_teapot_large-1024x248.png 1024w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><p id=\"caption-attachment-7878\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cel_shading\" target=\"_blank\" rel=\"noopener noreferrer\">Wikipedia\/Cel Shading<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<p>In this style, the model is not shaded smoothly but with only a few levels of brightness. Usually very simple textures are used to further enhance the cartoon look.<\/p>\n<div id=\"attachment_7877\" style=\"width: 1290px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7877\" class=\"wp-image-7877 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-CelShading-Naruto.jpg\" alt=\"\" width=\"1280\" height=\"720\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-CelShading-Naruto.jpg 1280w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-CelShading-Naruto-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-CelShading-Naruto-768x432.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/03-CelShading-Naruto-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><p id=\"caption-attachment-7877\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/www.igdb.com\/games\/naruto-shippuden-ultimate-ninja-storm-4\" target=\"_blank\" rel=\"noopener noreferrer\">Naruto Shippuden: Ultimate Ninja Storm 4<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<p>Cel Shading offers simple models and colors that can improve perception and readability of the application. Well used cel shading can also become the foundation of a unique look and feel.<\/p>\n<p>A coherent cartoon world can have a higher acceptance than a shoddy realistic world. The style makes visual design easier, leaving more creative freedom. For example, animations and effects can be strongly emphasized or exaggerated without becoming irritating \u2013 because the world does not have to be realistic to be coherent.<\/p>\n<p><div class=\"MediaEmbedContainer\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/6Ve5fY_4Jsw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div><\/p>\n<p>The decision to use a cel shaded style strongly depends on the respective application\u2019s context. When a photorealistic display is unnecessary, cel shading can be used to visualize many things very well. The style\u2019s strength lies in highlighting playful elements. It should be used accordingly.<\/p>\n<p>Cel shading gives 3D objects clear readability reminiscent of classic cartoon animation. It appears playful and friendly. Thanks to a clear visual structure it can be easily used as long as no photorealistic displays are needed in the application.<\/p>\n<h3>Low Poly<\/h3>\n<p>Early 3D video games had to follow strict limits for the creation of objects. They capped texture size and number of used polygons. Today, thanks to increasing hardware performance those restrictions are gone, making use of a limited 3D style a conscious decision.<\/p>\n<div id=\"attachment_7880\" style=\"width: 1930px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7880\" class=\"wp-image-7880 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Overland.png\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Overland.png 1920w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Overland-300x169.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Overland-768x432.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Overland-1024x576.png 1024w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><p id=\"caption-attachment-7880\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/www.igdb.com\/games\/overland\/presskit\" target=\"_blank\" rel=\"noopener noreferrer\">Overland<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<div id=\"attachment_7881\" style=\"width: 2890px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7881\" class=\"wp-image-7881 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Superhot.jpg\" alt=\"\" width=\"2880\" height=\"1620\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Superhot.jpg 2880w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Superhot-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Superhot-768x432.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/04-LowPoly-Superhot-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 2880px) 100vw, 2880px\" \/><p id=\"caption-attachment-7881\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/superhotgame.com\/PRESSKIT\/\" target=\"_blank\" rel=\"noopener noreferrer\">Supershot<\/a><\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Graphic effects that were not possible in early 3D applications give a new charm to the rather angular style. Low-poly objects appear clear and illustrative. The style is not only visually strong and renders quickly but may also be the most efficient to develop. Textures are usually monochrome or low-detail, mood is set through lighting and effects. Unlike for photorealistic style there is no need for large implementation efforts.<\/p>\n<p>Low Poly is a visual style well suited to show processes clearly while keeping app development time down. Like with cel shading, the world is displayed coherently without mixing styles. This visual style is appealing and also quick and efficient to implement.<\/p>\n<h3>Conclusion<\/h3>\n<p>The importance of three-dimensional space for human-machine interaction is evolving due to 3D visualization, augmented and virtual reality. One advantage is that the degrees of freedom of 3D application design are no longer limited by technical infrastructure which makes it possible to support every use case through an appropriate form of visualization. The styles presented in this article serve as starting point and inspiration, only showing a selection of possible styling methods. The possibilities in 3D space are manifold and just wait to be explored in projects.<\/p>\n<p><em>If you are interested in the subject and in 3D services you can find more examples and informations at our\u00a0<a href=\"http:\/\/www.centigrade.de\/en\/services\/3d-visualization\" target=\"_blank\" rel=\"noopener noreferrer\">3D Visualization<\/a> services section.<\/em><\/p>\n<h3>Coautors<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7901\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Clemens-Lutsch-Lucas-Plabst.jpg\" alt=\"\" width=\"1200\" height=\"674\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Clemens-Lutsch-Lucas-Plabst.jpg 1200w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Clemens-Lutsch-Lucas-Plabst-300x169.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Clemens-Lutsch-Lucas-Plabst-768x431.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Clemens-Lutsch-Lucas-Plabst-1024x575.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>This article has been created in cooperation with Lucas Plabst who completed a internship for his study in our office in Munich, spring 2017. The progress in finding a 3D \/ AR \/ VR style is an important ingredience that is necessary to successfully adapt new technologies.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":51,"featured_media":0,"template":"","tags":[666,585,587,362,24,594],"class_list":["post-7865","blog","type-blog","status-publish","hentry","tag-3d-en-2","tag-ar-2","tag-augmented-reality-2","tag-virtual-reality-en","tag-visual-design","tag-vr-2"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/7865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/51"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/7865\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=7865"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=7865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}