Wallhammer Web: building destruction in my TypeScript and WebGL2 engine
I have the first building destruction tests running in Wallhammer Web, my browser engine written in TypeScript and plain WebGL2. Click a wall and you can open a hole into the building. Remove enough support and the floors, walls and roof above it come down. The pieces keep the geometry of the building they came from, including windows and roof sections. Here is the current result. This is a raw…
The report describes the development of a browser engine called Wallhammer Web, written in TypeScript and using WebGL2 for graphics generation. Users can click on walls to create holes and cause the building to collapse, with pieces retaining the geometry of the original structure. The engine uses strict TypeScript and WebGL2 for graphics, focusing on code-based generation rather than loading image assets.
It includes separate modules for architecture, rendering, vegetation, and actors, with a modular design that separates the generation of buildings from the engine's rendering and simulation infrastructure. The simulation can run in Node without a canvas, allowing for structural analysis independent of rendering. The engine manages damage states, such as intact, cracked, breached, or gone, and uses a structural heuristic to determine which parts need to be supported to prevent collapse.
The destruction process generates a timeline for the collapse, which can be saved and used to render the sequence of events. Current challenges include optimizing collision detection between falling pieces and standing parts, as well as improving interior rendering and layout when large sections of a building disappear.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
