KUIviewer

Overview

This is a browser-based 3D rendering engine for Building Information Modeling (BIM) and Industry Foundation Classes (IFC), built in strict TypeScript. Instead of relying on heavy desktop applications or monolithic viewer libraries, it delegates parsing to a background Web Worker and renders complex architectural geometry directly via WebGL. The core architecture is entirely framework-agnostic, handling the render loop, spatial state, and memory management independently, while exposing an optional React subpath for seamless integration.

The problem

Rendering industrial-scale BIM models in a browser inherently strains the main thread. Parsing IFC files synchronously freezes the user interface, and dealing with real-world spatial coordinates—often millions of units away from the origin—introduces precision loss and z-fighting in standard scenes. Furthermore, existing viewer libraries are often tightly coupled to specific UI frameworks. This project moves heavy parsing to compiled WASM workers, normalizes coordinates using Relative-to-Center (RTC) handling, and isolates the 3D state from the DOM so the consuming application dictates the interface.

What it does

• Asynchronous IFC parsing — execution is offloaded to a Web Worker running web-ifc, keeping the main thread responsive during heavy geometric computations.

• Multi-model federation — spatial tree generation, discipline detection, and per-model visibility toggles for managing multiple overlapping datasets.

• Accelerated selection — bounding volume hierarchy (BVH) algorithms applied to the fragment scene graph for instantaneous element picking, regardless of vertex count.

• State management as data — an independent vanilla state store paired with Zod-validated DTOs at the boundaries, fully isolating the 3D context from the UI.

• Contextual and BIM extensions — a named-toolbar registry, MapTile multi-source picker (ArcGIS, OSM), and isolated modules for clipping, measurement, and an AutoCAD-style command-line interface.

Architecture

React UI / Vanilla App ──Zustand / DTOs──► KUI-Viewer Core ──Scene Graph──► Three.js / WebGL
       ▲                                        │
       │  hooks / spatial tree                  │  WASM Worker
       └──── element payload, progress ◄────────┘  web-ifc (Parser)

A strict boundary separates the user interface from the rendering context. The core manages the Three.js scene, the render loop, and the fragment lifecycle. The parsing pipeline delegates binary reading to a background worker, returning structured data back to the main thread. State is centralized in vanilla stores, allowing optional React hooks to subscribe to scene changes without triggering wasteful re-renders on the canvas element itself.

Tech stack

TypeScript (strict) · Three.js (r170) · web-ifc (WASM) · @thatopen/fragments · three-mesh-bvh · Zustand v5 · Zod v4 · Tailwind CSS v4.

Outcome

A high-performance web viewer that treats heavy building data as modular, queryable fragments rather than static monolithic meshes. Parsing overhead is shifted away from the user interface, spatial accuracy is preserved for geolocated models, and rendering logic is strictly isolated from application state. 3D visualization becomes a stable, embeddable component rather than an unpredictable bottleneck.