Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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:...

150,161 Aufrufe • vor 11 Monaten •via X (Twitter)

70 Kommentare

Profilbild von mrdoob
mrdoobvor 11 Monaten

And the browser is running in economy mode 😁

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Man.... thats why I getting some hiccups here and I don't see them in my other device haha. You nailed it. 🤩 I was doing extra optimization I on it because I was concerned it was bot optimized enough. When I turned this off, this thing is flying now 🙏🏻. Thank you Ricardo.

Profilbild von richard
richardvor 11 Monaten

Curious if u tried @theworldlabs? Completely generated in AI, first using image generated via midjourney rhen brought into world labs.

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@theworldlabs I just got access to the API hehe. I will try it for sure.

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

guess who is powering all those transitions and animations 😬. I'm a gsap lover, you guys know this 🤩

Profilbild von Supachai
Supachaivor 11 Monaten

Very amazing. I want to learn this lighting magic.

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you very much. The oficial example will be available soon in threejs 181 :). I also shared here the source code to a similar scene using this tech that you can inspect :)

Profilbild von Marc
Marcvor 11 Monaten

Insane! Can you share a bit how you figure and play with the correct light settings? Any helper tools?

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thanks mate. I use no tools. Just the browser. But I've been doing this since 1998 so I have a lot of memory muscle hehe. But blender Evee would be my tool if I had to visualize this before browser.

Profilbild von David Ronai
David Ronaivor 11 Monaten

Nice job ! Would be nice to update to this kind of model the webgpu postfx ao / ssr / ssgi webgpu example 🫶 @threejs

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@threejs Thanks ;). I'm trying to post an example to the oficial library. I just need some spare time and to read the contribution guidelines.

Profilbild von Quentin Merabet
Quentin Merabetvor 11 Monaten

Oh my god

Profilbild von Loki Wyll | Kamui Woods + Apider
Loki Wyll | Kamui Woods + Apidervor 11 Monaten

@Strealm, I don’t know how to code leave me alone. 😭

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@Strealm You can use the examples and start from them. This is how I started hehe.

Profilbild von gongqing
gongqingvor 11 Monaten

Hey Anderson, I don't know your background, but what if you add each 3D object with a generative pipeline like @TencentHunyuan's 3D generator (or selector) to let users design their dream house (a quick-start indoor version)?

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@TencentHunyuan It would work for sure. Especially with this new 3d ai tech where the mesh topology is very good. I'm doing this in a new client project that I'm working on and it is working flawlessly

Profilbild von gongqing
gongqingvor 11 Monaten

@TencentHunyuan Great! I'd like to try when it's ready

Profilbild von jacob
jacobvor 11 Monaten

Imagine if AirBnB added some 3d render ability to see the space, would be amazing

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

I'm sure this is on their plans. Using Gaussian Splatting, this is definitely possible now.

Profilbild von Bilal Dayı
Bilal Dayıvor 11 Monaten

Excellent work. Congratulations.

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you very much buddy ;)

Profilbild von Otano Studio
Otano Studiovor 11 Monaten

Now that’s impressive, kudos to whomever brought those to the web and great setup by yourself.

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you mate. Threejs is the real magic here. I'm just the wizard hehe

Profilbild von Otano Studio
Otano Studiovor 11 Monaten

I got into modeling and Archviz is where I landed. Appreciate the setup.

Profilbild von .dev
.devvor 11 Monaten

the lightning is so goodd 😍

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thanks my friend. An nothing is baked. This is just meshes. Everything you drop in the new renderer looks gorgeous by default with this setup haha.

Profilbild von .dev
.devvor 11 Monaten

Wow, i'd like to implement this on a challenge i'm working on if i get the time How is it performance-wise?

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

It works pretty well on my iPhone15. You can try it here:

Profilbild von .dev
.devvor 11 Monaten

I got this in my mail from your newsletter, so cool

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Ahhh so you are there hahah. Amazing my friend. Thank you hehe.

Profilbild von .dev
.devvor 11 Monaten

Yes i am 😅

Profilbild von Ernie
Ernievor 11 Monaten

How hard is it to implement such an advanced lighting? Is it all done manually or there are some threejs plugins for it?

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

This is SSGI via WebGPU. It is one single directional light + one single Environment HDRI using <Environment /> from Drei. There is no setup TBH. You just load your model, set the light intensity and direction and you are ready to go. The SSGI + SSR has a bunch of internal parameters that you need to tweak to achieve what you want. But it is pretty straight forward with the threejs examples available. It will be available to everyone soon. I'm just playing with it ahead of time because I'm anxious and I was waiting for this feature last 7 years hahha.

Profilbild von Ernie
Ernievor 11 Monaten

Impressive, thanks. Threejs improved massively since the last time I looked at it

Profilbild von mr.tipton
mr.tiptonvor 11 Monaten

Looks amazing

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@mr_tipton_art Thank you ☺️🙏🏻

Profilbild von Saïd Aitmbarek
Saïd Aitmbarekvor 11 Monaten

looks dope

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you very much for your kind feedback

Profilbild von Junaid
Junaidvor 11 Monaten

This but for airbnb🙌🏼🙌🏼

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

🤣

Profilbild von Andrey
Andreyvor 11 Monaten

best representation of my thoughts

Profilbild von Yuva
Yuvavor 11 Monaten

Phenomenal work!

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you Yuva!

Profilbild von Aryan Singh
Aryan Singhvor 11 Monaten

Wow

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thanks ;)

Profilbild von Kyle Waz
Kyle Wazvor 11 Monaten

Wow, this is amazing!

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you buddy. You need to see this in action with a car scene. It is my next project. Bringing a car model to a concrete dark temple where only one sunlight source will bounce to light the room and the car. The way light reflects in surfaces with SSGI+SSR together is mind blowing.

Profilbild von Md. Irteza rahman Masud
Md. Irteza rahman Masudvor 11 Monaten

@threejs Nice. Does threejs has any raytracing library where I can use raytraced GI, AO and translucent reflections?

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@threejs Yes. There us this great one by @garrettkjohnson

Profilbild von Pedro de Oliveira
Pedro de Oliveiravor 11 Monaten

Nice! It looks incredible

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thanks Pedro. Light in real time was always something that got me into 3D modeling. It was sad that only people working with the real 3D model, in a 3D softwares, was able to play with the light. But now, we can offer this to clients and users, in real time, via a simple browser. No plugins, no downloads, no learning, no baked lights. Just pure joy and fun 🤩

Profilbild von Kaus
Kausvor 11 Monaten

Crazy

Profilbild von  C010011012
 C010011012vor 11 Monaten

Insane, I thought this was a real photo at first!

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thanks!!! That's great feedback hehe.

Profilbild von Meek
Meekvor 11 Monaten

would be nice to have the clock time change too

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Are you reading my mind? Hahaha. This is exactly what I'm doing right now haha.

Profilbild von Cheicolate
Cheicolatevor 11 Monaten

This is fucking beautiful, well done

Profilbild von Roman Gorshkov
Roman Gorshkovvor 11 Monaten

Amazing 🤩

Profilbild von Mayank Shah
Mayank Shahvor 11 Monaten

Ufff that lighting!! ✨ Excellent work mate

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thanks mate. Nothing like a warm sunset to make anything cozy hehe.

Profilbild von Micah
Micahvor 11 Monaten

hold onnnn

Profilbild von Yannick Lange
Yannick Langevor 11 Monaten

Just want to say that this is really impressive

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you my friend. It is still not as accurate as other tools, but getting better and better every new release ☺️

Profilbild von stengineer
stengineervor 11 Monaten

wow amazing work my man

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

@bigpt_dog

Profilbild von Oscar Fogelström™
Oscar Fogelström™vor 11 Monaten

WOW

Profilbild von Mher
Mhervor 11 Monaten

Wow how do you get threejs to look so good. I need to make some updates to mher dot ai lol

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you hehe. This is SSGI + SSR + GTAO in the new WebGPU renderer. This is the new standard quality when you use the new pipeline hehe. It is amazing!

Profilbild von Zion
Zionvor 11 Monaten

Looks like magic

Profilbild von Anderson Mancini
Anderson Mancinivor 11 Monaten

Thank you very much for your kind feedback ☺️

Ähnliche Videos