-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Removing ThreeJS #1
Comments
CSS wouldn't do it because I want the screen to be warped like a TV screen, which (I believe) CSS can't do. 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! |
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 |
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. |
ok then, btw: https://caniuse.com/css-filters |
@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. |
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
<#1 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABBXHTDAWP2KSI4DNFN3LRLYBQEEHAVCNFSM6AAAAAA52DSSXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBTGQYTAOBQGI>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Ah, you're right. My bad. |
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.
The text was updated successfully, but these errors were encountered: