Global brightness

Hi everyone,

I want to add brightness and possibly contrast controls to my game.

I was thinking instead of adding webgl effects to all the layout, I'll just add the css filter on the canvas or body (filter: brightness(value);).

Could this potentially cause any issues with C3 rendering?

Do you know if there are any CPU/GPU differences between using the css filter or the webgl effect?

Ashley Any insight?

Ashley anything?

Bumping this again.

So, I did some google search and found this:

smashingmagazine.com/2016/05/web-image-effects-performance-showdown

According to it CSS filters are considered faster to render.

I did some test with my project and found no issues so far, but I'm not sure if it's fully supported in other platforms.

Anyone out there with OSX or Linux that can test if it works?

This is c3p test file that applies the css filters to the body:

headbangames.com/brightness.c3p

Hi Headbang Games,

I tested this on my MacOS 11.6.3 (Big Sur) and it works as excepted!

Great! Thank you for checking and verifying!

I'd recommend using a layout effect, as it works within the Construct engine and so Construct can ensure it's handled efficiently and appropriately. For example if you use "low quality" fullscreen mode, a layout effect will process efficiently at low-resolution and then stretch the result up to the display; but with a CSS filter the browser doesn't know anything about how the content got rendered, so all it can do is process the effect on the full-resolution canvas, which is less efficient. Also while I'm not clear of all the details, effects run by Construct are very likely to be GPU-accelerated, but there's a chance some browsers in some cases might drop CSS filters back to software rendering and so exhibit poor performance.

I'd recommend using a layout effect, as it works within the Construct engine and so Construct can ensure it's handled efficiently and appropriately. For example if you use "low quality" fullscreen mode, a layout effect will process efficiently at low-resolution and then stretch the result up to the display; but with a CSS filter the browser doesn't know anything about how the content got rendered, so all it can do is process the effect on the full-resolution canvas, which is less efficient. Also while I'm not clear of all the details, effects run by Construct are very likely to be GPU-accelerated, but there's a chance some browsers in some cases might drop CSS filters back to software rendering and so exhibit poor performance.

Thank you for clearing that up Ashley I appreciate it!

If I only need NWjs exports and I'm using "high quality" fullscreen, are there any other pitfalls I should be aware of?

I don't know, I've never really worked with or tested CSS filters with Construct, as everything normally happens in WebGL rendering. In general applying things like this may not work well, as Construct does not know about them, so they could conflict with things Construct is trying to do.