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