I’m working on small 2d rendering engine for IOS. I want to render many sprites that are located in different textures. Now that sounds simple… Just render all sprites that belong to same texture and move to next … But how to handle overlapping of primitives that have different textures?
I want to render them in exact same way as on the picture (overlapped). That means I need to switch texture three times. What if I have hundreeds of such mixed sprites? To avoid texture switching on client and render all sprites in one shot. I’m using following code in fragment shader:
if(txt >= 0.5)
gl_FragColor = texture2D(texture1, texCoords)* clr;
if (txt >= 1.5)
gl_FragColor = texture2D(texture2, texCoords)* clr;
if (txt >= 2.5)
gl_FragColor= texture2D(texture3, texCoords)* clr;
if (txt >= 3.5)
gl_FragColor = texture2D(texture4, texCoords)* clr;
if (txt >= 4.5)
gl_FragColor = texture2D(texture5, texCoords) * clr;
Because of dynamic branching I have performance issues running on device. Is there better solution?
Assuming you have evidence of a real performance issue (and you shouldn’t bother with this unless you do), the solution is quite easy: use your depth buffer.
Use an orthographic projection so that sprites don’t get bigger/smaller when they move forward. Give each sprite a depth value, and let the depth test remove unwanted parts of sprites.