Gaussian Splatting for Real Estate - Three.js

⚡️Subscribe for updates: andersonmancin...
Wanna see another great example of how #gaussiansplatting can be useful? Placing a building into a 3D scene🤯. Here, I'm using @Polycam3D with #threejs Drei Splat component and @playcanvas super splat to clean it.
github.com/pmn...
Live link for this new project soon😊

[@360Pros]

Cool work Anderson. My team and I do a lot of work in real estate rendering, mostly on the stills and 360 panoramas. But ever since day 1 which was 7.5 years ago, I've been fascinated with real time web 3D the most. We've been developing more 3D into our deliverables lately as tools to support its creation come out. It's great to see developers such as yourself being creative with different tools and combining them to do novel things such as for instance this demonstration, combining a captured GSplat with a 3D modelled building. Let's connect, I'm certain that we can collaborate on something.

[@AndersonMancini]

Hey 👋🏻 wow. What beautiful and kind feedback. I wasn't expecting that hehe. Thank you so much for this. I've been working with real estate in Brazil for 15 years and this is something that I always dreamed of creating. But I had to wait fie the technology to get updated hehe. Finally, we can show projects as we see them in 3d software but on the internet 🤩. Let's connect for sure. Please visit my website and send me a message so I can have your email 🤩

[@360Pros]

@@AndersonMancini absolutely, what's your website page?

[@AndersonMancini]

@@360Pros andersonmancini.dev

[@julianvelez6563]

Awesome work bro ❤❤❤

[@AndersonMancini]

Thank you very much my friend 🧡

[@martincontreras2317]

very good! I have been learning about the subject and made a model of a project I am working on, with the polycam platform. How can I take the next step to learn how to edit these models? I mean what program do you use to edit, delete, and add another model on top of the original model?

[@AndersonMancini]

Hey there 👋🏻 . You can use the splat editor from play canvas. This is the one that I used here. It is awesome.

[@djohnworthy1040]

How did you manage to make the cover for the building floor + apartments ? @AndersonMancini

[@AndersonMancini]

Do you mean the 3d model? That was created on blender.

[@djohnworthy1040]

Bro, how did you manage to make that highlight floor with popup? I trying to solve that issue on my own at the moment. How did you manage to make it like that ? Like did you make many plans with same height on top of each other or how ?

[@AndersonMancini]

I'm using a raycaster to detect the click on each floor mesh that I created on blender. They are all hidden by default and I show them as we hover each mesh.

[@djohnworthy1040]

So you use this technique in other architecture videos of yours then right?@@AndersonMancini

[@AndersonMancini]

@djohnworthy1040 not all of them. In some cases, I also click on an HTML element to interact with the camera

[@djohnworthy1040]

Also Mr Anderson:) (Matrix) did you get the drone shot or find it ?

[@AndersonMancini]

This is a KZbin video. It works perfectly with any video of the same kind 👍🏻

[@felipefrango]

I'm sorry if it's a stupid question but in this case wouldn't it be better to focus the captured footage on the surrounding area rather than the building for more detail where it would actually matter most in the final result?

[@AndersonMancini]

The building is interactive for floor selection, which is not possible with gaussian splatting

[@felipefrango]

@@AndersonManciniYeah, that I get, that's not really what I asked lol. I get that the idea was to scan the area and use it as a background for the interactive building, but you seemed to scan the area and focus on the building that's there and that would ultimately be removed from the scene. My question was, considering you wanted to remove the building from the scene, couldn't you have focused more on the surroundings while scanning so you'd get a higher detailed background? Cause the way you did it it seems most of the detail from the scan went into the building that was erased.

[@AndersonMancini]

@felipefrango Ahhh I'm sorry heeh. My English sometimes fails me. I never recorded anything. This is a video from KZbin that someone else recorded. That's why hehe. I would do a better job if I recorded it for sure. I'm still considering buying a drone someday 🤔. Thanks for your visit

[@felipefrango]

@@AndersonManciniOh, I thought you had actually recorded drone footage yourself, not that this was just some random video, that's even more impressive then! For sure you would benefit a lot from being able to capture the footage from the beginning!

[@AndersonMancini]

@felipefrango Thank you hehe. Yes. I plan to have a drone next year. For bigger things like this, a drone is a must-have. But for objects, we can do a pretty decent job with any cell phone. And most recent researchers say that we will get an even better result with two photos only. AI will be able to create the intersection between all the missing photos automatically. This is mind-bending hehe.

[@captainofthewhitetower]

Is there a soyrce code or tutorial for this?

[@AndersonMancini]

Hey there. You can learn more about this on PolyCam tutorials. It is a really simple technique. Just convert the video to 3DGS, clean it up using the tool I'm showing here, and then load it on threejs using drei Splat component.

[@captainofthewhitetower]

Hey why it is blurry? Also how did you add the floor highlights into the building? Thanks in advance@@AndersonMancini

[@AndersonMancini]

@@captainofthewhitetower I created each floor as a mesh on blender 3d and exported as hidden meshes. Then I used a threejs raycastwr to detect the hover on those hidden meshes and I change the visibility/opacity

[@gaussiansplatsss]

What is your Camera Sir?

[@AndersonMancini]

Hey. This is a video that I grabbed from KZbin. I have no idea what camera they used to record this hehe.

[@patriciocalvelo1839]

Hi Anderson! I sent you a mail on Gmail but I didn't get back from you, Is there a way the we can communicate some how? Great work!

[@AndersonMancini]

Hey Patricio. I'm so sorry. I lost your message. I just found it now. I will answer it properly okay? See you!

[@patriciocalvelo1839]

@@AndersonManciniof course! take your time!

[@Nightcomer]

Do you think it is close to the production level anytime soon ( #gaussiansplatting #threejs)?

[@AndersonMancini]

If your target audience has a good device, it is usable already. But I think this will be better and more optimized in 3 or 6 months. For sure webGPU will boast this up

[@amirnadji5427]

Comments are not working? i send two comments and they were deleted

[@AndersonMancini]

Hey. They are working now. I can read you ☺️✌🏻

[@amirnadji5427]

Oh nice! I have a question please: i created a small project to test gaussian splatting, i used the luma Doc with react three fiber but i see that the final projet is 33 mo size. This IS too heavy no? And in the documentation they Always use a link to their database in the source attribute. Is it possible to use a local file? Thanks a lot

[@AndersonMancini]

@amirnadji5427 yes. In thr documentation they say it can be a local file. But I never tried with a local file before. I tried to clean the splat scene and then load the cleaned mesh using lumaAI but it was not working. So, in this demo, im using Vanilla Drei splat loader. It works similarly but you can clean the scene and used this cleaned version which is smaller in filesize. All the best

[@xaviere.3299]

Real Estate is a commercial venue. Gaussian Splatting can't be used commercially. Making business of it is against its license, you can't sell it as it is.

[@AndersonMancini]

No one is selling anything. These are just ideas on how this can be used. And I'm sure this will change soon and GS will be everywhere.

[@pieterboots8566]

It's just 3d transparent gausians. Why can't you make money with that.

[@jimgunzel7450]

eh yes it is? perhaps not with certain github projects but cloud render ones like luma ai can be used commercially