{"id":679,"date":"2019-05-27T05:10:17","date_gmt":"2019-05-27T05:10:17","guid":{"rendered":"http:\/\/www.decscroll.com\/blog\/?p=679"},"modified":"2019-05-27T05:15:14","modified_gmt":"2019-05-27T05:15:14","slug":"mixing-things-up","status":"publish","type":"post","link":"http:\/\/www.decscroll.com\/blog\/2019\/05\/27\/mixing-things-up\/","title":{"rendered":"Mixing things up"},"content":{"rendered":"\n

When I first started using Blender procedural materials, I wondered how to get more than one material onto an object. In other systems I’d used, there was the idea of a “material map,” which was a grayscale image that defined where to put different colors or materials. For example, an image like this:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

…could be applied to a shape with different materials assigned to each gray value, resulting in something neat like this:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

However, to my chagrin, Blender doesn’t seem to have anything like this, at least not an obvious node type. Well, good news, and SPOILER ALERT: I created this image using Blender and the above map. But how?<\/p>\n\n\n\n

Many nodes have a ‘Fac’ value, which stands for ‘Factor.’ It’s a value from 0 to 1 that allows you to control the output of the node. For example, the MixRGB node lets you mix colors:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

…where a Fac of 0.5 is exactly a half-and-half mix of the two colors. A smaller value (like 0.25) mixes more of the first color,<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

…and of course a higher value mixes more of the second color:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

This is pretty basic, of course. The part where it becomes powerful is that you can put any sort of value from 0 to 1 into that input. Any black and white image will send through a value from 0 to 1, where 0 is black and 1 is white. So if we put a black-and-white checkerboard into that Fac, we actually get a red and blue checkerboard:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

This is because the white squares are actually a value of <1, 1, 1> and the black squares are <0, 0, 0>, which is just like setting the MixRGB Fac to 1 or 0, and therefore full blue or full red. If you don’t use white and black you can get also get any mix of the two colors, like if we use the .25 and .75 from above:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

You can probably see where we’re going with this. I did say above that you can use any<\/em> black-and-white or grayscale image as the input. If we swap in the image from the beginning of the post, we get this:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Cool, it does exactly what we’d expect. The black parts are completely red, the white parts are completely blue, and the shades of gray are different shades of purple. <\/p>\n\n\n\n

So what if we wanted that dot in the middle to be yellow? We only have two colors to work with. Hmmm…<\/p>\n\n\n\n

Well, since this post is about Mixing, we can add another Mix node with yellow, but then that’s not what we want. We need to figure out what Fac should be:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Math is usually the answer. In this case, I know that the center circle has a value of 0.5, so we could use that information. Add a math node and set it to “Less Than” and a value of 0.5, and connect that to Fac. “Less Than” returns either 0 or 1, with 0 = Greater Than, and 1 = Less Than. If the value is greater than 0.5, we’ll get 0, which uses the top Mix node color. Since we’re piping the red\/blue mix into that color, we should see the red\/blue mix for everything with a lightness greater than 0.5. Let’s see:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Nice, the center dot is now yellow! However, the edges of the cube are also yellow, which we didn’t want. The edges were black, and black is less than 0.5 so it came out yellow. What we really<\/em> want, then, is values that are less than 0.5, and greater than 0. <\/p>\n\n\n\n

“Greater Than” works the same way as “Less Than,” returning a value of 0 or 1 for True or False. To combine these we can simply multiply them. If both are True, that is 1 x 1 = 1, and any other combination of True and False gives 0. Therefore if it’s Greater Than 0.0 and<\/em> Less Than 0.5, we’ll always get a Fac value of 1, so it will use the bottom color, which is the yellow we want. And here it is:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Perfect! You can extend this to even more complexity if you like. For example, if we wanted to turn the inner square green, we could do change the top “Less Than” into “Less Than” 0.75, and add some more Mix and Math nodes:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Can you follow that? <\/p>\n\n\n\n

If the value is greater than 0 and less than .75, choose the bottom color. The bottom color is a mix of yellow and green, and that color is determined by whether the value is less than 0.5. Given x, where 0 < x < 0.75, x < 0.5 becomes yellow, and x >= 0.5 becomes green. <\/p>\n\n\n\n

However, if the value is equal to 0, or greater than .75, choose the top color. The top color is still a mix of red and blue, and in our particular image, the only colors outside that range are pure black and pure white. Pure white then maps to blue, and pure black maps to red.<\/p>\n\n\n\n

Hope that isn’t too confusing. It can be complicated, but if you break it down step-by-step it will make sense. It is critical<\/em> to know the color values in your image, otherwise it’ll be really difficult to know which values to put in your nodes. Since I made that image, I purposely chose the values I wanted.<\/p>\n\n\n\n

And now for the grand finale…colors are great, but how about that cool glowy cube at the beginning? Well, all you have to do is replace all those MixRGB nodes with Mix Shader nodes, and replace the colors with shaders. Here’s the same node layout as above but using shaders:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Thanks for sticking it out to the end. I hope you learned something, and this gave you some new ideas about how to creatively bend the nodes to your will to get cool effects. Next time, I think I’ll use this technique to make procedural granite. Until then, keep Blending!<\/p>\n","protected":false},"excerpt":{"rendered":"

When I first started using Blender procedural materials, I wondered how to get more than one material onto an object. In other systems I’d used, there was the idea of a “material map,” which was a grayscale image that defined where to put different colors or materials. For example, an image like this: …could be…<\/p>\n","protected":false},"author":2,"featured_media":683,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[1],"tags":[4,8,13,15],"class_list":["post-679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-blender","tag-cycles","tag-shader","tag-tutorial"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.decscroll.com\/blog\/wp-content\/uploads\/2019\/05\/mat_map_ex-1.png?fit=616%2C559","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paMavh-aX","_links":{"self":[{"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/posts\/679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/comments?post=679"}],"version-history":[{"count":6,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/posts\/679\/revisions"}],"predecessor-version":[{"id":700,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/posts\/679\/revisions\/700"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/media\/683"}],"wp:attachment":[{"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/media?parent=679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/categories?post=679"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.decscroll.com\/blog\/wp-json\/wp\/v2\/tags?post=679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}