Most performant way to fade from/to white?

I currently fade from and to white by using an "Overlay" layer with the background set to white, and changing its opacity. I went this approach because it most easily achieves a fullscreen white-out on varying device resolutions.

The issue is that it results in a lot of overdraw and thus fillrate issues on certain devices, causing a drop in framerate during fades. Do you have any ideas for a more performant approach?

EDIT: I thought of using an Effect (brightness or something) on the entire layout. Tried it out, and Brightness looks UGLY. So it rules that effect out at least. Perhaps there is another effect I could use?

I imagine the super-lean way of doing this would be to take a snapshot of the canvas and load it into a sprite, then put that sprite under the fade-white layer and set all of the other layers below the sprite to invisible. You could alternatively paste everything onto a Paster / Canvas object to get the same effect, but it seems like a lot more effort to get the same end result.

Interesting, thanks for the idea. However, that snapshot might be too large (1080x1920) to be considered safe on mobile, let alone compatible with CocoonJS Canvas+, which has a maximum size for textures. Since my game is designed for mobile, I probably wouldn't want to use this approach.

I feel like a shader that does this properly would be my best bet. Doesn't seem too hard to write one since it's just basic alpha blending, right? Then again, I don't know enough about writing shaders to be able to say

Any more ideas you have are always appreciated!

I use a simple white streched 32x32 square sprite with the fade behaviour on it.

I create the sprite when a fade is needed (+ "move on top"), and it's destroyed just after that, so I don't need any shader or additional layer / blending.

Maybe this could work for you?

Basically using the same as Aurel, but I'm usually using two 2x2 Tiled Backgrounds (white and black) - resized to cover entire screen with LiteTween and a function so i can control easily with one action and few parameters if I want to fade in or out, black or white and speed of fading - It's been working without any issues or dropped frames on web and mobiles for me so far.

Aurel, shinkan:

Thanks for the ideas, but now I'm not sure they would be very different from my original approach in terms of rendering performance. What seems to be happening in my game is that the so-called fillrate capacity of my GPU is being reached. This is because I'm drawing a lot on screen already, and having to draw a white object on top of all the entire screen maxes out the device's rendering capacity for a frame, so it drops in framerate during fades.

if my understanding is correct, the new approach I use should strive to limit the number of pixels the GPU has to draw, so I don't use up my device's fillrate capacity. The approach Colludium suggested did this by 'flattening' the rest of the game content by taking a snapshot and then hiding the other layers. This could work, but I'm afraid of the huge image size and it sounds like a slight headache to implement.

So now I feel that a shader may be the best overall approach for fading. The other approach that comes to my mind now is to somehow "flatten" my game content to reduce overdraw, but I feel that the real culprit is a poor fade implementation. Clearly, games with reasonably complex scenes would have the same issue with using a sprite to fade. There must be a better way!

But yeah, thanks again for the help guys! I'm still open to new ideas, but I'm pretty sure fillrate is the issue here, so anything that uses sprites over the whole layer will likely not work.

How "big" is your game that you already have problems with fillrate?

shinkan,

Hmmm, for some reason I thought it was easier to get fillrate limited, but now that you made me think about it, perhaps it isn't a fillrate issue. My game is 1920x1080, so assuming a flat layout, in a second it would write 147 MPixels, and my device apparently can do around 800. So unless there's something majorly wrong going on with my graphics, it should be a lot harder to reach that limit. But I'm still not sure if I understand all this stuff completely.

I will go ahead and try yours and Aurel 's approach and see if it works. It is what I would have done, but I didn't since I figured that having an "Overlay" layer dedicated to transitions was somehow a neater approach. I didn't think it would make a difference.