Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Draft render from last week, built with Three.js Shading Language and WebGPU, using hash noise and afterimage passes in Post Process. It's not making the final cut (too noisy for interactive use), but I liked the Ghibli-esque vibe enough to share it here.

Renaud

12,307 subscribers

23,815 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 Comments

A.J. De Gol1 year ago

gives me The Great Wave off Kanagawa vibes

Empower1 year ago

Get $10-$300 instantly* with no interest, late fees or credit checks

Anderson Mancini1 year ago

Mind-blowing 🤯

Felipe Mendes1 year ago

The funny part is that for most people it's cool... But for those who know what's going on it's 🤯🙀. In the future, add mouse iterations or dynamic parameter changes so that people can better understand the difference between this and a GIF.

Himanshu Kumar1 year ago

WebGPU's potential shines, even in unused drafts.

digitalgram1 year ago

Nice!!

Sinan 🌍1 year ago

nice

Marco Ludovico Perego1 year ago

I guess these have become my favorite work in progress of the year lol

Renaud1 year ago

Ahah thanks Marco!! ❤️

Johnny | Vibe Builder1 year ago

hard to imagine this is possible with three.js

Chak Poi1 year ago

Is it possible to view this in VR with the waves going on all around you?

Related Videos

🚀 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

🚀 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,332 views • 1 month ago

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

Faraz

44,895 views • 23 days ago

Introducing: Not Fast Enough 🚗🔥 Play: Can you beat 7 seconds? Give it a try and share your best lap times! Kudos to Cursor Three.js and of course @levelsio for reigniting the spark Weekend's vibe coding stops here 😁

Introducing: Not Fast Enough 🚗🔥 Play: Can you beat 7 seconds? Give it a try and share your best lap times! Kudos to Cursor Three.js and of course @levelsio for reigniting the spark Weekend's vibe coding stops here 😁

Skirmantas Januškas 📡

85,793 views • 1 year ago

No Three.js. No fake web-based depth-of-field or focal-length emulation. Customize in web, render in Blender. While everyone is vibe-coding apps for flat pattern generators, or at most Three.js-based 3D scenes, we’re already one step ahead. We built an app that lets you use a web UI to control an actual Blender 3D render. Eevee engine is used for streaming quick previews back into the app, while Cycles renders the final image for better material quality and lighting. So simple to use that you can even give it to your client. Of course, built with Toolcraft.

No Three.js. No fake web-based depth-of-field or focal-length emulation. Customize in web, render in Blender. While everyone is vibe-coding apps for flat pattern generators, or at most Three.js-based 3D scenes, we’re already one step ahead. We built an app that lets you use a web UI to control an actual Blender 3D render. Eevee engine is used for streaming quick previews back into the app, while Cycles renders the final image for better material quality and lighting. So simple to use that you can even give it to your client. Of course, built with Toolcraft.

Alex Barashkov

74,888 views • 14 days 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

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,472 views • 1 year ago

I am SO pumped for Jack Kellogg and his solid double on $SOUN from last week in the $3s to the $7s today, clocking in $100,000+ in profits and more importantly he absolutely called it to a T in his webinar last week, so EVERYONE should learn from this. But not enough people are studying so retweet this if you want me to repost his entire webinar FOR FREE on my channel. If I post it, do you promise to STUDY HAAAAAAAAARD?! 100+ RETWEETS AND I'LL POST IT FOR YOU!

I am SO pumped for Jack Kellogg and his solid double on $SOUN from last week in the $3s to the $7s today, clocking in $100,000+ in profits and more importantly he absolutely called it to a T in his webinar last week, so EVERYONE should learn from this. But not enough people are studying so retweet this if you want me to repost his entire webinar FOR FREE on my channel. If I post it, do you promise to STUDY HAAAAAAAAARD?! 100+ RETWEETS AND I'LL POST IT FOR YOU!

Timothy Sykes

31,188 views • 2 years ago

Since I started developing the mapgl R package I've envisioned built-in interactive legends. They're finally here in the upcoming package release: a filter slider for continuous legends, and click-to-filter for categorical legends. Blog post coming this week!

Since I started developing the mapgl R package I've envisioned built-in interactive legends. They're finally here in the upcoming package release: a filter slider for continuous legends, and click-to-filter for categorical legends. Blog post coming this week!

Kyle Walker

11,772 views • 6 months ago

With Maccabi Tel Aviv fans being banned from the Villa game, there’s some relevance here - the National League failed badly to deal with abusive language during our game against Carlisle last week. Higher leagues deal with this better, but the National League has a similar process, it just failed to use it. Robbie Savage

With Maccabi Tel Aviv fans being banned from the Villa game, there’s some relevance here - the National League failed badly to deal with abusive language during our game against Carlisle last week. Higher leagues deal with this better, but the National League has a similar process, it just failed to use it. Robbie Savage

Dale Vince

126,050 views • 8 months ago

Memory on the harness level after 2 years... i've started writing blogs again! In this post, I dive _very_ deep into the different ways to compose and add memory to the harness for various different use cases. it's interactive. it's fun. you can listen to it too!

Memory on the harness level after 2 years... i've started writing blogs again! In this post, I dive _very_ deep into the different ways to compose and add memory to the harness for various different use cases. it's interactive. it's fun. you can listen to it too!

Dhravya Shah

20,621 views • 29 days ago

The final week to get your raffle ticket for a chance to win this Chevrolet Tahoe and everything Amy and I have loaded it up with. Throwing in not one, not two, but FOUR JR Motorsports chairs and the inflatable raft. CLICK HERE:

The final week to get your raffle ticket for a chance to win this Chevrolet Tahoe and everything Amy and I have loaded it up with. Throwing in not one, not two, but FOUR JR Motorsports chairs and the inflatable raft. CLICK HERE:

Dale Earnhardt Jr.

66,493 views • 1 year ago

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders

Swifter

13,070 views • 4 months ago

Were our tax dollars used to assassinate Charlie Kirk? If you understand the DoD procurement process…this gets interesting. Didn’t post this here bc I just got X last week, but if you’ve seen my timeline from today and combine it with this video…just food for thought.

Were our tax dollars used to assassinate Charlie Kirk? If you understand the DoD procurement process…this gets interesting. Didn’t post this here bc I just got X last week, but if you’ve seen my timeline from today and combine it with this video…just food for thought.

theleahfiles

94,442 views • 3 months ago

Using #threejs with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. Next, I'll enable "mesh painting" mode. Let's see how it looks. #creativecoding

Using #threejs with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. Next, I'll enable "mesh painting" mode. Let's see how it looks. #creativecoding

Anderson Mancini

26,897 views • 5 months ago

🇺🇸🇮🇷🇷🇺 Trump has no evidence Russia shares intelligence with Iran that would allow it to attack US forces in the region: "We don't know, but it's not doing very well. If they are, it's not helping much. If you take a look at what's happened to Iran in the last week, if they're getting information, it's not helping them much." "We have the greatest military on earth and I built it in my first term. And, unfortunately, I'm forced to use it now." — adds

🇺🇸🇮🇷🇷🇺 Trump has no evidence Russia shares intelligence with Iran that would allow it to attack US forces in the region: "We don't know, but it's not doing very well. If they are, it's not helping much. If you take a look at what's happened to Iran in the last week, if they're getting information, it's not helping them much." "We have the greatest military on earth and I built it in my first term. And, unfortunately, I'm forced to use it now." — adds

Lord Bebo

41,972 views • 4 months 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.

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,339 views • 1 year ago

From here begins the photoshop process. I don't want to display every part of this - but i like using a lot of vectors and halftones in my peices. Since this is a speedrender, i decided to use a basic halftone background, and use a pre-existing fortnite HDRI for the bg.

From here begins the photoshop process. I don't want to display every part of this - but i like using a lot of vectors and halftones in my peices. Since this is a speedrender, i decided to use a basic halftone background, and use a pre-existing fortnite HDRI for the bg.

RothStuff! 2/3

13,770 views • 3 months ago

Inspired by Andrej Karpathy's practice of tinkering with smaller GPTs to gain intuition, I've been training small neural nets to play this simple 2d game I created. On the left is a visualization of the neural net firing in real time. Built with Claude, Three.js, and WebGPU and using JAX from Google DeepMind. I’m piping the neuron activation into Ableton as MIDI to trigger Serum 2.

Inspired by Andrej Karpathy's practice of tinkering with smaller GPTs to gain intuition, I've been training small neural nets to play this simple 2d game I created. On the left is a visualization of the neural net firing in real time. Built with Claude, Three.js, and WebGPU and using JAX from Google DeepMind. I’m piping the neuron activation into Ableton as MIDI to trigger Serum 2.

Aaron Lemke

22,687 views • 3 months ago

If I'm tired of making the content maybe you're also tired of seeing it. It's a weird place to be since we built this thing over the last 7 years but there's a shift happening and I can see it in not only my personal self but the comments too. Im also relived that I'm not the only one feeling this way.

If I'm tired of making the content maybe you're also tired of seeing it. It's a weird place to be since we built this thing over the last 7 years but there's a shift happening and I can see it in not only my personal self but the comments too. Im also relived that I'm not the only one feeling this way.

Shipwreck

87,248 views • 3 months ago