Loading video...

Video Failed to Load

Go Home

Live link: Built to showcase what's possible with real-time WebGPU rendering using #threejs. Just a 6.3 MB download, yet the lighting looks baked—until you grab the sun and watch everything update in real time. I hope you like it 🤗

129,775 views • 3 months ago •via X (Twitter)

72 Comments

Rugova's profile picture
Rugova3 months ago

Sorry I don't like it that much. Maybe thats not what you expected to hear by a total stranger. But let me tell you this, I just love it!

Anderson Mancini's profile picture
Anderson Mancini3 months ago

@aliuagon_ hahaha. Thanks, buddy haha. How is the performance for you? Acceptable?

Rugova's profile picture
Rugova3 months ago

on my m1 pro macbook its doing fine, although there is some glitter that reflects which is acceptable for me :) I have so many questions for this one, its the thing that I am actually building myself and you just made my head explode with inspiration!

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thank you so much. M1 was my target device so I'm happy that it is good on that hehe. I love inspirational projects. I plan to open source parts of this. Although it is mostly threejs default results. I'm just controlling the DPR during movement and higher resolutions. This is the key aspect here. This can't run at 2 or 3 dpr. There are just too many pixels and post processing passes to render. I'm using 9 post processing passes 😬

Shaban Iddrisu's profile picture
Shaban Iddrisu3 months ago

Awesome work. I noticed complete black screen on iPad with only the UI elements showing and not the experience itself. Have a look. 😊

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks. I tested it on my iPhone 13 and it is running at 60 FPS. I also tested in iPadOS simulator. Maybe it is something specific to iPad, which I can't test as I don't have one usable. Mine is iPad 1, first generation lol. But thanks anyway.

Kevin Rajan's profile picture
Kevin Rajan3 months ago

@threejs

Mukalazi Patrick's profile picture
Mukalazi Patrick3 months ago

Good work man . Loved the Vr Opera House seat Good Concept👊🏾.

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Ohh so kind of you. Thanks ☺️. Yeah, that prpj3ct is getting an updated version too hehe.

The Bugged Dev's profile picture
The Bugged Dev3 months ago

Wow, this is so freaking coool!!

MixRoute AI's profile picture
MixRoute AI3 months ago

Amazing app! Does the app need to know every coordinates of every location for the shadows to be precise?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks ;). Yes. I did not implement it in this version, but it can ;)

MixRoute AI's profile picture
MixRoute AI3 months ago

Great, thank you for letting us know!

Morgan Goins's profile picture
Morgan Goins3 months ago

Beautiful!

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks 🙏🏻☺️

CosmicEgg.Earth's profile picture
CosmicEgg.Earth3 months ago

What is in those 6.3MB? It's too small for even a meagre web-site?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

6.3mb is 3d models, threejs, @greensock, music, etc. Without music, the download transfer is 4.8mb actually.

Wen Cabrel's profile picture
Wen Cabrel3 months ago

Amazing work

Bilal Khan's profile picture
Bilal Khan3 months ago

I'm running on a M1 Mac. The performance doesn't seem to be stable even at 1080p. I switched to the lowest preset, but it still drops fps as soon as I move the camera. Apart from that, it looks really good for something running on web.

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks. Yeah, this is intentional. I drop the FPS to hold performance. So you see a quality switch indeed.

younglord's profile picture
younglord3 months ago

What did you use to generate the assets?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Blender, blood, sweat and tears haha. I'm kidding. This model was bought and customized by me.

Hans's profile picture
Hans3 months ago

🔥🔥🔥

Simone's profile picture
Simone3 months ago

Noice!

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks ☺️

HUOL's profile picture
HUOL3 months ago

Isn’t this the technology Alibaba used in its early days? At least six months ago.

Anderson Mancini's profile picture
Anderson Mancini3 months ago

I dont think so. I mean, this seems to be AI generated images. Mine is real time rendering using webgpu.

Swiftlined's profile picture
Swiftlined3 months ago

This is very … illuminating.

Franky Hung's profile picture
Franky Hung3 months ago

Want to build something like this one day 🔥🔥

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Awesome. You can start here

Franky Hung's profile picture
Franky Hung3 months ago

Thanks Anderson!

Stevo Perisic's profile picture
Stevo Perisic3 months ago

Very nice!

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks buddy. How is the performance for you?

Fanx Xai's profile picture
Fanx Xai3 months ago

Thank you. Nice 👍

Surya's profile picture
Surya3 months ago

Insane. Crazy to see what we can do / see with just a browser nowadays.

Tri Nguyen's profile picture
Tri Nguyen3 months ago

How can you do that bro?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Magic ehhe. I'm kidding eheh. That's basically threejs default with a good amount of time spent adjusting every parameter + 25 years of experience hehe.

Tri Nguyen's profile picture
Tri Nguyen3 months ago

I have to wait 5 more years experience to catch you :)

Anderson Mancini's profile picture
Anderson Mancini3 months ago

hehehe. You are doing great buddy. Just experiment as much as you can with crazy stuff. This is what I did. I just started early because I'm older hahah.

oscarmei's profile picture
oscarmei3 months ago

这也太棒了吧!

Anderson Mancini's profile picture
Anderson Mancini3 months ago

谢谢 😍

Eloka Agu's profile picture
Eloka Agu3 months ago

yee this slaps

Sub's profile picture
Sub3 months ago

Wow! I need something like this for I’ve shipped 3d virtual tours with gaussian splat method but this would take things to a whole new level!

non-vibe coder's profile picture
non-vibe coder3 months ago

Wait, so basically what’s it for again :)

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Just for fun hehe. But might become a product in the future hehe.

Carolina Aiazzi's profile picture
Carolina Aiazzi3 months ago

As usual, you never disappoint! This looks great😍😍

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thank you so so much ❤️. So kind of you 🤩

SplitDaWig 🪴's profile picture
SplitDaWig 🪴3 months ago

Incredible work man!

Junwei's profile picture
Junwei3 months ago

will open source?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

I already opened source parts of it. I will probably make it open source after the threejs conference. Let's see if it is not too complex. But most of it is threejs raw results that you can replicate using threejs examples page. Take a look:

Junwei's profile picture
Junwei3 months ago

thanku!I'm particularly interested in the day-night transition system.

Anderson Mancini's profile picture
Anderson Mancini3 months ago

There are some examples on that in threejs examples page as well. Thick the Probes webgpu example. It is basically a directional light being controlled by Javascript changing rotation and azimute.

Junwei's profile picture
Junwei3 months ago

thanks!

AI Mastery Guide's profile picture
AI Mastery Guide3 months ago

That lighting looks baked but it's all real time, wild

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thanks buddy ☺️🙏🏻

AI Mastery Guide's profile picture
AI Mastery Guide3 months ago

🫡👏

mcichael's profile picture
mcichael3 months ago

This looks incredible. How are you keeping the customizable colors so accurate while still making it look photorealistic? Since this is a home decor customizer, are the rendered colors the same as the original input colors?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Thwnks buddy. To be honest, I don't love the colors hehe. I had to make them super saturated to emphasize the GI aspect. But the SDGI is the key element for realism here. You can turn it off in the settings so you can see how it looks without it. Day and night difference.

mcichael's profile picture
mcichael3 months ago

I am working on a project where you can make customizers for 3D printed products. Incredibly hard to get true colors, photorealistic products and environments… I will definitely stay tuned into this, keep up the good work. Here’s a customizer on my shop

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Hunnn.. did you scale the screen during the loader? Maybe your resolution was too high? Thanks for sharing it. I will debug it ;)

𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮's profile picture
𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮3 months ago

No, it was all black screen then I wanted to see if there was any errors in the console. I do have a very old 2Gb Vram card so my limits may be lower of what you was expecting.

Anderson Mancini's profile picture
Anderson Mancini3 months ago

Hunn okay hehe. Yeah. Maybe this is just too heavy for that :). But thanks for sharing it anyway!

𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮's profile picture
𝗕𝗮𝗻𝗱𝗶𝗻𝗼𝗽𝗹𝗮3 months ago

out of curiosity, what setup do you have?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

I've been developing this one on both the MacBook Neo and the MacBook Air M5 baseline. But my day-to-day development is on a Mac Studio M2 with 64 GB of RAM and 38GPU cores. Not fair, hahah.

robot 2.0's profile picture
robot 2.03 months ago

what the

硅基练习生 JAXX's profile picture
硅基练习生 JAXX3 months ago

so cool

Michel van den Berg's profile picture
Michel van den Berg3 months ago

@Andersonmancini is this only usable for indoors? What about outdoors?

Anderson Mancini's profile picture
Anderson Mancini3 months ago

It works outdoors as well: You can see it in action here:

Elliot Otoijagha's profile picture
Elliot Otoijagha3 months ago

This looks so unreal 🤩

Anderson Mancini's profile picture
Anderson Mancini3 months ago

haha. Thanks heheh. Still far away from unreal, but close enough to ditch baked lights IF the performance can hold 😛. How is the performance for you, my friend?

Elliot Otoijagha's profile picture
Elliot Otoijagha3 months ago

Oh, I just watched the video, PC is quite busy at the moment 😅

Robert Owens's profile picture
Robert Owens3 months ago

Damn

Related Videos