{"id":854,"date":"2011-07-21T20:20:02","date_gmt":"2011-07-22T00:20:02","guid":{"rendered":"http:\/\/www.oztalay.com\/matt\/?page_id=854"},"modified":"2012-01-19T11:50:00","modified_gmt":"2012-01-19T16:50:00","slug":"flaming-rainbow-material-advanced-udk","status":"publish","type":"page","link":"https:\/\/www.oztalay.com\/matt\/tutorials\/flaming-rainbow-material-advanced-udk\/","title":{"rendered":"Flaming Rainbow Material (Advanced) – UDK"},"content":{"rendered":"

This is an improvement to yesterday’s Flaming Rainbow Material – UDK tutorial<\/a>, it replaces the rainbow texture with a custom texture node that blends between colors based on a gradient.<\/p>\n

I was tinkering with the techniques describe on this Polycount Thread<\/a>, and I realized “Hey, what is a rainbow if nothing more than a gradient. Hey, I bet I could save a 512 texture if I did something like this!” The tradeoff is that instead of a 26 instruction shader using the texture map this is now 49 instructions.<\/p>\n

So, if you have an inkling to get your hands dirty with some HLSL (this is a tutorial after all, you’ll have to work through it the way I did), dive right in. This is written for someone with little to know experience working with custom nodes in UDK’s material editor.<\/p>\n

At the base level I took this:<\/p>\n

\"\"<\/a><\/p>\n

And turned it into this:<\/p>\n

\"\"<\/a><\/p>\n

Ahh! Scary! What is that!? You might say. You might also notice that each of those colors is actually a Constant4Vector<\/a><\/p>\n

Further, you might notice that no node named “Gradient Mapper” exists in the Unreal Material Editor’s list of nodes. It is, in fact, a Custom<\/a> node. I adapted some of Vailias’ HLSL<\/a> to suit my needs and dropped it into that node. You have to add and name the inputs manually, and Unreal expects something for each input unless you tell it otherwise.<\/p>\n

The code he wrote checks if a given pixel input into ControlTexChannel. If its value is equal to the value of one of the input colors, it sets that output pixel to equal the input color. The code then outputs all pixels between two alpha values to lerp between those two input colors. For example, if I had a 0 – 1 gradient, and two input values of 1,0,0,1 (Red at Alpha=1) and 0,0,1,0 (Blue at Alpha = 0), all the pixels with a value of 1 would output as 1,0,0, and all pixels at 0 would output as 0,0,1. Between Red and Blue would be a mix of those two colors.<\/p>\n

ColorTexChannel expects an input that is a \u00a0float1 value (a single vector value), not a float2 (UVs have 2 float channels), so I masked out the R (for UVs the horizontal) channel because I don’t do anything to it in the shader, I only need the vertical positions.<\/p>\n

I expanded the list of Gradient to include 8 color positions (think of them like points on a graph).<\/p>\n

I have yet to find a way to increase the number of inputs without having to go into the code, I can tell you that the input colors can be parameterized so an artist can adjust the values and position without having to rebuild the shader every time.<\/p>\n

If you do choose to parameterize the color inputs, make sure you append the alpha channel to the RGB so the Custom node can handle the input.<\/p>\n

\"\"<\/a><\/p>\n

So we go from this:<\/p>\n

\"\"<\/a><\/p>\n

To this:<\/p>\n

\"\"<\/a><\/p>\n

So now I can do this without ever opening Photoshop!<\/p>\n

\"\"<\/a><\/p>\n

Going to continue tinkering with this. I have a few ideas…<\/p>\n

Questions? Post them to the UDK forum thread<\/a>, if you had a question I’m sure someone else did.<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

This is an improvement to yesterday’s Flaming Rainbow Material – UDK tutorial, it replaces the rainbow texture with a custom texture node that blends between colors based on a gradient. I was tinkering with the techniques describe on this Polycount Thread, and I realized “Hey, what is a rainbow if nothing more than a gradient. […]<\/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-854","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/comments?post=854"}],"version-history":[{"count":3,"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/854\/revisions"}],"predecessor-version":[{"id":948,"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/854\/revisions\/948"}],"up":[{"embeddable":true,"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/pages\/407"}],"wp:attachment":[{"href":"https:\/\/www.oztalay.com\/matt\/wp-json\/wp\/v2\/media?parent=854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}