Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

15,192 subscribers

13,984 Aufrufe • vor 1 Monat •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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,268 Aufrufe • vor 1 Jahr

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,829 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 8 Monaten

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,581 Aufrufe • vor 1 Jahr

🚀 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

24,267 Aufrufe • vor 3 Monaten

Showing off two unique features of my #threejs Advanced Glass Material: colored caustics and glass-to-glass interaction. The glass can actually “see” other glass objects in the scene, preserving their depth, internal reflections, and refractions. The green color being visible through the blue glass shows the color and depth interaction. Powered by #WebGPU and a lot of custom rendering work that I learned on #threejsJourney new TSL lessons from the GOAT Bruno Simon Live demo coming soon. #creativecoding
2:52

Showing off two unique features of my #threejs Advanced Glass Material: colored caustics and glass-to-glass interaction. The glass can actually “see” other glass objects in the scene, preserving their depth, internal reflections, and refractions. The green color being visible through the blue glass shows the color and depth interaction. Powered by #WebGPU and a lot of custom rendering work that I learned on #threejsJourney new TSL lessons from the GOAT Bruno Simon Live demo coming soon. #creativecoding

Anderson Mancini

15,922 Aufrufe • vor 1 Monat

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 Aufrufe • vor 8 Monaten

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,867 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 8 Monaten

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

222,106 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 5 Monaten

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,340 Aufrufe • vor 2 Jahren

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

150,161 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 7 Monaten

My whole company runs on skills I bundled into a GitHub repo. Here's how to build the same thing for your team: - Put your skills in a GitHub repo - Get Claude to write the couple of JSON files that make it readable as a plugin - In Claude Code, type /plugin, go to marketplaces, add marketplace, paste your repo URL - Split the plugins by department, so your copywriter isn't installing the finance skills It works in Codex too. I've got the same team skills installed there and I use them the same way. Now when I build something like my Notion formatting skill, I add it to the repo and it lands on everyone's Claude and Codex. If someone wrecks a skill, we roll it back to an older version. The key is enabling auto-update, so when someone improves a skill everyone benefits. I don't have a clue how the JSON works. I got Claude to set the whole thing up for me. Start with one skill and before you know it your whole team will be AI pilled.
5:18

My whole company runs on skills I bundled into a GitHub repo. Here's how to build the same thing for your team: - Put your skills in a GitHub repo - Get Claude to write the couple of JSON files that make it readable as a plugin - In Claude Code, type /plugin, go to marketplaces, add marketplace, paste your repo URL - Split the plugins by department, so your copywriter isn't installing the finance skills It works in Codex too. I've got the same team skills installed there and I use them the same way. Now when I build something like my Notion formatting skill, I add it to the repo and it lands on everyone's Claude and Codex. If someone wrecks a skill, we roll it back to an older version. The key is enabling auto-update, so when someone improves a skill everyone benefits. I don't have a clue how the JSON works. I got Claude to set the whole thing up for me. Start with one skill and before you know it your whole team will be AI pilled.

The Startup Ideas Podcast (SIP) 🧃

19,532 Aufrufe • vor 1 Monat

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

38,068 Aufrufe • vor 7 Monaten

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,301 Aufrufe • vor 5 Monaten