legrisch (u/legrisch)

legrisch commented on Threlte 8 threlte.xyz/blog/threlte-... · Posted by u/thunderbong

Sateeshm · 7 months ago

Check this video out if you want to know what this is about:

https://www.youtube.com/live/Fn0_8iZGkLk?si=gVF5PUOTjJ83oJyS

Time code 17:20

legrisch · 7 months ago

Thanks, I didn't know it's already up. I guess the most interesting part and what sets Threlte apart is the Threlte Studio which I dive into at 37:00, here's the link: https://youtu.be/Fn0_8iZGkLk?t=2223

legrisch commented on Threlte 8 threlte.xyz/blog/threlte-... · Posted by u/thunderbong

beders · 7 months ago

The migration guide is massive.

Threlte 8 is yet another example of how little backward compatibility matters to JS library developers and adopting such a library can be a costly endeavor.

Backward compatibility is readily and easily sacrificed in the name of ... what exactly?

Other examples:

MUI (Material UI lib) - some kudos are warranted for the existence of a migration tool but there are too many migrations that are not trivial or easy to change.

Angular - the OG of "All your code is now worthless, adopt or die" (some may be too young to remember Angular v1)

Vue - completely unnecessary renames and plenty of breaking changes between v2 and v3

The list goes on and on.

And it is not like you can afford to stay behind several major versions either. Eventually a CVE pops up that will not be fixed in older versions or the dependency tree will mess you up because you are relying on older versions that are incompatible with newer ones in some arcane 5 liner npm package.

Tread careful when choosing a JS library.

legrisch · 7 months ago

The migration guide is indeed pretty extensive. In the end we get feedback from users that the actual migration is not as awful as it seems to be. A lot changed under the hood but the main APIs stayed the same. The changes to `<Canvas>` for example are changes that you usually do once in the whole app. Other changes just cater to Svelte 5 having a different API.

I get your sentiment though. I'm always for as little dependencies as possible. If you rely on Three.js in the first place, you're going to need to update regularly anyway since pretty much every version is a major version. Thanks for your feedback!

legrisch commented on Threlte 8 threlte.xyz/blog/threlte-... · Posted by u/thunderbong

ema · 7 months ago

You might want to add a small blurb at the beginning of the post explaining what Threlte is as presumably most people coming from HN have no idea.

legrisch · 7 months ago

Thanks for pointing that out. Unfortunately this post is out of my control, otherwise the title would have already been very different :)

legrisch commented on Threlte 8 threlte.xyz/blog/threlte-... · Posted by u/thunderbong

legrisch · 7 months ago

Hey HN, thanks for posting. My name is Grischa, I'm the creator of Threlte. Here's a blog post of what's new in Threlte 8: https://threlte.xyz/blog/threlte-8

Threlte is a renderer and component library for using Three.js in a declarative and state-driven way in Svelte apps. It provides strictly typed components for deep reactivity and interactivity out-of-the-box.

It's suffice to say it was a whole lot of work and a great challenge to make use of Svelte 5. A lot of the important parts have been rewritten to make use of the new reactivity model, some APIs have been aligned with conventions introduced by Svelte 5 and type safety has been improved all over. Also this release includes the first alpha release of Threlte Studio which is what we call a spatial programming toolset.

If you're looking for an migration guide, it's here: https://threlte.xyz/docs/learn/advanced/migration-guides#thr...

legrisch commented on 3D framework for the web, built on Svelte and Three.js threlte.xyz/... · Posted by u/spxneo

th0ma5 · a year ago

It is not accessible, or at the very least makes no statement about accessibility. Also, pretty much the single major issue to any new GUI to be honest, so everyone should always bring it up first thing. You have to be able to use an interface.

legrisch · a year ago

"It is not accessible" is not a fair statement. Accessibility goes way beyond "it's not readable by a screen reader" – and even that is in my opinion rapidly changing with AI accessibility tools. See my other comment[0] that touches this topic briefly. Sure, we want and need to provide better solutions, but a lot of this is done by developers and there's little we can do about that.

[0] https://news.ycombinator.com/item?id=40212705

legrisch commented on 3D framework for the web, built on Svelte and Three.js threlte.xyz/... · Posted by u/spxneo

spxneo · a year ago

No problem! I just happened to finish the Svelte tutorial yesterday and I was curious if Three.js could be brought to Svelte.

Svelte was so intuitive and I naturally thought 3D environments could be efficiently managed was when I googled "Svelte + three.js"

Coming from PlayCanvas, Babylon.js I'm super excited to see the development of Threlte Studio. What I like about DREI is that it lays out everything like a directory but I was reaching for the familiar "studio tool"

what is the ETA for Threlte Studio?

legrisch · a year ago

I can’t say anything specific, but it will be available only with Threlte 8 as it’s depending on Svelte 5. Threlte 8 is the focus of our development but we of course want to wait out the official release. Threlte 8 is already published as `@next` if you’re feeling adventurous and the Studio will follow that in some days :)

legrisch commented on 3D framework for the web, built on Svelte and Three.js threlte.xyz/... · Posted by u/spxneo

keyle · a year ago

Nice, the documentation seems a bit lightweight at first glance. It would be good if it went to show how the home page animation was created and how interactivity could make this framework useful.

Also, how accessible is this content from the perspective of a screen reader?

legrisch · a year ago

Thanks! Threlte is "just" offering a declarative way to express Three.js. If you know how the `<T>` component and its props and event handlers work, you can use the Three.js documentation for everything else.

Apart from that with Threlte I personally practice documentation-driven-development, so ecosystem packages are exhaustively documented. If you're missing something, let us know via an issue[1] or on Discord[2].

Accessibility is a topic we didn't care enough yet to be perfectly honest. Accessibility doesn't stop at screen readers though, it's about contrast, size, colors, motion, reachability, and so much more that we cannot provide and are a consumer topic. Naturally WebGL apps suffer from being practically invisible to screenreaders. There are workarounds[3] but essentially this has to be solved by consumers of Threlte (devs) and hopefully by browser vendors at some point in the future.

[1] https://github.com/threlte/threlte/issues

[2] http://chat.threlte.xyz

[3] https://github.com/pmndrs/react-three-a11y

legrisch commented on 3D framework for the web, built on Svelte and Three.js threlte.xyz/... · Posted by u/spxneo

LatticeAnimal · a year ago

I love Threlte! My company uses it and it is remarkably clean & clear. Fantastic OSS project

legrisch · a year ago

Threlte loves you too <3

If you want, feel free to contact me on Discord[1] to provide feedback on how you use Threlte in your company, I would greatly appreciate it.

[1] http://chat.threlte.xyz

legrisch commented on 3D framework for the web, built on Svelte and Three.js threlte.xyz/... · Posted by u/spxneo

Sateeshm · a year ago

Been using it for about a couple of years now. Everytime I look at the docs, there is a new extra. And legrisch is wonderful. Discord is quite active. Amazing toolkit and can't wait to see where it goes.

legrisch · a year ago

That is very kind, thanks so much :)

legrisch commented on 3D framework for the web, built on Svelte and Three.js threlte.xyz/... · Posted by u/spxneo

chompychop · a year ago

Thanks for your work! :)

Could you tell us how Threlte compares with React-Three-Fiber in terms of feature parity and performance?

legrisch · a year ago

React-three-fiber was and still is a huge inspiration and I can’t thank Paul and the other contributors enough. Afaik they pioneered this relationship between a frontend framework and Three.js.

In essence, react-three-fiber and @threlte/core offer the same base functionality, which is to offer a declarative Three.js API for an established frontend framework. The technical approach however is fundamentally different: React itself provides an API (called a react renderer) to "transform" JSX into any tree-like data structure, whether it be a Three.js scene graph, a PDF or mails. Svelte (as of now) doesn't have that, so we had to get a bit creative and make heavy use of the Svelte Context API.

With Threlte 6 we introduced the Plugin API[0] which you may use to inject code into any component that instances an object. It's a very powerful feature that we use for many of the common abstractions in @threlte/extras such as interactivity[1] and which opens the door to more technically interesting and advanced use cases like the upcoming Threlte Studio[2].

On performance: react again works fundamentally different and therefore react-three-fiber is recommending to not use props for fast-changing object attributes[3]. Of course direct object manipulation is faster, as less computation is lost in "interpreting" a prop, but Svelte is generally faster in doing so, so we do not recommend against it – simple apps (which is the majority) totally work with fast-changing props. Starting with Threlte 8 which will support Svelte 5, prop updates happen granularly, so we don't have to apply all props whenever a single one changes. I do want to emphasize that for more demanding apps you would use a pattern that is independent of prop update costs and no significant overhead of react-three-fiber or Threlte would apply here.

In Threlte 7 we introduced a powerful DAG-based task scheduling system[4] that not only solved long-standing flexibility bottlenecks but also is the technical foundation of many interesting future features and use cases such as fixed physics updates (that are still correctly queueing with other tasks), easily scheduling tasks before or other tasks (e.g. running things after a frame has been rendered) or making complex orchestrations of updates across the entire app.

In terms of ecosystem react-three-fiber is of course much larger, that is just the nature of react vs. any other framework. We do however offer solutions for the most crucial things like physics, animation, layout and XR. Our ecosystem is centrally organized in a mono repository[5]. By that we can ensure that changes to @threlte/core properly cascade through all dependent packages. Organisationally speaking, I put effort in making sure that Threlte is run and owned by a team right from the beginning to make sure it's long-lasting and doesn't suffer from a single sight on things.

[0] https://threlte.xyz/docs/learn/advanced/plugins

[1] https://threlte.xyz/docs/reference/extras/interactivity

[2] https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...

[3] https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls

[4] https://threlte.xyz/docs/learn/basics/scheduling-tasks

[5] https://github.com/threlte/threlte