Loading video...

Video Failed to Load

Go Home

This is an opensource fully procedural building generator running using Three.js . Building customization, (GPU instancing). Real-time snow, rain & wet surfaces. I reverse-engineered a Blender geometry nodes graph to TypeScript. Source code :

88,997 views • 3 months ago •via X (Twitter)

73 Comments

Gregor's profile picture
Gregor3 months ago

@threejs the coordinate flip from blender's Z-up to three.js Y-up is the part that kills you quietly. spent a day chasing rotations that looked right on one axis and broken on every other before i caught it

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Totally relatable, May all the softwares be united in terms of axis 🤣

Ryan Fitzpatrick's profile picture
Ryan Fitzpatrick3 months ago

@threejs you the boss! I was just in need of some buildings for the race track, these are perfect for that mid density residential/commercial parts of town I'm missing. Going to try and populate these along a spline road. Will post results back!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks man ! if the performance drops try to look for modular assets for less complex building and u can use the project as a reference, if people likes it i might release a good low poly with some realisitc PBR materials for improved performance

Ryan Fitzpatrick's profile picture
Ryan Fitzpatrick3 months ago

@threejs for sure will need some LOD, with mrdoob's downtown TSL buildings I managed to build some simple LOD's then load in the TSL building for higher detail.

robot 2.0's profile picture
robot 2.03 months ago

@threejs all i'm asking for is sunglasses achref

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs

Nicolas Norton's profile picture
Nicolas Norton3 months ago

@threejs This is really good work.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Much appreciated 🙌

taigajim's profile picture
taigajim3 months ago

@threejs oh man love this. used to do procedural buildings in 3ds max, but this is so much faster

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs much appreciated !

Vadim B's profile picture
Vadim B3 months ago

@threejs Love this

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Glad you loved it ✨

Vadim B's profile picture
Vadim B3 months ago

@threejs building my own next! did some prototyping in houdini but speed of cooking all nodes kinda kills all the fun in this process. I want realtime

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Well, I gotta be jealous, i always wanted to learn houdini, it's quite crazy the complexity that it can handle. for real-time approaches unreal & threejs are the best picks 🙌

SinfulMeatStick.eth's profile picture
SinfulMeatStick.eth3 months ago

@josh_garrett_kc @threejs Mew @brandon_manus @DOCTORdrippNFT

Chetan Khulage's profile picture
Chetan Khulage3 months ago

@threejs wow this is something interesting

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Glad you like it !

Meta__Architect's profile picture
Meta__Architect3 months ago

@threejs Freaking insane!!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you 🙌

Manuel Arias's profile picture
Manuel Arias3 months ago

@threejs Never done this before... how it works on mobile? The more I see projects like this I just find out i need to study more... f 🫩

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks for your comment, i’m not sure how it performs on mobile cause mainly i done it for pc but i think with some geometry optimizations u can get one running smoothly on it

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

@threejs Reverse engineering a whole Blender geometry graph into TypeScript is a serious amount of work.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks! I really appreciate it

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

@threejs That reverse engineering skill alone is worth studying honestly.

dewmap's profile picture
dewmap3 months ago

@mrdoob @threejs

Vipin Pathak's profile picture
Vipin Pathak3 months ago

@threejs 🫡🫡🫡

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs

Edwin Meza 🎬's profile picture
Edwin Meza 🎬3 months ago

@threejs God Deam this is so fire 🔥 I’m definitely using this

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs glad u liked it ✨

Ozony.Tech's profile picture
Ozony.Tech3 months ago

@threejs This is pretty cool! I will try it out asap!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks !

Alex Coulombe's profile picture
Alex Coulombe3 months ago

@threejs Rad

KingDankKush's profile picture
KingDankKush3 months ago

@threejs Nice!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks ✨

GreenRocket.app's profile picture
GreenRocket.app3 months ago

@threejs added this to Fossy

Ebenezer's profile picture
Ebenezer3 months ago

@threejs Super cool!🙌🔥

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you, i really appreciate it ✨

lalo 🐧's profile picture
lalo 🐧3 months ago

@threejs with the github?!? you're too kind !!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you ! 🙌

Rushabh ⚡️'s profile picture
Rushabh ⚡️3 months ago

@threejs Played around 20 minutes with it. Loved it :)

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Glad that you liked this project !

Jon's profile picture
Jon3 months ago

@threejs Thank you, you will be credited with this great work!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you ! much appreciated 🙌

Sas van der Westhuizen's profile picture
Sas van der Westhuizen3 months ago

@threejs Any chance you can stand this up as a GitHub page that can be viewed in-browser?

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs well, i didn’t want to host it cause i was concerned that i might get a huge bill cause the source files are quite heavy 🤣 i never done github hosting, i always use aws or cloud flare, ill check it out and see if its the same

Sas van der Westhuizen's profile picture
Sas van der Westhuizen3 months ago

@threejs If it's all just static content you should be good 💪🏻

lost in latency's profile picture
lost in latency3 months ago

@threejs incredible work Chrio, i will test this!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@lostinlatencyX @threejs Thank you, i really appreciate it ✨

Fred Moon 🚀's profile picture
Fred Moon 🚀3 months ago

@threejs thanks for sharing, I absolutely love this! i took liberty to compile it and serve it online for anyone who wants to try it, hope it's ok!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Glad that you liked this project ✨

GameGen's profile picture
GameGen3 months ago

@threejs Reverse-engineering a Blender geometry nodes graph into TypeScript is wild, and the results speak for themselves. That Hong Kong tenement look with the AC units and clutter is so convincing, and the wet-surface pass really sells the atmosphere. Huge respect for open-sourcing it.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you so much ! i really appreciate it

Religion is poison's profile picture
Religion is poison3 months ago

@threejs Nice job. This is the future.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks ✨

Barbakadze's profile picture
Barbakadze3 months ago

@mrdoob @threejs Eastern European building generator.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@mrdoob @threejs Glad you liked it !

Sebastian Buzdugan's profile picture
Sebastian Buzdugan3 months ago

@threejs where ports break is seed stability, does threejs match blender across builds

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs seeds won't match the same seds in blender cause the nodes are translated to typescript and the randomization alghorithm is different

Jim Whitehead's profile picture
Jim Whitehead3 months ago

@threejs Super impressive!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Glad you liked it !✨

Nawwara's profile picture
Nawwara3 months ago

@threejs Yoooo this is crazyyyy

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you !

Day Day Up's profile picture
Day Day Up3 months ago

@threejs This is awesome, thanks for open-sourcing it!

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs glad you loved it 🙌

晚晚's profile picture
晚晚3 months ago

@threejs 把几何节点翻成 TS 这步挺狠的

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thank you 🙌

Bram van Es's profile picture
Bram van Es3 months ago

@threejs I see all of these efforts converging into new levels for counterstrike go. One day.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Thanks ! much appreciated

Marcin Ignac's profile picture
Marcin Ignac3 months ago

@threejs How did you go about translating more advanced geometry nodes concepts like subgraphs and context providers (where eg position node pulls from currently processed mesh)? Or was source project simpler data flow graphs?

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs I actually sidestepped building a general field evaluator. Instead of emulating Geometry Nodes' lazy field/context system, I flattened the graph into eager TypeScript and proved it matched Blender numerically.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs The tricky part wasn't fields themselves it was preserving Blender's re-indexing after every Separate/Join, since that's where eager implementations silently diverge. This graph was also fairly feed-forward (no repeat/simulation zones), so that approach was viable.

Chiro Visuals's profile picture
Chiro Visuals3 months ago

@threejs Context providers (like Position/Index) just became values from the current array/loop index once the domain was fixed.

Related Videos