Threlte 8

by thunderbong • 1 year ago

126 19 1 year ago

legrisch4• 1 year 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...

ema• 1 year 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.

legrisch4• 1 year ago

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

cf100clunk• 1 year ago

I found an introduction link up at the right of the upper-left logo, under Documentation:

https://threlte.xyz/docs/learn/getting-started/introduction

  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.

swyx• 1 year ago

since you're on HN, i'd maybe copy paste some of your nicer api -> live demo examples on to this post so that people can see how nice and declarative the thing is

barathr• 1 year ago

Any chance that Threlte makes it easy to do view-independent rendering / ray tracing? Basically if you have many surfaces in your scene and you want to not just visualize the scene but find out how much light is arriving at any surface (even ones the camera currently can't see), is that something Threlte enables?

I'm interested in computing light that trees receive and want to be able to visualize it but also have even leaves that aren't in view to continue to receive light during the simulation.

jhurliman• 1 year ago

three.js might not be the right fit for computational rendering/raytracing, optimization techniques like frustum culling are more or less baked into the engine.

______• 1 year ago

The main Raycaster class in three.js (which you can access / use via refs from Threlte) isn't tied to the view, but can be used to cast from any point.

It might get computationally expensive to point that raycaster in many directions and intersect with all leaves. I'm not aware of a way to do "bulk" raycasting in three.js yet.

Separately, the lighting / shadows can compute visually shadow and lighting. But I'm not aware of a way to then easily measure out how much of a mesh is in shadow.

I am also interested in tree simulation -- I'm tinkering on a arborist/lumberjack game where you trim / cut down trees :)

incognito124• 1 year ago

Lovely to see a new major release, I bet that was a lot of work! Congratulations!

That said

I hate websites that highjack scrolls to show an animation, especially on a frontpage. I immediately dismiss a product I am planning to buy just because it has scroll animations, and go straight to a competitor.

Sateeshm2• 1 year ago

I think it's fine to use in this situation. So many 3d web experiences use scroll to progress through the scene, so doing that on the home page heremakes sense.

beders• 1 year 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.

legrisch4• 1 year 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!

Sateeshm2• 1 year 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

legrisch4• 1 year 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

crackinmalackin• 1 year ago

Awesome work getting this updated with Svelte 5!

pyinstallwoes2• 1 year ago

Year? :)

greazy• 1 year ago

It's a misconception that this needs to be updated.

https://stackoverflow.com/questions/2390230/do-copyright-dat...

pyinstallwoes2• 1 year ago

Looks bad without it updated

Threlte 8

Related Stories