Could you explain? I am on a beginner level when it comes to FrontEnd/Web. Does it have a technical reason you feel react-three-fiber is battling against the tide?
Hey this hacked my computer, f you thankfully I have a lot of extra security I put on my computer to block stupid crap like this from happening. Ban this guy
Hey this hacked my computer, f you thankfully I have a lot of extra security I put on my computer to block stupid crap like this from happening. Ban this guy
This was presented by Rich Harris at the Svelte Summit a couple of days ago, and it's heavily prefaced as a tech demo and very incomplete. The examples worked two days ago, so not sure what broke.
Apparently the underlying code was used for some of the NY Times Covid infographics.
While the 3D animation is very beautiful, my laptop noticeably started working harder to render the homepage and my fans started to get loud within 15 seconds.
That's one of the most annoying aspects of WebGL. My Android phone runs the demos at 60fps, my M1 Mac Mini is fine, and my top spec 2021 Intel Macbook Pro sounds like a jet engine.
It's mostly down to the browser and OS, and a function of screen resolution and GPU 'power', rather than anything to do with the framework or JS aspects.
The Intel MacBook Pros have a discrete GPU that's turned off most of the time, and only kicks in under certain circumstances (WebGL seems to be one of those). As soon as it turns on things get hot in my experience, even if it's not being pushed to capacity
There's a WebGL (and Threejs) setting for whether to use a discrete GPU: 'powerPreference' [1, 2], with the caveat: "Note that this property is only a hint and a WebGL implementation may choose to ignore it."
I see that it doesn't work for some. To Rich's credit, he did mention during the presentation that it was unfinished. From my experience, Svelte and Three.js are a very productive combination. While the declarative approach of Svelte Cubed makes sense for generic scenes, for complex ones I prefer classic use of Three.js even if that means writing more lines of code.
I've used Svelte and Three.js recently for several data visualizations and the DX is very good. Shamelss plug: https://cybernetic.dev/ (HN warning: uses crypto data).
I think Rich will solve the current problems promptly now that he is working full time on Svelte at Vercel.
Why does this need to be its own thing? Looking at the repo[1], we have less 500 lines of code not counting the website itself, and its mostly just svelte code doing what any developer would do to use Threejs on their website.
I'm sure its nice to have that glue code written for you, (I haven't actually seen it work on any of my devices yet), but I don't really see what this is doing other than making a repo with Svelte and threejs dependencies, writing some svelte components, and making a flashy website. Is this really all you need to do to "create something"?
As a self-taught developer I am always confused what _should_ be my labor or not , especially with web-development. Like, I honestly would assume that I would get laughed off of HN if I ever "made" something like this and passed it off as an accomplishment. But perhaps I am missing something crucial here...
> I'm sure its nice to have that glue code written for you
I think you answered your own question there. There aren't any rules dictating how many lines of code must be written before it counts as "creating something".
Rich, Svelte's creator, likes to just jump in and create a small little demo or showcase or just any kind of "project", that shows something interesting that can be done, in some area he's currently involved with.
And he shares those as open source on his Github. I appreciate that.
Yeah I figured that out now.. I think I was just reacting to this like it was a full-fledged framework trying to sell me something, so to speak. But as a demo of both Svelte and threejs, along with some code to make them play nice, its certainly a worthy/good/shareable thing!
One of the first things I did after learning about - and getting excited by - Svelte, was to try and get my canvas library to play nicely with it.[1]
Given the rapid development Svelte has endured over the past 18 months I have no idea whether my solution still works. I'll have to revisit/review/retest it when I get a spare moment.
There are a lot of reasons someone might have made this:
- They're a new developer, and this was a big accomplishment for them that they want to show off
- They've built a few projects this way, identified the repetitive boilerplate code and extracted it into a library
- They built a small app as a way to learn about Svelte and Three.js and want to get others' feedback
- They're excited about Svelte or Three.js and want to show off what it can do (this is what actually happened, since the author is also the creator of Svelte)
- They realize that other developers who aren't familiar with Svelte or Three.js may have trouble starting a project like this, so they wrote the plumbing code to help them
It might seem to you that this code does "what any developer would do", but I assure you it's not. Everyone is different, and things that seem obvious to you may not be to others.
I also want to comment on this:
> Like, I honestly would assume that I would get laughed off of HN if I ever "made" something like this and passed it off as an accomplishment. But perhaps I am missing something crucial here...
To be honest, I think the tone in your comment comes off as dismissive, and comments like this perpetuate the assumption that people have that they'll get laughed off HN if they show something like this. Ultimately the result is fewer people will show off stuff they make. And that sucks! The community should be a welcoming place that fosters others' enthusiasm. If this doesn't interest you, or you think it's too simple, you're always free to not upvote and not read. Obviously, a lot of other people do think this is interesting, because it made the front page.
Actually, that felt like a very valid question on your part! A question that would be answered by a small intro for the project, like:
"Svelte Cubed is a component library for building Three.js scene graphs in Svelte apps. It was built because of reasons X and Y, attempts to solve the W problem and in practice will make doing Z easier thanks to this."
While having docs of any sort is nice and should be encouraged, at the same time i often find myself wishing that more projects would summarize what they are, why they exist and what problems they solve, much like a lot of software packages do (or should do) in the app stores. Do other people not do that sort of stuff with their Git repos for projects, so that everyone can understand what they're looking at, at a glance?
Here's a few examples from repos that were a part of my Master's degree:
Adding to what others have said, lines of code isn't a great measure of the quality of a project. There's beauty and elegance in simplicity, and creating something well-structured and concise can take incredible skill. In fact, Svelte is also such a project; I believe version 1 was under 2000 LoC
One more thing, software is more than just the code. Documentation is also a critical component of successful and useful software, and the submission does an amazing job of making this approachable and useful through Rich's characteristically clear documentation
The short answer is that you'd use Svelte Cubed for the same reason you'd use Svelte (or indeed any component framework) itself: declarative code tends to be more robust, readable and maintainable than imperative code.
There's absolutely nothing wrong with using Three directly, but it's equivalent to using the DOM directly. At some point it gets hard to keep track of hierarchical relationships that aren't expressed as hierarchies, and managing state across your app becomes a burden.
In addition, because components have a managed lifecycle, you get things like hot module reloading 'for free' if you're using a framework like Vite (or SvelteKit, which uses Vite). Once you've tried building scenes this way (e.g. maintaining your camera position while you tweak the properties of an object you've zoomed in on), Cmd-R driven development feels paleolithic.
Sigh, being an old geezer here I can't shake the feeling every other show HN post is stuff we did 20 years ago just reinvented (sometimes wastefully). Yes, we had 3D on the web then. It was called VRML. We didn't have Svelte but somehow UI work didn't take years and an army of coders to put together. Something went funny in the last couple of decades. Back then I thought we'd be coding much cooler stuff in 20 years.
Maybe the web has an upper level of "cool" that we've already reached. And the really cool stuff quickly gets nerfed and watered down to appeal to the masses for commercial purposes.
There is some cool shit being done, maybe just not on the web.
I feel like part of the reason may be that people really like react-three-fiber, and svelte needs to show that it can do that too. If someone is looking for "how do I 3d with svelte" it‘s nice to have a defintive answer instead of random tutorials.
If it doesn‘t actually take a whole lot of code, that seems great.
maybe i am too easily impressed. i took this as showing off (yet another) svelte possibility and a demonstration of how elegantly it can be used. i'm new at svelte and found this eye-opening.
btw demos seem to work perfectly on safari 15.1, ff94.0.1 and brave 1.32.106 on macos monterey and on my ancient Note 8 running the android brave 1.32.106
This is version 0.1. That's the "prove it can be done, and get it to work" stage of development. The extra features beyond the basic glue come later. In the case of react-three-fiber, which is the React alternative to this, the library does things like setting up sane defaults for you (things like color management, shadows, a camera, etc). Those weren't there in v0.1. The extra bits take a little more time.
That’s quite different from “what any developer does to use three.js on their website” which is usually imperative code in a render loop.
That the implementation itself [1] looks pretty vanilla is actually one of Svelte’s selling points! It would look a lot more complex with other frameworks.
I had this on my machine the other day (while developing with Plotly in webGL mode).
A proper restart fixed it. Happened after installing some system updates, so if you’re on a Ubuntu (or downstream) distro maybe give that a shot. I think something just got left in a bad state post-update.
Very cool, but the text on the buttons still isn't optically centered, there's to much padding on the bottom likely caused by an inapropriate font for ui design!
I have a multiplayer game client using Svelte for the UI [1]. Svelte Cubed looks awesome for this, but...
Is declarative easier to reason about for complex projects, or does it become necessary to go imperative? I can imagine the advantage of imperative is being able to use normal engineering practices, but this isn't something I've thought about before.
Are there examples where a declarative approach was phased out as complexity grew? The only example I can think of is when a company I worked for tried to use Flex (declarative Flash), which we later converted into pure ActionScript for larger projects.
I love some of the stuff you can do with 3D on the web…but the majority of web traffic now is mobile, and I’ve never had a mobile that handles it well.
I don’t use the latest flagship, but I’m usually on one from ~3 years earlier; there are many people with far less capable devices than mine. So it seems like it’s doomed to stay niche for a few more generations yet.
76 comments
[ 0.17 ms ] story [ 146 ms ] thread"Create beautiful, high-performance 3D apps"
While it runs incredibly choppy on my Android in Chrome and the renderer looks both awkward and has artifacts on the shadows.
"no camera set" too, FF 94 Linux. May be the linux part and the 3D/drivers mess/therefore lag of support for these things in linux that's to blame.
Also fails the same way with Chromium 91 Linux.
Edit: The home page animation works fine (30+ FPS), but the ones listed under the actual Examples tab are blank white pages
Maybe this will feel like a more natural fit.
Apparently the underlying code was used for some of the NY Times Covid infographics.
more and more, websites seem to care only about Chrome
It's mostly down to the browser and OS, and a function of screen resolution and GPU 'power', rather than anything to do with the framework or JS aspects.
1: https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2
2: https://threejs.org/docs/#api/en/renderers/WebGLRenderer
I've used Svelte and Three.js recently for several data visualizations and the DX is very good. Shamelss plug: https://cybernetic.dev/ (HN warning: uses crypto data).
I think Rich will solve the current problems promptly now that he is working full time on Svelte at Vercel.
I'm sure its nice to have that glue code written for you, (I haven't actually seen it work on any of my devices yet), but I don't really see what this is doing other than making a repo with Svelte and threejs dependencies, writing some svelte components, and making a flashy website. Is this really all you need to do to "create something"?
As a self-taught developer I am always confused what _should_ be my labor or not , especially with web-development. Like, I honestly would assume that I would get laughed off of HN if I ever "made" something like this and passed it off as an accomplishment. But perhaps I am missing something crucial here...
1. https://github.com/rich-harris/svelte-cubed
I think you answered your own question there. There aren't any rules dictating how many lines of code must be written before it counts as "creating something".
Really didn't mean any snark at all!
Given the rapid development Svelte has endured over the past 18 months I have no idea whether my solution still works. I'll have to revisit/review/retest it when I get a spare moment.
[1] - https://scrawl-v8.rikweb.org.uk/how-do-i/add-to-a-svelte-pro...
- They're a new developer, and this was a big accomplishment for them that they want to show off
- They've built a few projects this way, identified the repetitive boilerplate code and extracted it into a library
- They built a small app as a way to learn about Svelte and Three.js and want to get others' feedback
- They're excited about Svelte or Three.js and want to show off what it can do (this is what actually happened, since the author is also the creator of Svelte)
- They realize that other developers who aren't familiar with Svelte or Three.js may have trouble starting a project like this, so they wrote the plumbing code to help them
It might seem to you that this code does "what any developer would do", but I assure you it's not. Everyone is different, and things that seem obvious to you may not be to others.
I also want to comment on this:
> Like, I honestly would assume that I would get laughed off of HN if I ever "made" something like this and passed it off as an accomplishment. But perhaps I am missing something crucial here...
To be honest, I think the tone in your comment comes off as dismissive, and comments like this perpetuate the assumption that people have that they'll get laughed off HN if they show something like this. Ultimately the result is fewer people will show off stuff they make. And that sucks! The community should be a welcoming place that fosters others' enthusiasm. If this doesn't interest you, or you think it's too simple, you're always free to not upvote and not read. Obviously, a lot of other people do think this is interesting, because it made the front page.
"Svelte Cubed is a component library for building Three.js scene graphs in Svelte apps. It was built because of reasons X and Y, attempts to solve the W problem and in practice will make doing Z easier thanks to this."
Perhaps a bit like their Getting Started guide, but with the missing reasoning for the project to exist: https://svelte-cubed.vercel.app/docs/getting-started
Similarly, the GitHub doesn't seem to have an extensive README or anything yet, either: https://github.com/rich-harris/svelte-cubed
While having docs of any sort is nice and should be encouraged, at the same time i often find myself wishing that more projects would summarize what they are, why they exist and what problems they solve, much like a lot of software packages do (or should do) in the app stores. Do other people not do that sort of stuff with their Git repos for projects, so that everyone can understand what they're looking at, at a glance?
Here's a few examples from repos that were a part of my Master's degree:
https://git.kronis.dev/rtu1/kvps5_masters_degree_covid_1984/...
https://git.kronis.dev/rtu1/kvps5_masters_degree_astolfo_clo...
(admittedly the repos themselves no longer are relevant, though should serve as an example of what i mean)
One more thing, software is more than just the code. Documentation is also a critical component of successful and useful software, and the submission does an amazing job of making this approachable and useful through Rich's characteristically clear documentation
There's absolutely nothing wrong with using Three directly, but it's equivalent to using the DOM directly. At some point it gets hard to keep track of hierarchical relationships that aren't expressed as hierarchies, and managing state across your app becomes a burden.
In addition, because components have a managed lifecycle, you get things like hot module reloading 'for free' if you're using a framework like Vite (or SvelteKit, which uses Vite). Once you've tried building scenes this way (e.g. maintaining your camera position while you tweak the properties of an object you've zoomed in on), Cmd-R driven development feels paleolithic.
There is some cool shit being done, maybe just not on the web.
The web's "upper level of cool" is being able to display a list of text and images without stutter. And it fails even at that.
All the other things that are being desperately bolted on (WASM, WebGL etc.) are just rehashes of everything we already had 20 years ago.
If it doesn‘t actually take a whole lot of code, that seems great.
btw demos seem to work perfectly on safari 15.1, ff94.0.1 and brave 1.32.106 on macos monterey and on my ancient Note 8 running the android brave 1.32.106
That’s quite different from “what any developer does to use three.js on their website” which is usually imperative code in a render loop.
That the implementation itself [1] looks pretty vanilla is actually one of Svelte’s selling points! It would look a lot more complex with other frameworks.
[1] https://github.com/Rich-Harris/svelte-cubed/blob/main/src/li...
> Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.
A proper restart fixed it. Happened after installing some system updates, so if you’re on a Ubuntu (or downstream) distro maybe give that a shot. I think something just got left in a bad state post-update.
Is declarative easier to reason about for complex projects, or does it become necessary to go imperative? I can imagine the advantage of imperative is being able to use normal engineering practices, but this isn't something I've thought about before.
Are there examples where a declarative approach was phased out as complexity grew? The only example I can think of is when a company I worked for tried to use Flex (declarative Flash), which we later converted into pure ActionScript for larger projects.
1: https://github.com/Suncapped/babs
- https://github.com/pmndrs/react-three-fiber
- https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
Svelthree - Svelte powered three.js development https://svelthree.dev/
Do these two projects cover the same scope?
I don’t use the latest flagship, but I’m usually on one from ~3 years earlier; there are many people with far less capable devices than mine. So it seems like it’s doomed to stay niche for a few more generations yet.
I can’t defend this, but there is something about working with Svelte that makes me feel like web development has arrived.