Moonshine drawing shaders inside canvas = black screen

[Fabimawn]

Hello fellow readers, i'm posting this question because I can't seem to get the following to work after trying different stuff all day.

My game has a fixed 16:9 aspect ratio, you can resize the window, and you can see a backdrop, but the game itself renders in a canvas that auto adjusts based on your screen (main canvas that is always 16:9) (see the orientation pictures). My idea was to also make it possible to have the game screen be a blurred backdrop behind the main canvas to make it more clean looking. Of course when applying a gaussian fast shader behind the screen (see attached gaussian picture) and drawing the main canvas inside it, it works as expected, but all the space behind the main canvas is wasted computation (since you don't see it). I wanted to split it up in 2 parts. So 2 shaders that render above and underneeth the main canvas, or left and right (depending on the letterboxing) that have the canvas size needed. I tested this method and it was wayyy faster, but I couldn't get 2 different shaders to work since I discovered that Moonshine already uses a canvas (actually a buffer and active one) itself. This means I can't move them to the desired location, so I tried drawing the Backdrop.CanvasBlur.draw() functions (Moonshine chain.draw() function) on canvasses that I could then cast to a specific location with love.draw (above and under the main canvas). When doing that I get a black screen. That's the issue here. Does anyone know why that happens? Is there another way to do it? I also tried writing my own shader, but couldn't get it to look right.

[Fabimawn]

And of course I got it working in the end just after posting this, but honestly I have no idea what I did wrong which is scary...

[Fabimawn]

For anyone else with this issue (and me again after a year of writing this post XD), use love.graphics.clear(0,0,0,0) when calling a custom Moonshine shader function like how I did it in the example picture. It looks like the standard opacity of using a Moonshine shader function is 1 which then takes up the whole screen (or canvas)? Well at least this fixes it

[marclurr]

I know you've reached a solution satisfactory for your needs but your original problem of reducing rendering to wasted space is the intention of the stencil buffer. You can update this as part of drawing your game to the main window to specify fragments (or pixels) that shouldn't be updated at all. In case you're interested in going down the rabbit hole, it might give similar performance to your manual solution but with less canvas switching and probably lower VRAM consumption https://love2d.org/wiki/love.graphics.stencil

[Fabimawn]

Hi thanks for the information! That's interesting! In my eyes a year ago when I was less experienced with love2d it made sense to use 2 canvasses since I was under the impression it would be easier for the computer to not have to calculate which pixels not to draw like a stencil does, and I didn't and still don't exactly know what optimizations stencils use (if they recalculate every frame or if they're smart enough to know when not). The less vram seems likely indeed since no buffer correct?, and it would be more efficient to respond when rescaling since canvasses have a static size, nice idea! For now I'll stick to canvasses and might rework the window managing system later. Thanks for the comment!

[marclurr]

...if they recalculate every frame or if they're smart enough to know when not...

This is up to you, you can choose not to clear the stencil buffer if it never needs to be recalculated. https://love2d.org/wiki/love.graphics.clear

...The less vram seems likely indeed since no buffer correct?...

There is still a buffer but it's a specific type that stores just one 8-bit integer per pixel instead of usually 32-bits per pixel for an RGBA buffer. I think in your case you would just get to use the buffer that's configured for the window so no need to do anything specific.

When reading the docs to check i wasn't spewing nonsense at you I noticed another interesting function that might simplify your use case: https://love2d.org/wiki/love.graphics.setScissor

It looks like you can define a rectangle that is affected by draw operations, and anything outside that is not affected. You might be able to use this to only draw your blurred border once (or when ever the window is resized). Just another option if you care to spend any more time on the problem:)

[Fabimawn]

This all makes sense now! Thanks for the in depth info! I've indeed used scissors before, and I'm not sure I tried before in this project ; P Too many options I guess. Thanks for pointing it out though, now I know a lot more about these functions, so I can fit them better in certain scenario's!