What's Hot On Tresjs V4

Rate this content
Bookmark

A year has passed since TresJS was open-sourced at this very same conference, so in this talk, we are going to give a full update on what we have been cooking for v4 of the core, including new devtools, translated docs, a cookbook, new features and a lot of bug fixing.

This talk has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.

FAQ

Threads.js is a Vue custom renderer that allows you to create 3D scenes in a declarative way using Vue components and composables. It is named after the Spanish word for tree and is designed to work seamlessly with 3D elements.

You can start using Threads.js by choosing your package manager and running the command `pnpm add @threads.js/core`. You can also experiment with it on the official playground, which allows you to edit code and see changes in real-time.

Threads.js version 4 introduces several new features, including on-demand rendering, refactored event store with propagation logic, reactive prop objects for primitives, better memory management, and various bug fixes and improvements.

On-demand rendering allows users to decide when to render a scene. By setting the render mode prop to 'on-demand' on the Tress canvas, the scene will only render when it detects changes, improving performance significantly.

Primitives in Threads.js are similar to components in Vue. They allow you to programmatically create instances of 3D objects, such as meshes, geometries, and materials, and add them to the scene graph of your application.

Threads.js version 4 includes automatic disposal of resources when components are unmounted to free both CPU and GPU memory. There is also a manual dispose utility method available for more control over resource management.

The Threads.js DevTools now include renderer info, which provides details about memory usage, objects rendered, and more. There's also a list of shader programs and materials rendered, as well as a search functionality to filter the scene graph.

The 2024 roadmap for Threads.js includes an alpha release for version 4, updates to CentOS and the rest of the ecosystem, a stable release of post-processing version 1, development of an XR/VR package, and a physics package using a wrapper.

Yes, the Threads.js documentation has been translated into multiple languages, including English, Spanish, Chinese, German, French, and Dutch, thanks to community contributions.

You can contribute to Threads.js by joining their Discord community. They are actively looking for more contributors to help improve and expand the library.

Alvaro Saburido
Alvaro Saburido
20 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Threads.js, a Vue custom renderer for creating declarative 3D scenes, has gained popularity with over 1,700 GitHub stars, 9K monthly NPM downloads, and a strong developer community. Version 4 introduces performance improvements, on-demand rendering, typing support, and memory management. Event bubbling and primitive creation are key features, along with enhanced memory management and scene inspection capabilities. The roadmap includes translated documentation, a new cookbook, and the launch of post-processing and XR VR packages. Performance enhancements, a new 3D course, and updates to Tres Leches UI library are also in the works.
Available in Español: Lo más destacado en Tresjs V4

1. Introduction to Threads.js

Short description:

One year ago, we presented Threads.js on Vue.js live one and open sourced the project. Now, the Threads.js ecosystem has more than 1,700 GitHub stars, with the core package being the most popular. We have over 250 developers using the core, and around 40 contributors. The library has almost 9K monthly NPM downloads and has seen a lot of traffic in the last year. Let's dive into the new features of Threads.js version 4.

Hello, Vue.js life. One year ago, we had the honor of presenting Threads.js to the audience on Vue.js live one. If you were there, you probably remember me, Dreset, as a Slytherin student, and probably also remember that we open sourced the project live on stage.

A year later, this is how the Threads.js ecosystem is looking like. We have more than 1,700 GitHub stars across the whole ecosystem, being the core package the one with more stars, almost 1.5K, followed by CentOS and the Nuxt module. Only the core is being used by more than 250 developers, and we have around 40 contributors.

This is the amount of NPM downloads monthly, and we're almost racing to the 9K, which is pretty cool for a library that only has one year old. These are some of the stats of the websites and documentation, having a lot of traffic in the last year. With that being said, let's see what's hot on the new version of Threads.js version 4, coming up soon before summer.

2. Overview of Threads.js Version 4

Short description:

I'm Alvaro Sabu, a DevRel engineer and the author of Threads.js. Threads.js is a Vue custom renderer for creating declarative 3D scenes. Get started with your choice of package manager or try it on our official playground. In version 4, we addressed performance issues, on-demand rendering, typing support, and memory leaks. We also added event handlers to primitives and made the prop object reactive.

Hello, everyone. My name is Alvaro Sabu. I'm a DevRel engineer at StudyBlock. I'm also a content creator. I have my YouTube channel, Alvaro DevLabs, where I create tutorials and courses about open source in general, Vue, and Nuxt. I am also the author of Threads.js. I have my portfolio that I never finish, and you can always say hi on my networks and Alvaro Sabu on Twitter and message.

So before I start, I assume that 30% of you might have heard about Threads.js. A little bit more if you were here last year, but the other 70%, what I can tell you is that you will be amazed by the end of this talk. What is Threads.js? Threads.js is a Vue custom renderer that allows you to create 3D scenes in a declarative way by using Vue components and composables. So imagine the same way you create UI components and elements in your apps, doing the same for 3D. So Threads.js is the Spanish word for tree, because this library is based on 3Ds and also because the French word was already taken by another library.

How do you get started? You can choose your package manager of choice. In my case, I use pnpm, and you can do pnpm add at Threads.js core. This is a core package, and install tree as a pure dependency, or you can always play around with it on our official playground, which is similar to the Vue single file component playground. If you click here, you're going to see a place where you can edit the code and see the changes right away here, so you can experiment with Threads.js.

With that being said, let's jump to the new features that you can expect on Threads.js version 4. For the last year, we recollected a lot of feedback from the community, a lot. Bunch of users were complaining about some performance issues. A lot of them were requesting on-demand rendering. We have a lot of issues with typing support, especially after they released 156 from 3DS. We also experimented memory leaks on view route changes, so whenever the user was changing the route from one page to another, the memory of the GPU and CPU weren't clear. Some materials and geometries were left there, occupying space. This is bad, especially if you are creating 3D experiences on mobile devices.

Next on the list, we added event handlers on primitives, such as pointer events. We took all that feedback and started working on new features for version 4. The first one is on-demand rendering. Then we refactored the event store and added a logic for propagation. We added event handlers to primitives. Using primitives, now the prop object is reactive.

QnA