{"id":393,"date":"2021-02-21T23:07:27","date_gmt":"2021-02-21T23:07:27","guid":{"rendered":"http:\/\/sinethi.com\/?p=393"},"modified":"2023-04-20T04:05:59","modified_gmt":"2023-04-20T04:05:59","slug":"colorfull-bumpercars","status":"publish","type":"post","link":"https:\/\/sinethi.com\/?p=393","title":{"rendered":"Colorfull BumperCars"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"640\" height=\"361\" src=\"https:\/\/sinethi.com\/wp-content\/uploads\/2021\/02\/005_1-Colored-Bumpercars.png\" alt=\"\" class=\"wp-image-394\" srcset=\"https:\/\/sinethi.com\/wp-content\/uploads\/2021\/02\/005_1-Colored-Bumpercars.png 640w, https:\/\/sinethi.com\/wp-content\/uploads\/2021\/02\/005_1-Colored-Bumpercars-300x169.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption>Colored BumperCars at startup<\/figcaption><\/figure>\n\n\n\n<p>BumperCars are now ingame as you can see and hey &#8211; they&#8217;re pretty colorfull aren&#8217;t they? But how did we do it?<\/p>\n\n\n\n<p>First of all, freeze did an unwrap (artitsts stuff meaning to unfold a 3D model into a plane in 2D with a digital magic wand or maybe blender &#8211; did not listen very well to his explanations). Since Unity uses PBR (Physcally based rendering), we need several image to create our materials for base color, metallness, smoothness and a normal map for tiny details.<\/p>\n\n\n\n<p>We could have used different base color maps, one for each color, but then we would have to change it over and over again for each possible color. That&#8217;s rather stupid and boring work to do. That&#8217;s why we thought about creating a shader with Unity&#8217;s Shader Graph Package. But there are areas, where we want a color to change and others to stay. Though we added a grayscale mask map, which defines white areas to change color and black, which will stay unchanged. At last we need color and brightness values. Now wer&#8217;re able to change a color on the fly. Nice, huh?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"2346\" height=\"1310\" src=\"https:\/\/sinethi.com\/wp-content\/uploads\/2021\/02\/005_2-MaskedColorShader.png\" alt=\"\" class=\"wp-image-395\"\/><figcaption>MaskedColorShader shader graph <\/figcaption><\/figure>\n\n\n\n<p>Et Voila, here is an overview of our <strong>MaskedColorShader<\/strong> and our material for the blue BumperCar in Unity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/sinethi.com\/wp-content\/uploads\/2021\/02\/005_3-MaskedColorShaderMaterial.png\" alt=\"\" class=\"wp-image-396\" width=\"352\" height=\"483\"\/><figcaption>MaskedColorShaderMaterial with values you can change<\/figcaption><\/figure>\n\n\n\n<p>Maybe in a later post we&#8217;ll explain that shader in detail, if you&#8217;re interested in. So long, and thanks for all the (colored) fish.<\/p>\n\n\n\n<p>More info on BumperCar game &#8211; <a href=\"https:\/\/sinethi.com\/?page_id=139\">GET COLORIZED<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>BumperCars are now ingame as you can see and hey &#8211; they&#8217;re pretty colorfull aren&#8217;t they? But how did we do it? First of all, freeze did an unwrap (artitsts stuff meaning to unfold a 3D model into a plane in 2D with a digital magic wand or maybe blender &#8211; did not listen very &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sinethi.com\/?p=393\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Colorfull BumperCars&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[3,7,6,4,5],"_links":{"self":[{"href":"https:\/\/sinethi.com\/index.php?rest_route=\/wp\/v2\/posts\/393"}],"collection":[{"href":"https:\/\/sinethi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sinethi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sinethi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sinethi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=393"}],"version-history":[{"count":2,"href":"https:\/\/sinethi.com\/index.php?rest_route=\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/sinethi.com\/index.php?rest_route=\/wp\/v2\/posts\/393\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/sinethi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sinethi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sinethi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}