It's streamlined for the specific use case of rendering 2D graphics using fragment shaders as an alternative to SVG or the JS canvas API, so it's not meant for doing 3D objects like three.js, for example.
This started as something I needed for my own project, but I eventually decided to split it into a separate library. I've since found that this use case fits really well into the Svelte compiler-based approach and its fine-grained reactivity system.
In general, I think using shaders like these has some really positive upsides compared to traditional ways of doing graphics on the web — not just for games and stuff, but also for something like data visualizations and aesthetic details. My dream is that one day, you'll see web developers using small, isolated shader components ubiquitously across web applications, just as naturally as something like SVGs are used today.
CSS and HTML already have several decades of work on accessibility and cross platform support. It's far from trivial to recreate this.
For things like hero pages, I can see the benefit. But for basic UI like sliders, are you reinventing the wheel here?
This is just an example of a place where you can use a shader to create a cool, interactive visual effect.
On the example site I've implemented the slider as a regular HTML slider element, and using a canvas to replace its visual appearance. Doing something like this, I don't believe there's anything in the way of getting all the accessibility benefits of a regular slider element, though I could be wrong, I'm no expert by any means.
However, from what I can see, it probably is accessible, as it is still usable without a mouse, which is an easy first test.
(Though, in Safari, neither slider test has any kind of slider, so there are other big problems.)
Yes, the absence of 3D is very much a choice. I believe this need is already covered pretty well by existing libraries like three.js and threlte etc. These are relatively large and complex to use, because you essentially have to adopt the mental model of having a whole 3D scene or something like that. With Svader, the mental model is just that you have a canvas with an attached fragment shader, which paints the canvas with respect to some input parameters.
The way the reactive rerendering works, is that every time a change in the input parameters is detected it queues a requestAnimationFrame, so yes, it follows the browser refresh rate.
Since Svelte 5 is automatically able to track changes in values, both by reassignment as well as object mutation, anything that changes a value -- no matter if it's designed for Svelte or not -- should be able to integrate smoothly.
If in doubt try https://luduxia.com/whichwayround/ ;P
Thanks for letting me know!
(I would try but I killed my laptop recently!)
Edit: Actually not fully true anymore, as of iOS 17.4, you _could_ bring your own engine (https://developer.apple.com/support/alternative-browser-engi...) - with restrictions, of course.
One makes my phone extremely sluggish.
It also breaks the browser history.
The page with the list of examples sometimes doesn't render at all. Which is weird bc. <ul> is a solved problem since like 1999.
"Sick stuff, bro!"
I go back, still a blank screen.
I go back again and for a faint moment I can see the examples list and then it goes blank and the viewport becones very large because I can now scroll a lot but everything is blank.
Mobile Safari, latest iOS.
There's also Pocket Shader which is pure JS: https://github.com/braebo/pocket-shader
In my experience there are times when building HTML CSS components is an anti-user pattern. I know HTML-CSS well, but is it the best experience for users? In some cases my answer is no.
In particular, with complex websites I believe that using graphic navigation is superior to other alternatives. When we want to navigate using {Google,Apple,Etc} maps we do not have a list of hierarchical menus. One does not navigate to the continents menu, then countries, then states, then cities, etc. You zoom out, you zoom in or you type a location. A user can quickly and easily go from a street view in NYC to a street view in Osaka.
I suspect that direct 3D graphics could be used in other situations, but have not had a chance to explore them. Low hanging fruit first.
(And yes, this is not a bug free system. Getting things to work across platforms, browsers, etc can be tedious. On the other hand most {iPhones, Android phones } seem to have strong graphics capabilities that make them able to handle a modicum of graphics. :-) )
In a three.js-only webpage, will ads be embedded properly? Will the user be able to select the paragraph he is currently reading? Why reinvent the wheel when so much effort has been put into creating HTML/CSS/JS. Much of the page is rendered on the GPU anyway.
Also, in my case, just looking at the demo [1] makes my GPU work at 10%+15% vs 1%+0% of a normal static page (iGPU+dGPU, Intel UHD 630+NVIDIA Quadro P620). Though the linked page does apparently use a rendering loop, while the other examples are just as inexpensive as normal HTML+CSS pages.
this breaks down if my 2D/3D scene _is_ the page and has its own interactive elements and rendering tree which need to be managed with their own state and lifecycles. the killer app in google maps is the interactive map, not the inputs - the types of experiences possible on the web today go far beyond text/image content and forms.
Because you don't know how to write GLSL/WGSL, that things like font rendering end up requiring you to learn at best texture atlases, at worst SDF font rendering, and because you're quadrupling the time it takes you to do _anything_ because you're pixel bashing.
Oh and it's not accessible, which means you're going to get clapped by any audit, which means you're already eliminated from most places. Shaders have their place, for interactive, high speed components that you _explicitly_ don't want to make accessible by default.
What is a website maker to do with this info? An extension made to deface sites defaced my site? Expected behaviour.
So technically the developer of dark reader is the place to go. But if I would use svader - then I would have to be prepared to loose all that audience. (or at least use a sign to warn)
So giving that feedback is still valuable.
People don't care who is to blame. They care if it is working or not. (maybe there is something simple the dev of svader can do)
Bullshit.
Your overall comment might apply to a consumer facing website, but your feedback is rubbish for some developer providing a proof-of-concept. mckirk made a perfectly good "fyi" comment because it didn't pressure the dev, while giving the dev a heads up _if_ they are interested and happen to read HN.
Firefox on a laptop is now a niche browser (3.35%) and is trending to be less popular than Opera (2.86%) and Samsung Internet (2.6%). Obviously HN selects for abnormal users: I actually like mckirk's comment because it is a beautiful reminder that there are niche users with interesting configurations and maybe I should have a look at that plugin. Nobody wants to be an entitled open source user.
>
> Bullshit.
Dark Reader has >9 million total users across browsers as reported by the Chrome, Edge, Firefox, and Mac app stores [1][2][3][4]. That is definitely a very small percentage of total web browser users - with some estimates putting chrome users at 3.2 billion(!)[5], but 9 million users isn't something to scoff at either.
FWIW - I completely agree that mckirk's comment was a great passing "fyi" that doesn't put pressure on the dev. I also think it relevant to the original post (not some tangential common complaint, nor against the HN guidelines).
[1]: https://chromewebstore.google.com/detail/dark-reader/eimadpb...
[2]: https://microsoftedge.microsoft.com/addons/detail/dark-reade...
[3]: https://addons.mozilla.org/en-US/firefox/addon/darkreader/
[4]: https://apps.apple.com/us/app/dark-reader-for-safari/id14382...
[5]: https://www.statista.com/statistics/543218/worldwide-interne...
Svader is for making consumer facing websites. At least potentially.
"mckirk made a perfectly good "fyi" comment"
And was still downvoted for it. Hence my reaction.
"Firefox on a laptop is now a niche browser"
And I use dark reader on firefox as well as on chrome.
Correctly downvoted: 1. guidelines "Please don't complain about tangential annoyances", 2. HN site norms are enforced by downvotes - downvoting is correct by definition
Plus another important guideline is "Please don't comment about the voting on comments". I'm trying to help you moderate yourself - of course the next escalation is for this inane subthread (including my comments) to be flagged.
https://news.ycombinator.com/newsguidelines.html (edited: added more details)
> Please don't complain about tangential annoyances—e.g. article or website formats, name collisions, or back-button breakage. They're too common to be interesting.
I think this makes it pretty clear that this guideline wasn't talking about people trying to provide helpful feedback for a developer, letting them know about a strange edge-case (i.e., why should an extension injecting CSS even mess with WebGL content?) that they might want to look into.
We disagree on "tangential annoyances". And that's it from my side.
In this case, there simply was nothing shown for the affected experiments, which is somewhat unusual, and it took me a second to even realize it might be Dark Reader. I thought that could be useful feedback for the developer.