{"id":821,"date":"2011-07-20T01:28:25","date_gmt":"2011-07-20T05:28:25","guid":{"rendered":"http:\/\/www.oztalay.com\/matt\/?page_id=821"},"modified":"2012-01-19T11:50:00","modified_gmt":"2012-01-19T16:50:00","slug":"flaming-rainbow-material-udk","status":"publish","type":"page","link":"http:\/\/www.oztalay.com\/matt\/tutorials\/flaming-rainbow-material-udk\/","title":{"rendered":"Flaming Rainbow Material &#8211; UDK"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/player.vimeo.com\/video\/26660704?byline=0&amp;portrait=0\" frameborder=\"0\" width=\"650\" height=\"367\"><\/iframe><\/p>\n<p>Because rainbows are more cool when they&#8217;re on fire.<\/p>\n<p>The material in UDK works by modifying a base rainbow texture&#8217;s UVs, the intensity of that rainbow, and its opacity. I put it together as a bit of a shader building challenge in Unreal. One of those &#8220;I wonder if I can&#8230;&#8221; sort of things.<\/p>\n<p>Things to remember: &#8220;Lerp&#8221; is a verb.<\/p>\n<p>Head over to Hourence&#8217;s if you need to brush up on\u00a0<a href=\"http:\/\/www.hourences.com\/ue3-material-editor-part1\/\">Material Editor Basics<\/a>\u00a0for UDK.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/01_materialSetup.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-830 alignnone\" title=\"01_materialSetup\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/01_materialSetup.jpg\" alt=\"\" width=\"246\" height=\"105\" \/><\/a><\/p>\n<p>To start, set Blend Mode to &#8220;BLEND_Additive&#8221; and Lighting Model to &#8220;MLM_Unlit&#8221;<\/p>\n<p>Unlit because, well, it&#8217;s a rainbow. It&#8217;s just light refracting through water in the air.<\/p>\n<p>Additive because this blending mode has a base opacity driven by the intensity of its diffuse\/emissive inputs. If the inputs are 0, the material is completely transparent. This gives the rainbow a base bit of transparency which we later modify.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/02_rainbow.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-831 alignnone\" title=\"02_rainbow\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/02_rainbow-300x300.jpg\" alt=\"\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/02_rainbow-300x300.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/02_rainbow-150x150.jpg 150w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/02_rainbow.jpg 512w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Next you&#8217;ll need a rainbow texture. I put mine together in Photoshop based off their default &#8220;Spectrum&#8221; gradient, moved a few things around, and squeezed it down to about half the texture space. We need the rest of the space on the texture map for the licks of rainbowy flame to display correctly. I tried this technique using a rainbow texture that filled the whole square, and because I was modifying the UVs, the red band was flaming up into the violet band. No good.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/03_rainbowNoise.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-832 alignnone\" title=\"03_rainbowNoise\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/03_rainbowNoise-300x300.jpg\" alt=\"\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/03_rainbowNoise-300x300.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/03_rainbowNoise-150x150.jpg 150w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/03_rainbowNoise.jpg 512w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The other texture I used is a series of noise textures, each one is layered into the Red, Green, Blue, and Alpha channels of a targa. For more info on this check out Hourence&#8217;s <a title=\"Texture Optimization\" href=\"http:\/\/www.hourences.com\/tutorials-ue3-texture-optimization\/\">Texture Optimization<\/a> page. I made a variety because I knew I&#8217;d be experimenting with which worked best while building the shader. Ultimately I ended up using a difference cloud filter over Photoshop-rendered clouds, and a basic black and white Photoshop-rendered clouds.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/04_UVMod.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-833 alignnone\" title=\"04_UVMod\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/04_UVMod-300x113.jpg\" alt=\"\" width=\"300\" height=\"113\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/04_UVMod-300x113.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/04_UVMod-1024x388.jpg 1024w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/04_UVMod.jpg 1806w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>As I mentioned, the first part of this is the UV modification. By modifying the UV input of the texture, I can move pixels around the 0 &#8211; 1 space. So, for example, I could move the red band up and down, based on how the aforementioned noise map modifies the UV coordinates. This gives the material the impression of licking flames we&#8217;re looking for.<\/p>\n<p>The trick, though, is that I wanted less motion at the bottom of the rainbow, and more at the top. I needed a gradient I could modify quickly, without adding texture space. When I was poking around in UDK&#8217;s new default lighting maps, I thought to look at their skydome: Instead of generating a gradient texture, they masked out one channel or the other of \u00a0a TexCoord node, because its R and G values go from 0 to 1, with no stepping in between. I did a similar thing here, tweaking the V value just a bit to get the 0 level to match with the bottom of the violet band.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/05_texCoord.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-834 alignnone\" title=\"05_texCoord\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/05_texCoord-300x272.jpg\" alt=\"\" width=\"300\" height=\"272\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/05_texCoord-300x272.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/05_texCoord.jpg 764w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Right-click -&gt; Coordinates -&gt; <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#TextureCoordinate\">Texture Coordinate<\/a><\/p>\n<p>Change the V tiling of this node to 1.05. Leave the U tiling at 0.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/06_componentMask.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-835 alignnone\" title=\"06_componentMask\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/06_componentMask-289x300.jpg\" alt=\"\" width=\"289\" height=\"300\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/06_componentMask-289x300.jpg 289w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/06_componentMask.jpg 524w\" sizes=\"auto, (max-width: 289px) 100vw, 289px\" \/><\/a><\/p>\n<p>The &#8216;Mask&#8217; node is created by right-clicking in the material editor window and going to &#8220;Utility -&gt; <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#ComponentMask\">Component Mask<\/a>&#8220;. Click on the node and make sure only &#8220;G&#8221; is checked<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/07_oneMinus.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-836 alignnone\" title=\"07_oneMinus\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/07_oneMinus-179x300.jpg\" alt=\"\" width=\"179\" height=\"300\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/07_oneMinus-179x300.jpg 179w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/07_oneMinus.jpg 416w\" sizes=\"auto, (max-width: 179px) 100vw, 179px\" \/><\/a><\/p>\n<p>The node labeled &#8220;1-x&#8221; is known as a &#8220;<a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#OneMinus\">OneMinus<\/a>&#8221; node. It subtracts everything input to it from 1. This is a quick and easy way to flip the gradient.<\/p>\n<p>Right-click -&gt; Math -&gt; OneMinues<\/p>\n<p>That multiplies over the vertically panning output of my noise map&#8217;s red channel, which is then added to default TexCoord. Because at the bottom we&#8217;re adding a value of 0 to both the R and G values of the coordinate at the bottom, those values remain constant, while the values at the top are more varied.<\/p>\n<p>(Quick Tip: To create a <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#Multiply\">multiply<\/a> node, simply press &#8220;M&#8221;, and one will appear under your cursor!)<\/p>\n<p>(Quick Tip: To create an <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#Add\">add node<\/a>, simply press &#8220;A&#8221;, and one will appear under your cursor!)<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/08_panner.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-837 alignnone\" title=\"08_panner\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/08_panner-300x202.jpg\" alt=\"\" width=\"300\" height=\"202\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/08_panner-300x202.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/08_panner.jpg 843w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#Panner\">Panner<\/a>: Right-click -&gt; Coordinates -&gt; Panner. \u00a0To change thespeed in either direction, click on the node. For this panner, change Speed Y to .75<\/p>\n<p>For the purposes of the demonstration video, I wanted to be able to slide between this part of the shader being on and off, instead of having it pop\u00a0on. For this I used a Lerp (right-click -&gt; Utilities -&gt; <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#LinearInterpolate\">Linear Interpolate<\/a>) to fade between a default TexCoord, and the panning coordinates system.<\/p>\n<p>The node &#8220;Param &#8216;flameOn'&#8221; is a <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#ScalarParameter\">Scalar Parameter<\/a> (A constant1 with a name, right-click -&gt; Parameters -&gt; ScalarParameter) which has a name and can be modified in an instance. We need the instance so we can change its value through Matinee to smoothly transition from Boring Rainbow to Awesome Rainbow.<\/p>\n<p>(Quick Tip: To create a Scalar Parameter, simply press &#8220;S&#8221;, and one will appear under your cursor!)<\/p>\n<p>For more on parameters, check out <a href=\"http:\/\/udn.epicgames.com\/Three\/InstancedMaterials.html\">Instanced Materials<\/a>\u00a0and <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialInstanceConstant.html\">MaterialInstanceConstant<\/a> at the Unreal Developer&#8217;s Network<\/p>\n<p>This all outputs to the UV input of the rainbow map.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/09_intensityMod.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-838\" title=\"09_intensityMod\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/09_intensityMod-300x82.jpg\" alt=\"\" width=\"300\" height=\"82\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/09_intensityMod-300x82.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/09_intensityMod-1024x283.jpg 1024w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/09_intensityMod.jpg 1920w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Next is the intensity modification section, it varies up the brightness across the rainbow to add a bit more variety and fieriness to the rainbow.<\/p>\n<p>For this I modify the UVs of the noise map using a panning noise map added to a TexCoord whose values I scaled to fit the mesh and UVs I was using.<\/p>\n<p>Because I didn&#8217;t want the intensity to be 0 for the violet band, I used a Lerp instead of a multiply to blend between the noise and a constant of .35 based on the gradient.<\/p>\n<p>Lerp between 1 and Intensity Base using the same &#8220;flameOn&#8221; scalar parameter from earlier. This ensures that everything is ramping up at the same rate. For more variation and control I would name each Lerp&#8217;s alpha input differently to better fine-tune the transition from boring rainbow to awesome rainbow.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/10_compile.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-839\" title=\"10_compile\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/10_compile-1024x622.jpg\" alt=\"\" width=\"640\" height=\"388\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/10_compile-1024x622.jpg 1024w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/10_compile-300x182.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/10_compile.jpg 1395w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>This section puts it all together<\/p>\n<p>rainbow_str is a scalar parameter to control the base intensity of the rainbow.<\/p>\n<p>This is multiplied by the output of the Intensity Lerp, which is then multiplied by the output of the Intensity Add multiply node. The last instance of &#8220;flameOn&#8221; lerps between the two multiply node outputs so that when &#8220;flameOn=0&#8221; it shuts off any intensity modification to the rainbow, effectively making it static.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/11_flameOff.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-840\" title=\"11_flameOff\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/11_flameOff-300x138.jpg\" alt=\"\" width=\"300\" height=\"138\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/11_flameOff-300x138.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/11_flameOff.jpg 811w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The output of the Intensity Base Lerp multiplies by the RGB output of the Rainbow texture, which is then run through a <a href=\"http:\/\/udn.epicgames.com\/Three\/MaterialsCompendium.html#Desaturation\">desaturation node<\/a>, multiplied by the &#8220;rainbow_opacity&#8221; scalar parameter (so I can control the opacity of the rainbow in matinee).<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/12_matInstMake.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-841\" title=\"12_matInstMake\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/12_matInstMake-300x295.jpg\" alt=\"\" width=\"300\" height=\"295\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/12_matInstMake-300x295.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/12_matInstMake.jpg 918w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Once that&#8217;s all put together, \u00a0save the material and go to the Content Browser. Right-click the material and select &#8220;create material instance (constant)&#8221;. Name it and group it as you will.<\/p>\n<p>Assign that instance to your mesh, and open the instance.<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/13_matInst.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-842\" title=\"13_matInst\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/13_matInst-300x182.jpg\" alt=\"\" width=\"300\" height=\"182\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/13_matInst-300x182.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/13_matInst.jpg 954w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>The three parameters for this instance are:<\/p>\n<p>Scalar.flameOn &#8211; Drives the Alpha of three Lerp nodes. At 0, the rainbow is still, and 1 the full intensity of the flame modifiers affect the rainbow<br \/>\nScalar.rainbow_str &#8211; multiplies over the RGB output of the rainbow texture to control its base intensity<br \/>\nScalar.rainbow_opacity &#8211; multiplies the desaturated RGB output of the rainbow texture which controls the intensity of the Opacity input<\/p>\n<p>As for the demo video I used the UDK-2011-06 build&#8217;s default Midday settings, and set up this Kismet sequence:<\/p>\n<p><a href=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/14_kismet.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-843\" title=\"14_kismet\" src=\"http:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/14_kismet-300x219.jpg\" alt=\"\" width=\"300\" height=\"219\" srcset=\"https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/14_kismet-300x219.jpg 300w, https:\/\/www.oztalay.com\/matt\/wp-content\/uploads\/14_kismet.jpg 952w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>For more information on <a href=\"http:\/\/www.youtube.com\/watch?v=ov5GhqaM9AA\">Controlling Materials in Matinee<\/a>, check out Javahawk&#8217;s tutorial video.<\/p>\n<p>&nbsp;<\/p>\n<p>And that documents the shader&#8217;s contstruction. If you have any questions add to the discussion on the\u00a0<a href=\"http:\/\/forums.epicgames.com\/showthread.php?t=806691\">UDK Forums<\/a>.<\/p>\n<p>Hungry for more? Don&#8217;t mind monkeying with a little HLSL? Why don&#8217;t you try the <a href=\"http:\/\/www.oztalay.com\/matt\/tutorials\/flaming-rainbow-material-advanced-udk\/\">Advanced version<\/a>?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; Because rainbows are more cool when they&#8217;re on fire. The material in UDK works by modifying a base rainbow texture&#8217;s UVs, the intensity of that rainbow, and its opacity. I put it together as a bit of a shader building challenge in Unreal. One of those &#8220;I wonder if I can&#8230;&#8221; sort of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":407,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-821","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/comments?post=821"}],"version-history":[{"count":19,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/821\/revisions"}],"predecessor-version":[{"id":949,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/821\/revisions\/949"}],"up":[{"embeddable":true,"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/407"}],"wp:attachment":[{"href":"http:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/media?parent=821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}