Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

A little work in progress on my new #threejs project showing how Screen Space Global Illumination also works wonders in open scenes. Here, I'm using SSGI with CSM, SSS (screen space shadows), and a custom atmospheric fog for more realism. Adjusting the time of day in a scene like...

Andersonmancini's profile picture

Anderson Mancini

13,488 subscribers

11,017 görüntüleme • 8 ay önce •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 9 ay önce

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding
4:25

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding

Anderson Mancini

27,986 görüntüleme • 10 ay önce

Live link: My new #archiviz project using #threejs is live. A realistic scene with 25,000 trees, various post-processing effects, running at 60 FPS, less than 10 MB download 😊. Screen space global illumination makes everything more realistic. Want to know more? Follow the thread👇🏻 #webgpu #threejsJourney
1:38

Live link: My new #archiviz project using #threejs is live. A realistic scene with 25,000 trees, various post-processing effects, running at 60 FPS, less than 10 MB download 😊. Screen space global illumination makes everything more realistic. Want to know more? Follow the thread👇🏻 #webgpu #threejsJourney

Anderson Mancini

17,753 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap. I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well. Live link coming soon. BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: #creativecoding #archiviz #WebGPU
2:39

My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap. I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well. Live link coming soon. BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: #creativecoding #archiviz #WebGPU

Anderson Mancini

29,926 görüntüleme • 2 ay önce

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney
1:23

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney

Anderson Mancini

32,145 görüntüleme • 2 yıl önce

Using here the new scene project sculpting brush added in Blender 5.2 It works similar like a shrinkwrap modifier with more refinements.
0:48

Using here the new scene project sculpting brush added in Blender 5.2 It works similar like a shrinkwrap modifier with more refinements.

Farrukh Abdur

195,750 görüntüleme • 1 ay önce

#threejs Classics Garage is on the FWA 🏅 looking for judges' votes 😍. I've been dreaming of SOTD with a personal project for a very long time 😊. Maybe this is the one. MeshTransitionMaterial is almost ready to release. More on this soon. #threejsJourney
0:23

#threejs Classics Garage is on the FWA 🏅 looking for judges' votes 😍. I've been dreaming of SOTD with a personal project for a very long time 😊. Maybe this is the one. MeshTransitionMaterial is almost ready to release. More on this soon. #threejsJourney

Anderson Mancini

18,223 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

Greetings to everyone on the first National Space Day. We recall with great pride our nation’s achievements in the space sector. It is also a day to laud the contributions of our space scientists. Our Government has taken a series of futuristic decisions relating to this sector and we will do even more in the times to come.
2:22

Greetings to everyone on the first National Space Day. We recall with great pride our nation’s achievements in the space sector. It is also a day to laud the contributions of our space scientists. Our Government has taken a series of futuristic decisions relating to this sector and we will do even more in the times to come.

Narendra Modi

1,166,689 görüntüleme • 2 yıl önce

Cyberpunk-ish ⚡️ Maybe not an entire city…but at least one rainy alley built with #threejs + WebGPU that weighs only 15 MB. Live link: This is also a sneak peek at some of the techniques that Sunag and I will be covering during our workshop at Three.js Conf Paris. More on that below 🤗 I hope you like it #WebGPU #creativecoding #threejsJourney
2:39

Cyberpunk-ish ⚡️ Maybe not an entire city…but at least one rainy alley built with #threejs + WebGPU that weighs only 15 MB. Live link: This is also a sneak peek at some of the techniques that Sunag and I will be covering during our workshop at Three.js Conf Paris. More on that below 🤗 I hope you like it #WebGPU #creativecoding #threejsJourney

Anderson Mancini

96,269 görüntüleme • 19 gün önce

On the weekend I was spending a lot of time in #Blender3d and #GodotEngine 4 to work on a small scene. I really, really love the Global Illumination in G4. This is done with one Directional Light.
0:24

On the weekend I was spending a lot of time in #Blender3d and #GodotEngine 4 to work on a small scene. I really, really love the Global Illumination in G4. This is done with one Directional Light.

Raffaele Picca aka. Picster

79,515 görüntüleme • 3 yıl önce

So i vibe coded a threejs webgpu splat renderer from scratch in an evening with gpt 5.4 Introducing Spark++ Give it a week or two, performance is slightly worse on fast camera movements but 60 fps on my toaster in less dense areas. Had to reduce overall density for screen recording, but it works on webgpu! And I have absolutely no clue how Splats work, zero Demo: Repo:
0:26

So i vibe coded a threejs webgpu splat renderer from scratch in an evening with gpt 5.4 Introducing Spark++ Give it a week or two, performance is slightly worse on fast camera movements but 60 fps on my toaster in less dense areas. Had to reduce overall density for screen recording, but it works on webgpu! And I have absolutely no clue how Splats work, zero Demo: Repo:

robot

32,580 görüntüleme • 5 ay önce

I’ve taken the #threejs water realism to the next level! Now with RGB distortion in the caustics, we get even more realistic, colorful light projections. The water movement has been improved to flow naturally, with optimizations for smoother performance. Plus, I’ve added a post-processing effect that simulates underwater distortion, complete with a dynamic waterline when the camera is partially submerged. After diving in, watch out for realistic water droplets on the screen! Stay tuned for the live link coming soon! 🌊💧. You can watch the video with better quality on my YouTube Channel. #threejsJourney #creativecoding #r3f
2:49

I’ve taken the #threejs water realism to the next level! Now with RGB distortion in the caustics, we get even more realistic, colorful light projections. The water movement has been improved to flow naturally, with optimizations for smoother performance. Plus, I’ve added a post-processing effect that simulates underwater distortion, complete with a dynamic waterline when the camera is partially submerged. After diving in, watch out for realistic water droplets on the screen! Stay tuned for the live link coming soon! 🌊💧. You can watch the video with better quality on my YouTube Channel. #threejsJourney #creativecoding #r3f

Anderson Mancini

211,857 görüntüleme • 1 yıl önce

Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu
2:42

Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu

Anderson Mancini

12,632 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce

Ok, back again with another Fizzy in-development video. This time I go over two things: 1. Some subtle, but meaningful, UI updates that really dial things in. I love little tweaks like this. Small bits of work that lead to outsized experience gains. We use color to help you absorb new real-time information about status without having to specifically look for it. 2. I share a new screen I haven't shared before. It's a novel design for Latest Activity. Things appear in their own place during the day, and empty space has meaning. Gaps, boxes, and colors provide a unique fingerprint, or texture, for a given day. It takes a little getting used to, but it's quite nice once you develop the intuition for how it works. Questions? Comments? Drop 'em below! More videos soon.
15:03

Ok, back again with another Fizzy in-development video. This time I go over two things: 1. Some subtle, but meaningful, UI updates that really dial things in. I love little tweaks like this. Small bits of work that lead to outsized experience gains. We use color to help you absorb new real-time information about status without having to specifically look for it. 2. I share a new screen I haven't shared before. It's a novel design for Latest Activity. Things appear in their own place during the day, and empty space has meaning. Gaps, boxes, and colors provide a unique fingerprint, or texture, for a given day. It takes a little getting used to, but it's quite nice once you develop the intuition for how it works. Questions? Comments? Drop 'em below! More videos soon.

Jason Fried

23,696 görüntüleme • 1 yıl önce