Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildungKunst#threejs#r3f
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Faraz
Farazvor 1 Jahr

Some stills because compression will destroy this video

Profilbild von Faraz
Farazvor 1 Jahr

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

Profilbild von Weather, Maps and some AI
Weather, Maps and some AIvor 2 Jahren

Prepare for any weather!

Profilbild von Anderson Mancini
Anderson Mancinivor 1 Jahr

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

Profilbild von Faraz
Farazvor 1 Jahr

Thanks bud, always too kind ❤️

Profilbild von Chak Poi
Chak Poivor 1 Jahr

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

Profilbild von Tom Stevenson
Tom Stevensonvor 1 Jahr

Wow! This is nice!

Profilbild von Denis Burkatsky
Denis Burkatskyvor 1 Jahr

mind boggling

Profilbild von ciscoda
ciscodavor 1 Jahr

beautiful. Could watch this all day

Profilbild von Simon
Simonvor 1 Jahr

Very relaxing to watch!

Profilbild von Faraz
Farazvor 1 Jahr

Let put some lofi behind it 😄

Ähnliche Videos

Interactive rug shader - A Three.js port of Dervish's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl
0:20

Interactive rug shader - A Three.js port of Dervish's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl

Faraz

17,266 Aufrufe • vor 1 Jahr

Wave Lights Demo and Source Code: #threejs #webgl #shader
0:38

Wave Lights Demo and Source Code: #threejs #webgl #shader

Sabo Sugi

24,312 Aufrufe • vor 2 Monaten

Trails Stream (Updated) Demo and Source Code: #threejs #webgl #shader
0:41

Trails Stream (Updated) Demo and Source Code: #threejs #webgl #shader

Sabo Sugi / Mondragon Framer Template

18,213 Aufrufe • vor 2 Monaten

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding
0:36

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding

Faraz

111,088 Aufrufe • vor 3 Jahren

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

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

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

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
0:36

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 Aufrufe • vor 12 Tagen

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

forcing myself to workout with mediapipe computer vision, threejs, and gemini 3 code and live demo available if you want to join my pain
0:37

forcing myself to workout with mediapipe computer vision, threejs, and gemini 3 code and live demo available if you want to join my pain

AA

304,326 Aufrufe • vor 5 Monaten

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f
1:04

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f

mike douges

56,786 Aufrufe • vor 3 Jahren

New tutorial by Anderson Mancini on how to use AutoFocus with #threeJs and #R3F 👉 His portfolio 👉
0:21

New tutorial by Anderson Mancini on how to use AutoFocus with #threeJs and #R3F 👉 His portfolio 👉

Bruno Simon

11,885 Aufrufe • vor 1 Jahr

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

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

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

Got my hands on the new SoftShadow that N8 Programs and ☄︎ are working on for R3F Feels so sooooft👼 #threejs #webGL #r3f
0:22

Got my hands on the new SoftShadow that N8 Programs and ☄︎ are working on for R3F Feels so sooooft👼 #threejs #webGL #r3f

Bruno Simon

40,605 Aufrufe • vor 3 Jahren

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

⚡️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 Aufrufe • vor 3 Jahren

Aurum Leaf Demo and Source Code: #threejs #webgl #creativecoding
0:39

Aurum Leaf Demo and Source Code: #threejs #webgl #creativecoding

Sabo Sugi

12,523 Aufrufe • vor 1 Monat

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs
0:56

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs

Baptiste Adrien

110,187 Aufrufe • vor 2 Jahren