Svelte Cubed | Hacker News Reader

Svelte Cubed

svelte-cubed.vercel.app

213 points0xedb72 comments

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...

1. https://github.com/rich-harris/svelte-cubed

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.

You are right I'm sorry to perpetuate anything bad. Thank you for your views and wisdom

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."

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)

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.

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!

Really didn't mean any snark at all!

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.

[1] - https://scrawl-v8.rikweb.org.uk/how-do-i/add-to-a-svelte-pro...

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

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.

> Maybe the web has an upper level of "cool" that we've already reached.

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.

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.

I think you missed the point. This is enabling you to use a declarative, component-based approach over three.js. You get to use templates and reactivity from Svelte. Ex: https://github.com/Rich-Harris/svelte-cubed/blob/main/src/ro...

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...

> 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".

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.

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 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.

The examples are working well for me, if there was an issue it must be resolved.

The React version is react-three-fiber which is also a cool project.

- https://github.com/pmndrs/react-three-fiber

- https://docs.pmnd.rs/react-three-fiber/getting-started/examp...

That site runs so slowly in Firefox on my computer. I didn't try it on anything else since that just turned me off too much.

Yes it's quite the juxtaposition.

"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.

Worked fine on my desktop Firefox.

Works fine for me but it eats 25% of my GTX1080Ti, not sure that's appropriate for one rotating logo.

It's a Firefox issue in general in my experience. I have a Babylon.js project that runs at half the framerate in Firefox on the same computer.

I have a 7 year old laptop running Safari that ground to a halt before I could even figure out what this thing is supposed to be.

Adding to the voices here: worked beautifully on my $300 Acer laptop on the latest Chrome.

Beautiful out of the gate.

I can’t defend this, but there is something about working with Svelte that makes me feel like web development has arrived.

Very interested to try this. I love react and I love Three.js but react-three-fiber feels like somehow battling against the tide.

Maybe this will feel like a more natural fit.

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?

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.

1: https://github.com/Suncapped/babs

Broadly speaking the advantage of imperative is usually in performance, not being easy to reason about at scale

Interesting, thanks. Optimization for example, makes sense.

Oh man Safari (15.1, macOS 12.0.1, MacBookPro15,1) is _unhappy_ with this page.

No issues here on the latest Safari on my MacBook Air. Both examples run fine as well.

> https://svelte-cubed.vercel.app/examples/trisolaris

> Uncaught TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.

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.

Restarting seemed to fix 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.

Didn't work in my version of FF at all, well the demo pages showed nothing.

https://svelte-cubed.vercel.app/examples/trisolaris

"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.

Running 93.0 (64-bit)on windows 10

I get the same on Windows, FF 91.

Chrome 96 works.

Works fine in FF for me (94.0.1). There's a gently spinning 3D svelte logo casting a shadow. No jank, but 2-5% GPU usage.

The logo on the title page works for me too, but none of the examples do.

The main page works, but did you try the examples?

The console says "no camera is set".