Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I built a new opensource optimized procedural building using Three.js, this one can be used in games. This project uses GPU instancing. and contains Real-time snow, rain & wet surfaces. Also, it contains a pipeline that uses python if anyone wants to modify the original blender file to create... show more

Chiro Visuals

2,346 subscribers

12,609 views • 2 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Comments

KingDankKush2 months ago

@threejs Wow! Cool project. Thanks for sharing the skill.

Chiro Visuals2 months ago

@threejs Thank you for checking it 🙌

f14andhec2 months ago

@threejs first bookcases now buildings... spaceships next?

Chiro Visuals2 months ago

@threejs great idea though 🙌

Aggroed Lighthacker- Peace, Prosperity, & Freedom2 months ago

@threejs that's great. I think the ground is prety enough to separate out as it's own little system and make nice tileset for games to use

Chiro Visuals2 months ago

@threejs I think so, thank you 🙌

Mikhail Larionov2 months ago

@threejs Super awesome! And thanks for sharing the source code, let me play with it...

Chiro Visuals2 months ago

@threejs You are welcome 🙌

Fazo2 months ago

@threejs Good work "Also, it contains a pipeline that uses python if anyone wants to modify the original blender file to create variations" Does it mean that procedrual part made using geometry nodes and than converted to three js?

Chiro Visuals2 months ago

@threejs Thanks and yep that’s right 🙌

Related Videos

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 :

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 :

Chiro Visuals

88,997 views • 3 months ago

I built an opensource fully procedural ivy & fig tree generator🌿that runs in your browser using Three.js . Every vine, leaf, and branch is generated in real time, with no pre-made models. WebGPU renderer, GPU instancing & BVH-accelerated raycasting ... Source code:

I built an opensource fully procedural ivy & fig tree generator🌿that runs in your browser using Three.js . Every vine, leaf, and branch is generated in real time, with no pre-made models. WebGPU renderer, GPU instancing & BVH-accelerated raycasting ... Source code:

Chiro Visuals

18,405 views • 3 months ago

I built a new open-source ocean using Three.js, i wanted to give it a little bit more time than the initial version that i published. - Pure WebGL2 GLSL, Fully procedural with clouds and light control. You can find all of the technical details in the repo Source code :

I built a new open-source ocean using Three.js, i wanted to give it a little bit more time than the initial version that i published. - Pure WebGL2 GLSL, Fully procedural with clouds and light control. You can find all of the technical details in the repo Source code :

Chiro Visuals

26,745 views • 2 months ago

This is my new opensource project with WEBGL2 & Three.js , my goal was to build a third person template of a samurai, so I built 3 techniques ( using the katana ) & 3 magic abilities which are fully procedural. katana fire made of a real raymarched volume, ragdoll with no physics engine, Skeleton was done in mixamo so that it's easy to swap character & a character editor. A lot of manual work done & I used Opus 5 Anthropic help to speed up my vision. Live link: Source code:

This is my new opensource project with WEBGL2 & Three.js , my goal was to build a third person template of a samurai, so I built 3 techniques ( using the katana ) & 3 magic abilities which are fully procedural. katana fire made of a real raymarched volume, ragdoll with no physics engine, Skeleton was done in mixamo so that it's easy to swap character & a character editor. A lot of manual work done & I used Opus 5 Anthropic help to speed up my vision. Live link: Source code:

Chiro Visuals

47,160 views • 1 month ago

I've built a new opensource Third-Person Soldier Stage in the browser, built with Three.js. 4 techniques, 4 abilities, 2 boons, endless procedural night terrain, ragdoll deaths with no physics engine, katana & gun play. All GLSL. No engine, no physics lib, no asset pipeline. This VFX showcase is an extension of my previous projects to showcase customizable VFX that can be a easily implemented in your projects. Source code: Live link:

I've built a new opensource Third-Person Soldier Stage in the browser, built with Three.js. 4 techniques, 4 abilities, 2 boons, endless procedural night terrain, ragdoll deaths with no physics engine, katana & gun play. All GLSL. No engine, no physics lib, no asset pipeline. This VFX showcase is an extension of my previous projects to showcase customizable VFX that can be a easily implemented in your projects. Source code: Live link:

Chiro Visuals

24,457 views • 1 month ago

I just made a little app where you can upload a music file; and then it uses AI to automagically transcribe the chord progression and then let you play along in real-time. great for learning and practicing new songs! at me if you want to use this

I just made a little app where you can upload a music file; and then it uses AI to automagically transcribe the chord progression and then let you play along in real-time. great for learning and practicing new songs! at me if you want to use this

Jake Dahn

218,830 views • 2 years ago

🚨 Someone just built a Claude Code skill that clones any website perfectly in one prompt. It uses the built-in Chrome MCP to go straight to the source. It pulls the exact fonts, colors, and layout directly from the browser. 100% Open Source.

🚨 Someone just built a Claude Code skill that clones any website perfectly in one prompt. It uses the built-in Chrome MCP to go straight to the source. It pulls the exact fonts, colors, and layout directly from the browser. 100% Open Source.

Oliver Prompts

474,919 views • 6 months ago

img2threejs 1.5.1 is out 🚀 Checkout: This release introduces a new approach to image → 3D → Three.js. Image → Tripo → img2threejs → reconstructed geometry → Three.js Instead of using the generated 3D model as the final asset, img2threejs uses it as a reference to rebuild the character into a representation that can be generated and rendered directly in Three.js. No Blender workflow, and no GLB required as the final output. The animation in the demo is still a bit rough because this release is focused on reconstruction, not animation. I’ll be improving that in the next release. Still experimental, but this is a big step toward where I want img2threejs to go.

img2threejs 1.5.1 is out 🚀 Checkout: This release introduces a new approach to image → 3D → Three.js. Image → Tripo → img2threejs → reconstructed geometry → Three.js Instead of using the generated 3D model as the final asset, img2threejs uses it as a reference to rebuild the character into a representation that can be generated and rendered directly in Three.js. No Blender workflow, and no GLB required as the final output. The animation in the demo is still a bit rough because this release is focused on reconstruction, not animation. I’ll be improving that in the next release. Still experimental, but this is a big step toward where I want img2threejs to go.

Nick

117,760 views • 1 month ago

I asked Fable to create a Mars city in Three.js, after 6hrs and dozens of subagents in one shot, this is the result (100% procedural), using my Three.js Awesome Graphics Agent Skills Still a lot of details i need to polish but this was beyond my expectation🤯

I asked Fable to create a Mars city in Three.js, after 6hrs and dozens of subagents in one shot, this is the result (100% procedural), using my Three.js Awesome Graphics Agent Skills Still a lot of details i need to polish but this was beyond my expectation🤯

Scott

43,626 views • 2 months ago

GPT 6 Astra is really something else when it comes to building games in 3D. It built out the rest of the world using Blender. It also rigged, animated and integrated a playable character. Running smooth entirely in browser - including reflections + rain. Using Wasm + WebGPU

GPT 6 Astra is really something else when it comes to building games in 3D. It built out the rest of the world using Blender. It also rigged, animated and integrated a playable character. Running smooth entirely in browser - including reflections + rain. Using Wasm + WebGPU

Chong-U

15,110 views • 1 month ago

This JSON file will change how you write threads forever... I analyzed threads with millions of views and turned the winning patterns into a context file you can upload to Claude/GPT. This JSON context file contains hook templates, thread structures, and psychological triggers you upload to Claude/GPT + source docs with original viral tweets. Follow + comment "FILE" and I'll DM it.

This JSON file will change how you write threads forever... I analyzed threads with millions of views and turned the winning patterns into a context file you can upload to Claude/GPT. This JSON context file contains hook templates, thread structures, and psychological triggers you upload to Claude/GPT + source docs with original viral tweets. Follow + comment "FILE" and I'll DM it.

Tom

54,430 views • 1 year ago

Opus 5 built this flight simulator in one go. Using only Three.js. The trick to getting this quality and higher (if you prompt harder) seems to be in building a good judge-executor harness. The judge keeps the loop running to improve output quality.

Opus 5 built this flight simulator in one go. Using only Three.js. The trick to getting this quality and higher (if you prompt harder) seems to be in building a good judge-executor harness. The judge keeps the loop running to improve output quality.

elvis

14,333 views • 2 months ago

I wanted to share something I've been working towards since forever. I've finally built out a full slam + hand reconstruction pipeline that works IN REAL TIME at 30fps on a single rockchip 3588. All streaming directly to Rerun from a BitRobot 🦾 robocap. This is similar to what a Quest3 or Project Aria 2 provides, but opensource 🙂 I'm so excited I finally don't have to really on closed source software like the meta quest or others. I finally have a realtime performant pipeline that works on an edge computer, but importantly can also scale to a high performance one when needed.

I wanted to share something I've been working towards since forever. I've finally built out a full slam + hand reconstruction pipeline that works IN REAL TIME at 30fps on a single rockchip 3588. All streaming directly to Rerun from a BitRobot 🦾 robocap. This is similar to what a Quest3 or Project Aria 2 provides, but opensource 🙂 I'm so excited I finally don't have to really on closed source software like the meta quest or others. I finally have a realtime performant pipeline that works on an edge computer, but importantly can also scale to a high performance one when needed.

Pablo Vela

13,260 views • 9 days ago

Weekend project: A reusable deployment pipeline defined in C# that can take any aspire project and deploy it to a VM with ssh and docker. - Use of C# >>>> Shell scripts interleaved in YAML 🤮. - The pipeline code that runs over a model. This same code can work for any aspire app without changes. It's a dynamic pipeline template. - It can run locally or in the CI - This was built on top of upcoming APIs in Aspire 9.4 (you can build your own pipeline and deploy anywhere too!) #dotnet #aspire

Weekend project: A reusable deployment pipeline defined in C# that can take any aspire project and deploy it to a VM with ssh and docker. - Use of C# >>>> Shell scripts interleaved in YAML 🤮. - The pipeline code that runs over a model. This same code can work for any aspire app without changes. It's a dynamic pipeline template. - It can run locally or in the CI - This was built on top of upcoming APIs in Aspire 9.4 (you can build your own pipeline and deploy anywhere too!) #dotnet #aspire

David Fowler

23,725 views • 1 year ago

Built this last night....... Claude Code Matrix Monitor hooks into Claude Code's native event system to visualize every tool call in real-time. All of Claude's file reads, searches, edits, and bash commands stream via WebSocket to a cyberpunk dashboard that renders radar sweeps, pulse rings, code rain with actual code edits / diffs, and glitch effects. It's project-local, non-invasive, and toggles on/off with one file. TLDR: you can watch the AI as it works....

Built this last night....... Claude Code Matrix Monitor hooks into Claude Code's native event system to visualize every tool call in real-time. All of Claude's file reads, searches, edits, and bash commands stream via WebSocket to a cyberpunk dashboard that renders radar sweeps, pulse rings, code rain with actual code edits / diffs, and glitch effects. It's project-local, non-invasive, and toggles on/off with one file. TLDR: you can watch the AI as it works....

Benjamin De Kraker

38,552 views • 9 months ago

I think I've written the world's fastest Blender exporter. It exports full levels in 9 milliseconds. Check out this video where I show live editing of levels from blender, and it updates instantly in the game. For some context: Okay, since the beginning of development on this game project, I knew I didn't want to write a custom level editor for it and rather spend my time programming the game. I decided to use blender as the level editor, and export directly from blender to my game engine's file format. Blender only lets you write add-ons in Python, which is not just incredibly slow but also a terrible platform for this kind of systems programming work. So, after having a Python exporter for the longest time, I decided enough was enough, and I programmed this exporter in C. Blender doesn't expose any C API or interface. So my only option was to download Blender's source code and insert my code directly into Blender. And that's what I did :) So this new C exporter not only is orders of magnitude faster than the python version, but also is way more robust. And because I'm in C land, my hands are much freer to do things. There are two elements of secret sauce that make this exporter run so fast: - A custom memory arena implementation. - Lockless multithreading.

I think I've written the world's fastest Blender exporter. It exports full levels in 9 milliseconds. Check out this video where I show live editing of levels from blender, and it updates instantly in the game. For some context: Okay, since the beginning of development on this game project, I knew I didn't want to write a custom level editor for it and rather spend my time programming the game. I decided to use blender as the level editor, and export directly from blender to my game engine's file format. Blender only lets you write add-ons in Python, which is not just incredibly slow but also a terrible platform for this kind of systems programming work. So, after having a Python exporter for the longest time, I decided enough was enough, and I programmed this exporter in C. Blender doesn't expose any C API or interface. So my only option was to download Blender's source code and insert my code directly into Blender. And that's what I did :) So this new C exporter not only is orders of magnitude faster than the python version, but also is way more robust. And because I'm in C land, my hands are much freer to do things. There are two elements of secret sauce that make this exporter run so fast: - A custom memory arena implementation. - Lockless multithreading.

Taha Torabpour

205,997 views • 1 year ago

planking for penguins 🐧 a real-time exercise tracking game, coded with Grok 4 (xAI) this uses mediapipe AI vision to detect when the player has proper plank form (knees-hips-shoulders in a horizontal line, elbows low) also using Three.js for visuals and tonejs for audio this all runs in real-time in the browser, using a regular laptop + webcam 🔗 live demo below

planking for penguins 🐧 a real-time exercise tracking game, coded with Grok 4 (xAI) this uses mediapipe AI vision to detect when the player has proper plank form (knees-hips-shoulders in a horizontal line, elbows low) also using Three.js for visuals and tonejs for audio this all runs in real-time in the browser, using a regular laptop + webcam 🔗 live demo below

AA

244,071 views • 1 year ago

I built a simple voice assistant in 70 lines of Python code. It uses: • LiveKit - The voice agent • AssemblyAI - To turn your voice into text • OpenAI - The brain of the agent, and to turn text into audio There's something really cool about this:

I built a simple voice assistant in 70 lines of Python code. It uses: • LiveKit - The voice agent • AssemblyAI - To turn your voice into text • OpenAI - The brain of the agent, and to turn text into audio There's something really cool about this:

Santiago

34,718 views • 1 year ago

Here is a step-by-step introduction to building a workflow with a custom AI agent that uses MCP. I explain every component in the video: 1. Building the MCP server 2. Building the agent and an MCP client 3. Building a workflow that uses the agent The goal is simple: Generate a dialogue between two people and make one yell and the other answer with sarcasm. Kestra is sponsoring this video. They are an open-source orchestration platform (repo link below), and I used them to build the workflow that connects every component.

Here is a step-by-step introduction to building a workflow with a custom AI agent that uses MCP. I explain every component in the video: 1. Building the MCP server 2. Building the agent and an MCP client 3. Building a workflow that uses the agent The goal is simple: Generate a dialogue between two people and make one yell and the other answer with sarcasm. Kestra is sponsoring this video. They are an open-source orchestration platform (repo link below), and I used them to build the workflow that connects every component.

Santiago

51,527 views • 1 year ago