Loading video...

Video Failed to Load

Go Home

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn...

Andersonmancini's profile picture

Anderson Mancini

14,874 subscribers

13,340 views • 11 days ago •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney
1:27

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney

Anderson Mancini

20,231 views • 1 year ago

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.
1:41

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,822 views • 1 year ago

STOP everything you're doing, and go try WebGPU and TSL. I wanted to give a shot to TSL and see how it's working today, and wow. in short, it's great Sunag, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️
0:35

STOP everything you're doing, and go try WebGPU and TSL. I wanted to give a shot to TSL and see how it's working today, and wow. in short, it's great Sunag, mrdoob and all the TSL contributors made an awesome job making it as easy as possible #threejsjourney #r3f #threejs details below ⬇️

Alex

84,323 views • 7 months ago

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f
1:02

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

Anderson Mancini

12,525 views • 1 year ago

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl
1:43

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl

Anderson Mancini

17,859 views • 1 year ago

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f
0:43

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

23,606 views • 2 months ago

I asked GitHub Copilot with Work IQ to compare my PowerToys search spec in SharePoint to the implementation on the GitHub repo and it worked seamlessly. Being able to pair work context with code in the repo using Copilot is an absolute game changer for development💥💥💥
1:38

I asked GitHub Copilot with Work IQ to compare my PowerToys search spec in SharePoint to the implementation on the GitHub repo and it worked seamlessly. Being able to pair work context with code in the repo using Copilot is an absolute game changer for development💥💥💥

Kayla Cinnamon ☕

41,200 views • 6 months ago

I am keen to show you with a few lines of YAML config I am able to monitor my website and create a GitHub Issue if it is down by using the Open Source project Kestra Kestra is the Open Source Orchestration Tool with a large ecosystem of plugins, with these plugins you can connect them together like lego and building anything! Try it yourself, GitHub repo link below...
2:20

I am keen to show you with a few lines of YAML config I am able to monitor my website and create a GitHub Issue if it is down by using the Open Source project Kestra Kestra is the Open Source Orchestration Tool with a large ecosystem of plugins, with these plugins you can connect them together like lego and building anything! Try it yourself, GitHub repo link below...

Eddie Jaoude | DevRel | Open Source

16,851 views • 1 year ago

My water experiment in #webxr using #threejs is live. If you have a WebXR-compatible device, you can access it here: For now, the experience is optimized for #MetaQuest3. I plan to add support for more devices and improve performance. The source code review video will be available soon on my YouTube channel. I hope you like it 😊 #threejsJourney #ar #vr
0:51

My water experiment in #webxr using #threejs is live. If you have a WebXR-compatible device, you can access it here: For now, the experience is optimized for #MetaQuest3. I plan to add support for more devices and improve performance. The source code review video will be available soon on my YouTube channel. I hope you like it 😊 #threejsJourney #ar #vr

Anderson Mancini

11,006 views • 1 year ago

Skills shopping cart for Claude Code In this video I show how I add Railway Skills to a “shopping cart”. After selecting the Skills I need, I copy a single command and they’re added directly to my project. I built to make the composition of Claude Code components as flexible as possible. You can install settings, hooks, subagents, and anything new that gets added to Claude Code will appear on the site. It’s fully open source and community-maintained. If you want to contribute, you’re welcome to fix or update components, download and use the existing ones, or simply support the project by leaving a star on GitHub. Repo:
1:18

Skills shopping cart for Claude Code In this video I show how I add Railway Skills to a “shopping cart”. After selecting the Skills I need, I copy a single command and they’re added directly to my project. I built to make the composition of Claude Code components as flexible as possible. You can install settings, hooks, subagents, and anything new that gets added to Claude Code will appear on the site. It’s fully open source and community-maintained. If you want to contribute, you’re welcome to fix or update components, download and use the existing ones, or simply support the project by leaving a star on GitHub. Repo:

Daniel San

20,460 views • 7 months ago

I'm building a first-class shader graph editor for Three.js. Powered by TSL and WebGPU. Real-time previews. Human readable code. Type inference. The list goes on. The free plan will include a fully featured editor (except for custom code nodes) with export to TSL so you can drop your shader right into your project in seconds. I'll also be offering a paid plan for a small monthly fee to cover hosting costs. Some benefits include unlimited projects, private projects, versioning, export to GLSL/WGSL, and more. Join the waitlist now👇🏻
0:33

I'm building a first-class shader graph editor for Three.js. Powered by TSL and WebGPU. Real-time previews. Human readable code. Type inference. The list goes on. The free plan will include a fully featured editor (except for custom code nodes) with export to TSL so you can drop your shader right into your project in seconds. I'll also be offering a paid plan for a small monthly fee to cover hosting costs. Some benefits include unlimited projects, private projects, versioning, export to GLSL/WGSL, and more. Join the waitlist now👇🏻

Dan Greenheck

25,719 views • 6 months ago

I invited my friend and taco shop owner Edgar from Top Shelf Tacos in Carson, CA to come try some tacos. A while ago I had tacos like this in Cancun, wet with consommé on the side and I loved it. This is my version of making them at home and it's always a crowd pleaser. Have to pair it with the serrano green fire salsa, chipotle red salsa, and queso fresco on the side. You can also make quesabirria and it's the best.
2:16

I invited my friend and taco shop owner Edgar from Top Shelf Tacos in Carson, CA to come try some tacos. A while ago I had tacos like this in Cancun, wet with consommé on the side and I loved it. This is my version of making them at home and it's always a crowd pleaser. Have to pair it with the serrano green fire salsa, chipotle red salsa, and queso fresco on the side. You can also make quesabirria and it's the best.

POV Husband

221,535 views • 4 months ago

I wanted to learn #Threejs properly. So naturally, instead of just learning it, I built an entire interactive guide with live playgrounds for 8 topics. Geometry, materials, cameras, lighting, controls, post-processing, all with examples you can play with in the browser. You can literally drag, rotate, and break things in real time while learning. I spent more time building the playgrounds than writing the explanations. Classic move 😅 More sections coming. I plan to keep this thing alive and growing. If you wanna try, link in the first comment 👇
0:29

I wanted to learn #Threejs properly. So naturally, instead of just learning it, I built an entire interactive guide with live playgrounds for 8 topics. Geometry, materials, cameras, lighting, controls, post-processing, all with examples you can play with in the browser. You can literally drag, rotate, and break things in real time while learning. I spent more time building the playgrounds than writing the explanations. Classic move 😅 More sections coming. I plan to keep this thing alive and growing. If you wanna try, link in the first comment 👇

Hasan Aboul Hasan

22,128 views • 4 months ago

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f
0:31

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f

Andrew Chen

22,339 views • 1 year ago

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney
2:21

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney

Anderson Mancini

149,859 views • 9 months ago

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.
3:43

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.

Anderson Mancini

12,113 views • 6 months ago

UPDATE: Ended up with this cool little tool to both build and verify the training data quality; it turned out very accurate! So I am at least happy about that (tho it obvisouly was the easy part) The pipeline to produce this kind of training data (from any Warsh recitation) is in the GitHub below. The repo also documents my full exploration of the Tarteel-for-Warsh problem (and quite frankly, of the offline open source tarteel problem in general): what I tried, what's promising, what's not, and what I think the next steps worth taking are: from a non-engineer with little technical expertiste trying to figure it out. I tried to document everything so the repo might be excessively comprehensive at times. It's basically my entire convo with Claude on the subject, condensed in one repo. Please someone take this and run with it! I genuinely believe the right engineers who can make something real out of this are out there First public repo I've ever shared, so if I made dumb mistakes, please tell me! 🔗
0:58

UPDATE: Ended up with this cool little tool to both build and verify the training data quality; it turned out very accurate! So I am at least happy about that (tho it obvisouly was the easy part) The pipeline to produce this kind of training data (from any Warsh recitation) is in the GitHub below. The repo also documents my full exploration of the Tarteel-for-Warsh problem (and quite frankly, of the offline open source tarteel problem in general): what I tried, what's promising, what's not, and what I think the next steps worth taking are: from a non-engineer with little technical expertiste trying to figure it out. I tried to document everything so the repo might be excessively comprehensive at times. It's basically my entire convo with Claude on the subject, condensed in one repo. Please someone take this and run with it! I genuinely believe the right engineers who can make something real out of this are out there First public repo I've ever shared, so if I made dumb mistakes, please tell me! 🔗

Yousr

37,936 views • 5 months ago

If you’re not making many mistakes, you must not be learning much. Mistakes and failures are ultimately more valuable to you than successes because they provide the best learning. I detailed some of my biggest mistakes—and what I learned from them—as part of the new MasterClass Executive program. At this stage in my life, I believe the most important thing I can do is to pass along everything I’ve learned to others, hoping that they find value in it and can avoid making the same mistakes I’ve made. If you’re interested in the program, you can apply for one of the limited spots here:
0:30

If you’re not making many mistakes, you must not be learning much. Mistakes and failures are ultimately more valuable to you than successes because they provide the best learning. I detailed some of my biggest mistakes—and what I learned from them—as part of the new MasterClass Executive program. At this stage in my life, I believe the most important thing I can do is to pass along everything I’ve learned to others, hoping that they find value in it and can avoid making the same mistakes I’ve made. If you’re interested in the program, you can apply for one of the limited spots here:

Ray Dalio

122,090 views • 3 months ago

I came into this game doing traditional R&B love songs and the more I’m in the studio the more I’ve experimented and the more my sound is evolving. & NGL it makes me nervous and I haven’t even dropped the songs yet 🤣 I want to give my supporters a sound they love but I also want to experiment too
2:06

I came into this game doing traditional R&B love songs and the more I’m in the studio the more I’ve experimented and the more my sound is evolving. & NGL it makes me nervous and I haven’t even dropped the songs yet 🤣 I want to give my supporters a sound they love but I also want to experiment too

Coco Jones

78,682 views • 1 month ago

After 3 years of pouring my heart and soul into Horizonite, I’ve made the incredibly difficult decision to stop development effective immediately. The grind, the bugs, the endless scope creep... it’s all become too much. Instead, I’ve decided to pivot to something more meaningful with my life. I’m deleting the repo, burning the assets, and going full time as an OnlyFans foot model. Thank you to everyone who supported the game. It was fun while it lasted. 🫡 Hope you guys can keep supporting me in my new job.
0:23

After 3 years of pouring my heart and soul into Horizonite, I’ve made the incredibly difficult decision to stop development effective immediately. The grind, the bugs, the endless scope creep... it’s all become too much. Instead, I’ve decided to pivot to something more meaningful with my life. I’m deleting the repo, burning the assets, and going full time as an OnlyFans foot model. Thank you to everyone who supported the game. It was fun while it lasted. 🫡 Hope you guys can keep supporting me in my new job.

Horizonite

16,488 views • 4 months ago