{"id":1571,"date":"2024-06-06T18:37:48","date_gmt":"2024-06-06T18:37:48","guid":{"rendered":"http:\/\/ldbart.ca\/?page_id=1571"},"modified":"2024-06-10T17:49:09","modified_gmt":"2024-06-10T17:49:09","slug":"retrofit","status":"publish","type":"page","link":"http:\/\/ldbart.ca\/?page_id=1571","title":{"rendered":"Retrofit"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1571\" class=\"elementor elementor-1571\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aa77634 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"aa77634\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-4bf76c7\" data-id=\"4bf76c7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a9dfe69 elementor-widget elementor-widget-image\" data-id=\"a9dfe69\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"961\" height=\"961\" src=\"http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit.jpg\" class=\"attachment-full size-full wp-image-1579\" alt=\"\" srcset=\"http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit.jpg 961w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit-300x300.jpg 300w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit-150x150.jpg 150w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit-768x768.jpg 768w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-ac5cb89\" data-id=\"ac5cb89\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3912e87 elementor-widget elementor-widget-heading\" data-id=\"3912e87\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-large\">Retrofit<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e28e3b elementor-widget elementor-widget-text-editor\" data-id=\"4e28e3b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h4><span style=\"font-weight: normal;\">For my first entirely procedural HLSL shader made in Unreal, I created an animated shader that employs simple mathematical functions to generate a retro style pattern.<\/span><\/h4>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1b9f10 elementor-widget elementor-widget-text-editor\" data-id=\"f1b9f10\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h4>By Lauren D. Bhagwandat<\/h4>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f1adddf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f1adddf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fdc6bd6\" data-id=\"fdc6bd6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f372501 elementor-widget elementor-widget-video\" data-id=\"f372501\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;vimeo&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo Video Player\" src=\"https:\/\/player.vimeo.com\/video\/924515890?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f2fc4dd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f2fc4dd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5671fd7\" data-id=\"5671fd7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e9c582 elementor-view-stacked elementor-position-left elementor-shape-circle elementor-mobile-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box\" data-id=\"5e9c582\" data-element_type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon elementor-animation-\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-lightbulb\"><\/i>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tThe Inspiration\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tI came across the amazing work of <a style=\"color: #f93db6\" href=\"https:\/\/www.shadertoy.com\/user\/kishimisu\" target=\"_blank\">kishimisu on Shadertoy<\/a> as well as his <a style=\"color: #f93db6\" href=\"https:\/\/www.youtube.com\/@kishimisu\" target=\"_blank\">tutorials on YouTube<\/a> and felt compelled to attempt to recreate them in three-dimensional space. I chose to do so in Unreal, which then inspired me to play around with mathematical functions in HLSL to generate procedurally animated shaders.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9434281 elementor-view-stacked elementor-position-left elementor-shape-circle elementor-mobile-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box\" data-id=\"9434281\" data-element_type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon elementor-animation-\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"far fa-check-square\"><\/i>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tPurpose\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tThe purpose of this project was to explore the shading capabilities of Unreal Engine 5.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f59a63f elementor-view-stacked elementor-position-left elementor-shape-circle elementor-mobile-position-top elementor-vertical-align-top elementor-widget elementor-widget-icon-box\" data-id=\"f59a63f\" data-element_type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon elementor-animation-\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-laptop-code\"><\/i>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tTechnology\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tThis shader was written in the High Level Shading Language (HLSL) along with a shading network setup in UE5's material graph editor. The final animation was composited in Adobe After Effects.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-29f974f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"29f974f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0ca844a\" data-id=\"0ca844a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5ab430f elementor-widget elementor-widget-heading\" data-id=\"5ab430f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><span style=\"caret-color: rgb(71, 69, 69); color: rgb(71, 69, 69); font-family: Roboto, sans-serif; font-size: 41px; font-weight: 600; letter-spacing: -0.800000011920929px; text-align: left; text-transform: none;\">Method<\/span><\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-60c4982 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60c4982\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d5d9565\" data-id=\"d5d9565\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b39a327 elementor-widget elementor-widget-text-editor\" data-id=\"b39a327\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\">I started by implementing in HLSL the <\/span><a style=\"font-weight: var( --e-global-typography-text-font-weight ); color: #f93db6; outline: 0px; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\" href=\"https:\/\/iquilezles.org\/articles\/palettes\/\" target=\"_blank\" rel=\"noopener\">procedural palette by Inigo Quilez<\/a><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve; font-weight: var( --e-global-typography-text-font-weight );\">. This involved creating four float3 Constant nodes defining the desired colours. <\/span><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve; font-weight: var( --e-global-typography-text-font-weight );\">I created a Custom node where I inputted the code for the palette which took the four colour nodes and Time node as inputs. <\/span><\/p>\n<p><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\">Another Custom node was used to hold the 20 lines of HLSL code that generated the animated pattern. To account for the object&#8217;s position in world space beyond the origin, I made sure to offset the position with the following code: <\/span><\/p>\n<pre><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\">float3 offsetWP = WP-OP (WP being the absolute world position, OP being the object's absolute position)<\/span><\/pre>\n<p><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\">In a for loop, the distance was computed as the length of offsetted world position. <\/span><\/p>\n<p><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\">Finally, for pure aesthetic purposes, I added a slightly smooth finish to the shader by decreasing the roughness to 0.1.<\/span><\/p>\n<p><span style=\"color: #726f6f; font-family: Poppins, sans-serif; font-size: 16px; white-space-collapse: preserve;\">The final shader network is as follows:<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d1b389 elementor-widget elementor-widget-image\" data-id=\"0d1b389\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"2276\" height=\"1384\" src=\"http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean.png\" class=\"attachment-full size-full wp-image-1603\" alt=\"\" srcset=\"http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean.png 2276w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean-300x182.png 300w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean-1024x623.png 1024w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean-768x467.png 768w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean-1536x934.png 1536w, http:\/\/ldbart.ca\/wp-content\/uploads\/2024\/06\/retrofit_network_clean-2048x1245.png 2048w\" sizes=\"(max-width: 2276px) 100vw, 2276px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Retrofit For my first entirely procedural HLSL shader made in Unreal, I created an animated shader that employs simple mathematical functions to generate a retro style pattern. By Lauren D. Bhagwandat https:\/\/vimeo.com\/924515890 The Inspiration I came across the amazing work&#8230; <a href=\"http:\/\/ldbart.ca\/?page_id=1571\" class=\"read-more\">Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/ldbart.ca\/index.php?rest_route=\/wp\/v2\/pages\/1571"}],"collection":[{"href":"http:\/\/ldbart.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/ldbart.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/ldbart.ca\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/ldbart.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1571"}],"version-history":[{"count":42,"href":"http:\/\/ldbart.ca\/index.php?rest_route=\/wp\/v2\/pages\/1571\/revisions"}],"predecessor-version":[{"id":1828,"href":"http:\/\/ldbart.ca\/index.php?rest_route=\/wp\/v2\/pages\/1571\/revisions\/1828"}],"wp:attachment":[{"href":"http:\/\/ldbart.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}