Monday Musings #35 – Rise of the Mega Shader
It's time to get back to being super nerdy and technical today! There are many problems that don’t reveal themselves until you’re deep into development, and MoteMancer’s art pipeline is absolutely one of them. I have many years experience in tech art and FX art, as well as crazy mad scientist solutions we've already covered in previous musings. All of that has come together to create MoteMancer's Mega Shader.
[h3]But Why Tho?[/h3]
There are so many subtle things that contribute to immersion - trees swaying, clouds drifting, shadows transitioning. Not all are required, but you notice their absence far more than their presence, if only subconsciously. We've covered a variety of voodoo to achieve immersion and 2D motion in Smoke and Mirrors 1 and Smoke and Mirrors 2, and that gives way to today's problem - if we want to animate everything in the game, what is the best way to do it?
We can certainly do custom materials, custom techniques, custom layering setups for each and every unique structure in the game, but when we have literally hundreds of flora alone, much less multiple rotations of dozens of structures, we need to find a way to not only be efficient on performance, but also on iteration and creation time to prevent us from drowning in pixels. So now our quest becomes: how many birds we can feed with one scone.
[h3]This is the Mountain I've Built[/h3]
In order to achieve all of our goals - iteration ease, good frame-rate, artistic freedom - one tool used moreso in the past than today is a single shader that does Everything. This can get scary because the shader itself is super complex, and you are invoking many things that might be wasted if not used, but it does allow you to do one crucial thing - batching.
Batching is basically telling the graphics card - keep doing what you are doing, and do as much of it as you can at once. Since MoteMancer draws top to bottom, layer over layer, most structures simply load their texture, draw the sprite, repeat. The problem is that even if you only have a bunch of trees on screen, each tree becomes its own draw call, since every one references its own little suite of textures. Usually you can solve this with a sprite atlas, but rarely do atlases use multiple technical textures. But that isn't going to stop us :)
It's crazy to collapse most of the art work you've done in the last 2 years to a single image. These are just two images of the 6 used in the mega shader. This style of material wrangling lets us do hue shifting, night glows, wind sways, custom scrolling, and much more all in a single pass. During testing, I was able to drop the draw calls of a test scene from 960 to 230, which is absolutely massive for performance. It also crucially means that every sprite gets the benefit of all of our crazy texture manipulations we've been building over time. Want wind sway and night lighting but also custom UV's? We are covered in all cases.
[h3]Practical Mad Science [/h3]
If I went on about all of the extra bips and bobs this shader could do, I'd be here all day, but I do want to share this absolutely crazy technique realized I could do - all of our smear textures can work on the same shader too.
This one is especially cool because we can use a simple float value to tell the UVs to read from a specific area, like read from 0 - .25 (the bottom quarter) and then change to +.25 to read the next texture up and so on. Usually you’d control this through a material, but the magic here is that we can drive it through a mask channel instead. I can say for example, read a value of #111111 to mean offset .25, #222222 means offset .5 etc.
This also gives us two awesome side benefits - this technique can be used to branch a shader to a bunch of other future paths, without actually introducing a true/false boolean inside the shader (generally bad). It's all just adds and multiplies, which makes your graphics card very happy. And, we can mix and match inside the same object, since it's all just controlled with a pixel mask color.
Ok I probably lost some of you with that last bit, just know that swaying trees, grinding wheels, flowing water, and bioluminescent geodes all draw with a single (complicated) technique, and that means better performance, more artistic consistency, and faster art iteration across all structures simultaneously. Honestly this is the stuff I nerd out on the most, because it's like my own alchemical workshop where i get to blow up and reassemble everything into a new, delightfully chaotic concoction. And it's beautiful.
Back to the lab :) 🌿
~CyanAvatar
[h3]But Why Tho?[/h3]
There are so many subtle things that contribute to immersion - trees swaying, clouds drifting, shadows transitioning. Not all are required, but you notice their absence far more than their presence, if only subconsciously. We've covered a variety of voodoo to achieve immersion and 2D motion in Smoke and Mirrors 1 and Smoke and Mirrors 2, and that gives way to today's problem - if we want to animate everything in the game, what is the best way to do it?
We can certainly do custom materials, custom techniques, custom layering setups for each and every unique structure in the game, but when we have literally hundreds of flora alone, much less multiple rotations of dozens of structures, we need to find a way to not only be efficient on performance, but also on iteration and creation time to prevent us from drowning in pixels. So now our quest becomes: how many birds we can feed with one scone.
[h3]This is the Mountain I've Built[/h3]
In order to achieve all of our goals - iteration ease, good frame-rate, artistic freedom - one tool used moreso in the past than today is a single shader that does Everything. This can get scary because the shader itself is super complex, and you are invoking many things that might be wasted if not used, but it does allow you to do one crucial thing - batching.
Batching is basically telling the graphics card - keep doing what you are doing, and do as much of it as you can at once. Since MoteMancer draws top to bottom, layer over layer, most structures simply load their texture, draw the sprite, repeat. The problem is that even if you only have a bunch of trees on screen, each tree becomes its own draw call, since every one references its own little suite of textures. Usually you can solve this with a sprite atlas, but rarely do atlases use multiple technical textures. But that isn't going to stop us :)
It's crazy to collapse most of the art work you've done in the last 2 years to a single image. These are just two images of the 6 used in the mega shader. This style of material wrangling lets us do hue shifting, night glows, wind sways, custom scrolling, and much more all in a single pass. During testing, I was able to drop the draw calls of a test scene from 960 to 230, which is absolutely massive for performance. It also crucially means that every sprite gets the benefit of all of our crazy texture manipulations we've been building over time. Want wind sway and night lighting but also custom UV's? We are covered in all cases.
[h3]Practical Mad Science [/h3]
If I went on about all of the extra bips and bobs this shader could do, I'd be here all day, but I do want to share this absolutely crazy technique realized I could do - all of our smear textures can work on the same shader too.
This one is especially cool because we can use a simple float value to tell the UVs to read from a specific area, like read from 0 - .25 (the bottom quarter) and then change to +.25 to read the next texture up and so on. Usually you’d control this through a material, but the magic here is that we can drive it through a mask channel instead. I can say for example, read a value of #111111 to mean offset .25, #222222 means offset .5 etc.
This also gives us two awesome side benefits - this technique can be used to branch a shader to a bunch of other future paths, without actually introducing a true/false boolean inside the shader (generally bad). It's all just adds and multiplies, which makes your graphics card very happy. And, we can mix and match inside the same object, since it's all just controlled with a pixel mask color.
Ok I probably lost some of you with that last bit, just know that swaying trees, grinding wheels, flowing water, and bioluminescent geodes all draw with a single (complicated) technique, and that means better performance, more artistic consistency, and faster art iteration across all structures simultaneously. Honestly this is the stuff I nerd out on the most, because it's like my own alchemical workshop where i get to blow up and reassemble everything into a new, delightfully chaotic concoction. And it's beautiful.
Back to the lab :) 🌿
~CyanAvatar