achrefelouafi/basicproceduralbuilding — explained in plain English
Analysis updated 2026-05-18
Prototype a small procedural building for a browser based 3D scene.
Learn how to port a Blender geometry nodes graph into TypeScript code.
Add snow or rain weather effects to a Three.js scene without extra geometry.
Study how instanced meshes can render repeated building parts efficiently.
| achrefelouafi/basicproceduralbuilding | acoyfellow/tuiport | dabao-yi/model-flux | |
|---|---|---|---|
| Stars | 16 | 16 | 16 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | moderate | moderate | moderate |
| Complexity | 3/5 | 4/5 | 3/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Editing the 3D source requires Blender 4.2 or newer plus Windows specific command line paths shown in the README.
This project is a web based building configurator built with Three.js. It lets you design a small building in the browser by adjusting sliders for width, length, and height, plus a window seed number and a ground floor style. The interesting part is where the logic came from: the original design was made in Blender using a geometry nodes graph, and this project is a faithful TypeScript port of that same graph. The author checked the port instance by instance against Blender's own evaluated output, so the positions, rotations, and window choices match exactly for a given seed. Each wall of the building is treated as a grid of cells. The top row becomes the roof edge, the last column becomes a corner pillar, the ground row alternates between doors and shop windows, and the rest of the cells get one of two window styles chosen by the same random number method Blender uses internally. The building sits on a small floating platform with grass, soil, a plaza area, and simple low poly trees, bushes, and lamps, all generated in code rather than loaded from image textures. There are lighting presets for golden hour, day, and night, each changing the sky, fog, lighting rig, clouds, and how the windows glow after dark. A post processing stack adds bloom, tone mapping, vignette, grain, and color grading. The app also includes optional snow and rain effects with many adjustable settings, such as snowfall density and accumulation, or rain streaks and surface wetness, all applied directly to the building's materials without adding extra geometry. For people who want to edit the original 3D model, the README includes Blender 4.2 and newer command line steps to re export the building parts, dump the node graph to JSON, and generate reference data used to verify the web version still matches Blender after any changes. To run it locally you install dependencies and start the dev server with npm. This is a niche, technically focused project aimed at developers interested in procedural generation or porting Blender logic to the web, rather than a general purpose tool.
A web based 3D building designer built with Three.js, ported from a Blender geometry nodes graph so it matches Blender's output exactly.
Mainly TypeScript. The stack also includes TypeScript, Three.js, npm.
The README does not state a license, so usage rights are unclear.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.