{"id":1696,"date":"2024-05-06T23:49:41","date_gmt":"2024-05-06T21:49:41","guid":{"rendered":"http:\/\/www.michalorzelek.com\/blog\/?p=1696"},"modified":"2024-05-23T16:22:10","modified_gmt":"2024-05-23T14:22:10","slug":"stylized-glass-in-unreal-engine","status":"publish","type":"post","link":"https:\/\/www.michalorzelek.com\/blog\/stylized-glass-in-unreal-engine\/","title":{"rendered":"Stylized Glass in Unreal Engine"},"content":{"rendered":"\n<p>It&#8217;s been over 8 and half year since I released the &#8222;<strong><a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/advanced-glass-material-pack\" data-type=\"link\" data-id=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/advanced-glass-material-pack\">Advanced Glass Material Pack<\/a><\/strong>&#8221; on the Unreal Engine Marketplace. It quickly became popular and it felt really nice when it received good feedback. What&#8217;s funnier &#8211; some people from the Unreal Engine community started to recognize me as <strong>&#8222;The Glass Guy&#8221;<\/strong>. Recently, I decided to challenged myself again and this time create a procedural stylized\/toon glass material.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-glass\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Cover.jpg\" alt=\"\" class=\"wp-image-1697\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Cover.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Cover-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Cover-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Cover-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><br>Why Stylized?<\/h2>\n\n\n\n<p>Current game engines such as Unreal and Unity, along with advanced rendering technologies, continually elevate the standards of photorealism in games (or any real-time projects). Moreover, marketplaces and scan libraries like Quixel Megascans provide high-quality content, making photorealistic graphics more accessible than ever before. As a result, we observe an increased number of games being released with high-fidelity graphics. It has become extremely difficult to stand out in this highly competitive and overcrowded field. I believe opting for a stylized art direction can potentially help you get noticed.<\/p>\n\n\n\n<p>As a CG Generalist\/Tech Artist, challenging oneself frequently and exploring different ideas\/concepts are essential. I&#8217;ve set myself a goal: to build an advanced and flexible framework for Unreal Engine users interested in exploring a stylized approach in their projects. <a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-glass\"><strong>Stylized Glass<\/strong><\/a> is the first step in this journey.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Stylized Glass Material for Unreal Engine 5 Overview\" width=\"474\" height=\"267\" src=\"https:\/\/www.youtube.com\/embed\/8p_MsNGgveE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fake Reflections<\/h2>\n\n\n\n<p>After watching lots of references from anime or cartoons, I quickly realized I couldn&#8217;t rely on Unreal&#8217;s default reflection data. Lumen or screen-space reflections wouldn&#8217;t do the job when aiming to achieve hard-shaped, often fixed patterns on a surface. I decided to use a pre-defined reflection mask and allow the user to specify how it projects onto objects.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Camera-based projection works the best with curved shapes like bottles, wine glasses, etc.<\/li>\n\n\n\n<li>Screen-space projection is more effective on flat surfaces like windows.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_02.jpg\" alt=\"\" class=\"wp-image-1702\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_02.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_02-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_02-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_02-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>The user can specify an RGB packed texture and control the angle, scale and offset to get the desired results. Additionally, the &#8222;Sharp Reflection&#8221; option functions as a threshold value for a black-and-white mask, enhancing the pattern sharpness even on low-resolution textures.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_03.jpg\" alt=\"\" class=\"wp-image-1703\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_03.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_03-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_03-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_03-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Since the shader&#8217;s blend mode is additive and it doesn&#8217;t utilize scene reflections, I incorporated the &#8222;Directional Light&#8221; as a source for fake &#8222;spec&#8221; highlight. The shader calculates a dot product of the object&#8217;s surface normal and the directional light angle. To make it more adjustable, I added a bias parameter to control the size of the reflection. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Normal Map<\/h2>\n\n\n\n<p>I was exploring different ways to affect the appearance of reflections and hard edges, and applying a normal map seemed like a good idea. Since my goal was to build a fully procedural shader, I didn&#8217;t want the user to waste time on creating custom UVs for the mesh. Therefore, I added a triplanar mapping for normal maps with a local scale option. Simple wave or a diamond patterns produce interesting results with slight surface imperfections.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_04.jpg\" alt=\"\" class=\"wp-image-1705\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_04.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_04-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_04-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_04-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Even more control<\/h2>\n\n\n\n<p>The truth is, the more control you have in a shader, the better you can prepare your assets. I implemented an opacity override feature using vertex color data. This allows you to precisely paint faces on a mesh and determine whether they should be more opaque or not. This feature is especially useful when custom depth is enabled (which is typically recommended for most cases). For instance, a whisky glass is a good example. I painted the bottom of the glass to make its shape more pronounced.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_05.jpg\" alt=\"\" class=\"wp-image-1707\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_05.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_05-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_05-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_05-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><br>Here&#8217;s the list of all parameters:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_08.jpg\" alt=\"\" class=\"wp-image-1709\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_08.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_08-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_08-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_08-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><strong>Surface<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color<\/li>\n\n\n\n<li>Opacity<\/li>\n\n\n\n<li>Custom Depth Bias<\/li>\n\n\n\n<li>Fresnel Intensity<\/li>\n\n\n\n<li>Fresnel Exp<\/li>\n\n\n\n<li>Fade Distance Blend<\/li>\n<\/ul>\n\n\n\n<p><strong>Hard Edge<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Intensity<\/li>\n\n\n\n<li>Scale<\/li>\n\n\n\n<li>Offset<\/li>\n<\/ul>\n\n\n\n<p><strong>Fake Reflection<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ScreenSpace On\/Off<\/li>\n\n\n\n<li>Intensity<\/li>\n\n\n\n<li>Reflection Mask<\/li>\n\n\n\n<li>Mask Channel<\/li>\n\n\n\n<li>Mask Scale<\/li>\n\n\n\n<li>Mask Angle<\/li>\n\n\n\n<li>Mask Offset<\/li>\n\n\n\n<li>Mash Sharp On\/Off<\/li>\n<\/ul>\n\n\n\n<p><strong>Fake Directional Light<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Intensity<\/li>\n\n\n\n<li>Bias<\/li>\n<\/ul>\n\n\n\n<p><strong>Normal Map<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Intensity<\/li>\n\n\n\n<li>Normal Map Texture<\/li>\n\n\n\n<li>Local Scale On\/Off<\/li>\n\n\n\n<li>Texture Scale<\/li>\n<\/ul>\n\n\n\n<p><strong>Outline<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Intensity<\/li>\n\n\n\n<li>Size in pixels<\/li>\n\n\n\n<li>Distance<\/li>\n<\/ul>\n\n\n\n<p>Well, with all the exposed parameters, I can create various glass types in a matter of seconds.<br>Here are some examples of a statue from Starter Content:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_07.jpg\" alt=\"\" class=\"wp-image-1708\" srcset=\"https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_07.jpg 1920w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_07-512x288.jpg 512w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_07-768x432.jpg 768w, https:\/\/www.michalorzelek.com\/blog\/wp-content\/uploads\/2024\/05\/StylizedGlass_Preview_07-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>It&#8217;s been a lot of fun to create this glass material and I hope you like it. <\/p>\n\n\n\n<p>The shader is available on the Unreal Engine Marketplace: <a href=\"https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-glass\"><strong>https:\/\/www.unrealengine.com\/marketplace\/en-US\/product\/stylized-glass<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s been over 8 and half year since I released the &#8222;Advanced Glass Material Pack&#8221; on the Unreal Engine Marketplace. It quickly became popular and it felt really nice when it received good feedback. What&#8217;s funnier &#8211; some people from the Unreal Engine community started to recognize me as &#8222;The Glass Guy&#8221;. Recently, I decided &hellip; <a href=\"https:\/\/www.michalorzelek.com\/blog\/stylized-glass-in-unreal-engine\/\" class=\"more-link\">Czytaj dalej <span class=\"screen-reader-text\">Stylized Glass in Unreal Engine<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[62],"class_list":["post-1696","post","type-post","status-publish","format-standard","hentry","category-misc","tag-stylized"],"_links":{"self":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts\/1696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/comments?post=1696"}],"version-history":[{"count":10,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts\/1696\/revisions"}],"predecessor-version":[{"id":1718,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/posts\/1696\/revisions\/1718"}],"wp:attachment":[{"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/media?parent=1696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/categories?post=1696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.michalorzelek.com\/blog\/wp-json\/wp\/v2\/tags?post=1696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}