Removing ThreeJS

[jagenjo]

I see you are using THREEJS for the CRT filter. If that is the case using a css filter will save you lots of space, or I can make a WebGL wrapper that only executes that shader without any THREEJS code. Let me know if you are interested.

[btco]

CSS wouldn't do it because I want the screen to be warped like a TV screen, which (I believe) CSS can't do. Also, I'm using Three.js's bloom effect in addition to my custom shader.

So I'd be happy to switch to a WebGL solution if it kept these 3 things (warped TV screen, bloom and my noise+scanlines shader). That would allow me to get rid of THREE.js, which is a huge dependency!

[jagenjo]

All three are possible in CSS, check this guide: https://developer.chrome.com/blog/introduction-to-custom-filters-aka-css-shaders/

But if that doesnt work, I have this tiny webgl library, I could port the shaders there: https://github.com/jagenjo/js13k2023/blob/main/src/microgl.js

[btco]

Ah! That's amazing! However, I'd rather wait until CSS support for custom filter hits the mainstream browsers (if I understand correctly, it needs Chrome Canary and etc).

I think I'm ok keeping Three.js for now, but maybe I'll revisit the idea of doing it in pure WebGL in the future.

[jagenjo]

ok then, btw: https://caniuse.com/css-filters

[ulken]

@btco just curious, did you read the date on the Chrome article provided? It was written in 2013 and last updated in 2020. I'd say CSS filters are very much supported in all major browsers.

[btco]

Yes! But if I understand correctly (from the article and from more research), CSS filters are widely supported but only built-in filters like blur, etc, not custom shader-based filters (which is what we'd need).

For shader-based filters to work (custom filters), apparently browsers need to be compiled with a special flag, so shader-based filters aren't generally available to users.

Unless I'm missing something... I did try custom shader-based filters on Chrome and Firefox on two of my machines and it didn't work on any of them. Only the default filters work.

Thanks!!

Le ven. 27 oct. 2023 à 21:34, Oskar Löfgren @.***> a écrit :

@btco https://github.com/btco just curious, did you read the date on the Chrome article provided? It was written in 2013 and last updated in

2020. I'd say CSS filters are very much supported in all major browsers.

— Reply to this email directly, view it on GitHub https://github.com/btco/qx82/issues/1#issuecomment-1783410802, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABBXHTDAWP2KSI4DNFN3LRLYBQEEHAVCNFSM6AAAAAA52DSSXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBTGQYTAOBQGI . You are receiving this because you were mentioned.Message ID: @.***>

[ulken]

Ah, you're right. My bad.