Loading video...

Video Failed to Load

Go Home

Another unreleased shader - Puddle with raindrops, splashes, ripples and lightning. Of course, all #threejs and #r3f. Best witih sound. Dont forget to hit "Start" on the demo page! Live: Code:

CantBeFaraz's profile picture

Faraz

4,533 subscribers

33,915 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts#threejs#r3f
LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

Faraz's profile picture
Faraz1 year ago

Some stills because compression will destroy this video

Faraz's profile picture
Faraz1 year ago

Hits different in full screen. Tap to expand! This is #threejs not Unreal Engine

Weather, Maps and some AI's profile picture
Weather, Maps and some AI2 years ago

Prepare for any weather!

Anderson Mancini's profile picture
Anderson Mancini1 year ago

Magical 🤩. Thank you so so much for sharing this 🙏🏻. God bless you.

Faraz's profile picture
Faraz1 year ago

Thanks bud, always too kind ❤️

Chak Poi's profile picture
Chak Poi1 year ago

I can't even imagine programming something like this. It seems like a superpower to me.

Tom Stevenson's profile picture
Tom Stevenson1 year ago

Wow! This is nice!

Denis Burkatsky's profile picture
Denis Burkatsky1 year ago

mind boggling

ciscoda's profile picture
ciscoda1 year ago

beautiful. Could watch this all day

Simon's profile picture
Simon1 year ago

Very relaxing to watch!

Faraz's profile picture
Faraz1 year ago

Let put some lofi behind it 😄

Related Videos

Spherical physics test. 3000 m&m's chocolates. created with TSL #threejs live demo (all source code is in html of the page) ->
0:50

Spherical physics test. 3000 m&m's chocolates. created with TSL #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

20,457 views • 1 year ago

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->
0:35

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

16,114 views • 1 year ago

Manipulating joints of a large number of six-leged insects. Try tilt their house with orbit controls. Made with #threejs TSL live demo (all source code is in html of the page) ->
0:30

Manipulating joints of a large number of six-leged insects. Try tilt their house with orbit controls. Made with #threejs TSL live demo (all source code is in html of the page) ->

Maeda Mameo

35,288 views • 1 year ago

Batched mesh test. 26 characters, 200 clones each. 5,700,000 triangles. Found that the tornado has the shape of a Torus. created with #threejs live demo (all source code is in html of the page) ->
0:20

Batched mesh test. 26 characters, 200 clones each. 5,700,000 triangles. Found that the tornado has the shape of a Torus. created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

20,720 views • 1 year ago

🎉Finally converted the awesome @takram/three-geospatial R3F demo to Vanilla JS and added the cloud atmosphere visual effects. Also huge thanks to Shota Matsuda 松田 聖大 and Garrett Johnson! Checkout the live demo at: Full source codes can be found on my Github: #Threejs #WebGL #VanillaJavaScript
0:35

🎉Finally converted the awesome @takram/three-geospatial R3F demo to Vanilla JS and added the cloud atmosphere visual effects. Also huge thanks to Shota Matsuda 松田 聖大 and Garrett Johnson! Checkout the live demo at: Full source codes can be found on my Github: #Threejs #WebGL #VanillaJavaScript

jeantimex

78,930 views • 1 year ago

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->
0:33

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 views • 1 year ago

adding computer vision to the marble aquarium hand gesture control for brightness, animation speed, rotation an audioreactive webapp built with threejs, tonejs, mediapipe code and live demo ↓
0:28

adding computer vision to the marble aquarium hand gesture control for brightness, animation speed, rotation an audioreactive webapp built with threejs, tonejs, mediapipe code and live demo ↓

AA

45,906 views • 9 months 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

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

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f
1:40

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f

Anderson Mancini

47,570 views • 3 years ago

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

SwissGL Demo: Particle Lenia with alien SOUNDS! Audio is fully rendered on GPU with GLSL shaders and streamed to WebAudio thanks to the new async GPU->CPU read feature. LIVE DEMO: Press "toggleAudio" in settings for sound 4K YouTube version: Source code:
0:28

SwissGL Demo: Particle Lenia with alien SOUNDS! Audio is fully rendered on GPU with GLSL shaders and streamed to WebAudio thanks to the new async GPU->CPU read feature. LIVE DEMO: Press "toggleAudio" in settings for sound 4K YouTube version: Source code:

Alex Mordvintsev

34,572 views • 2 years ago

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR
1:02

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR

Bela Bohlender

18,660 views • 1 year ago

New video out on YouTube! Create a room portfolio with three.js and Blender. Beginner friendly course!! (see the folio in the video below~). Live Site: Featuring Bruno Simon's coffee smoke shader haha. Also featuring Denis Wipart's materials! Check them out here!!! They're amazing!!! #threejs #blender
1:03

New video out on YouTube! Create a room portfolio with three.js and Blender. Beginner friendly course!! (see the folio in the video below~). Live Site: Featuring Bruno Simon's coffee smoke shader haha. Also featuring Denis Wipart's materials! Check them out here!!! They're amazing!!! #threejs #blender

Andrew Woan

27,578 views • 1 year ago

Remember this incredible video from André Cardoso on how to add game feels to your game project ? I always thought it was funny to play as a capsule which is what the player of your game most commonly is. So i'm making a Roguelike coop game with WebGPU and threejs #threejs #r3f
0:32

Remember this incredible video from André Cardoso on how to add game feels to your game project ? I always thought it was funny to play as a capsule which is what the player of your game most commonly is. So i'm making a Roguelike coop game with WebGPU and threejs #threejs #r3f

Alex

27,028 views • 6 months ago

🎙️Hello and welcome to THE SOUND OF THE START OF THE WEEKEND! This week's AK BETS Betting Show is live on all podcast platforms and on YouTube. 💻Watch: 🎧Listen: Ali Maxwell | George Elek
0:28

🎙️Hello and welcome to THE SOUND OF THE START OF THE WEEKEND! This week's AK BETS Betting Show is live on all podcast platforms and on YouTube. 💻Watch: 🎧Listen: Ali Maxwell | George Elek

Not The Top 20 Pod

12,645 views • 1 year ago

Another WebGL image filter (and a great occasion to use my vacation pics) Around 10kb of GLSL + vanilla JS, no external libraries Live demo & source code: Hosted on CodePen.IO
0:23

Another WebGL image filter (and a great occasion to use my vacation pics) Around 10kb of GLSL + vanilla JS, no external libraries Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

37,791 views • 1 year ago

Tonight’s the night! Can’t wait to see everyone at J. Timothy's Taverne for the best in CT food, fundraising, and of course, UConn Huskies! And don’t forget, we’ll have Jared Kotler live w/ Alex Karaban and the Queen of CT on CT Scoreboard Podcast Building the next generation of UConn fans!
2:20

Tonight’s the night! Can’t wait to see everyone at J. Timothy's Taverne for the best in CT food, fundraising, and of course, UConn Huskies! And don’t forget, we’ll have Jared Kotler live w/ Alex Karaban and the Queen of CT on CT Scoreboard Podcast Building the next generation of UConn fans!

Husky Ticket Project

12,046 views • 2 years ago

stayc performing a whole unreleased version of teddy bear in chinese live just because they can! they really are one of the best performers when it comes to live stages and connecting with fans
3:09

stayc performing a whole unreleased version of teddy bear in chinese live just because they can! they really are one of the best performers when it comes to live stages and connecting with fans

iconicstayc

19,231 views • 11 months ago