Mobile Friendly + Transparent + RGB Color + Shadows

Hey all! I'm trying to figure out the best, mobile-friendly way to show multiple layers of something like a basketball court. I can either do this as multiple materials on a single object or multiple objects, sitting on top of each other, each with one material. Curious to suggestions there from a performance standpoint.

Also, what is the best way to create a shader that would let me layer objects on top of each other (say court texture, three point line, sideline, free throw lines) which allows me to set the colors of each, with transparency so they layer on top of each other and allow the top-most layer to receive shadows.

Any help on how to address this. I can generate shadows on the bottom layer, but every layer on top of that doesn't show any shadows.

Suggestions?

 

Sounds like you want a shader with a color mask texture.
https://medium.com/@bgolus/the-team-color-problem-b70ec69d109f

Have your court texture, then a few color mask textures for the various lines. You can use each RGBA color channel of a texture to store separate lines. If you have more than 4 lines, use two RGB textures to get 6 masks.

 

Interesting idea. I've read that link and I'm very new to shaders. Any good existing examples of this in action?

 

You mean examples of games that use this kind of technique (or at least the naive option shown at the start of that article)? Sure. Probably the majority of video games have a shader like that for team colors, or otherwise coloring some part of an object. Even the built in Standard shader does basically the same thing with the emissive texture & color multiplier (though in that case it intentionally does not get affected by shadows).

 

No, examples of the shader code or the runtime code.

 

You mean apart from that article I linked to in which I posted the entire shader code for at the bottom of?