But if you feel inclined go see some of the other ways to blend and try them out.Stellar network remained online and processing transactions throughout halt I believe this blend is the easiest and gets the general results at a fairly cheap cost, so I figured that’s the one I would demo here. There’s also different equations for cubic and quadratic blends as well. I can also choose how much blend to use, so in this gif above, a little blend keeps each circle their own distinct shape, more blend merges the circles into one big blob. Unlike the lerp which is a weight between the two shapes of which shape is more dominant to show visually, this blend will actually work to merge the two shapes when they are close and separate them when apart. The blend works when the circles are close to each other they will almost merge into one circle and as they get further apart they into seperate circles. The visuals of combining these two distance fields can get that goopy delish middle area that would be very difficult to do with just textures. IQ’s blend shows off the power of math SDF’s shapes vs textures.
This sounds a bit complicated however in practice it’s quite easy to visually understand as it is an seamless scrolling circle from top to bottom: This was to make sure the circle looks like it’s animating from outside the material -> into the material frame -> then outside of the frame cleanly. The little detail of this graph is that I changed the multiply to 3. The Unity graph below shows how I animate the circle starting at the top of the material and animating down to the bottom. So I’m going to add another circle to my little material here and this circle should animate across the material going from top to bottom. To combine SDF shapes I need to make myself another shape. However all of these nodes in the following section exist and are possible in Unreal so don’t worry it’s all the same until you get into custom HLSL but I’ll go over that. Those animations will hopefully help show what’s going on with the SDFs more clearly. Math Signed Distance Fields - COMBINE, BLEND, AND MASK SHAPES Just like vector graphics (kinda.)įor the combining and masking of SDF shapes I’m going stick to just Unity for this section as their graph editor animates each node unlike Unreal by default. This material doesn’t use any textures, any extra animations, or layers, it's all simply done with some basic math. But for the example sake say I wanted to generate a circle, that’s pretty easy if you look at IQ’s 2D primitives and the first shape is a circle: In terms of all things SDF, I head over to IQ’s website as it’s an amazing resource for SDFs that include the equations to make all kinds of shapes. The benefits of creating SDF visuals in engine include the flexibility to change size/gradient/animations/strokes and much more. However, there is a way to use MATH to generate the circle instead. The classic approach might be to make a circle in an image editor like Photoshop, save it out as a texture, import that texture into the engine, and place it under the icon. Signed Distance Fields as textures are quite useful and do cool things but perhaps the more interesting concept with SDFs is replacing textures with pure math instead! Say for instance you wanted to have a nice circle background for some icon. I also will reference Adobe products but none of these are necessary to understand the concepts below.
The examples below will work in Unreal and Unity and I will try to show off both of the engines.