3D Platform for Scaffolding

Scaffolding Graphics: Building Interactive and High-Performance 3D Applications

The development of high-performance 3D applications demands the seamless integration of intuitive user interfaces, efficient rendering techniques, and scalable resource management. This project introduces a next-generation scaffolding graphics application built for Stillastorget.no, a company operating in the Norway/Spain region specializing in construction technology.

By leveraging cutting-edge web technologies such as WebGPU, instanced mesh rendering, and ifc.js, this application enables users to define building dimensions, extrude structures, generate scaffolding, and create an automated Bill of Materials (BOM) with real-time visualization.

Core Features

1. Interactive Building Design

• Users can draw, define, and modify building structures by setting measurements and extruding shapes.
• Measurement tools allow precise input of dimensions (width, height, depth) for structures.
• Supports real-time updates and modifications with intuitive UI controls.

2. Automated Scaffolding Generation

• Based on defined building dimensions, scaffolding structures are automatically generated.
• Users can select specific building areas for scaffolding placement.
• Customization options allow users to modify scaffold material types, dimensions, and structural configurations.

3. Bill of Materials (BOM) Generation

• A comprehensive BOM quantifies all scaffold elements used in the project.
• Users can export the BOM in multiple formats (CSV, PDF) for further analysis and cost estimation.

4. Real-Time Editing and Visualization

• Drag-and-drop interface allows seamless manipulation of scaffold components.
• Real-time updates ensure immediate feedback on modifications.
• Advanced rendering optimizations improve performance and interactivity.

Technical Implementation

WebGPU as the Rendering Backend

WebGPU provides a robust rendering pipeline, replacing WebGL for improved efficiency and performance. The key benefits include:

Instanced Mesh Rendering

• Uses GPU instancing to efficiently render thousands of scaffolding components with minimal draw calls.
• Reduces CPU-GPU communication overhead, ensuring smooth real-time visualization.

Parallel Processing

• WebGPU’s compute shaders handle geometry updates, physics simulations, and lighting calculations in parallel.
• Enables real-time interaction with complex scaffolding structures without performance bottlenecks.

Memory Management Optimizations

• Frustum Culling: Renders only the visible portions of the scaffolding within the camera’s view, improving FPS.
• Level of Detail (LOD): Dynamically adjusts the detail level of scaffolds based on the camera distance.
• Buffer Updates: Ensures real-time scaffold transformations without reloading entire meshes.

Integration with ifc.js for BIM Models

Ifc.js, an open-source JavaScript library, enables Building Information Modeling (BIM) integration for accurate construction planning.

WebAssembly (WASM) Backend

• Delivers high-performance parsing and rendering of Industry Foundation Classes (IFC) files directly in the browser.
• Avoids heavy processing on the CPU by offloading computations to WebAssembly, ensuring faster load times.

Component Extraction

• Allows extraction of specific building elements (walls, floors, roofs) to define attachment points for scaffolding.
• Enables seamless integration with architectural design files and construction planning tools.

Custom Materials & Textures

• Differentiate scaffolding from the main building structure using dynamically assigned materials and textures.
• Supports material customization based on project requirements.

Development and Technology Stack

The application was built using a modern web-based stack:

Technology	Purpose
WebGPU	High-performance real-time rendering
ifc.js	BIM model integration and IFC file parsing
WebAssembly (WASM)	Optimized computation for IFC file handling
Three.js	3D scene management and geometry rendering
Vue.js	UI framework for interactive user controls
TypeScript	Type-safe application logic

Challenges and Optimizations

Performance Bottlenecks

• Solution: Used instanced rendering and LOD techniques to optimize large-scale scaffolding visualization.

BIM Model Complexity

• Solution: Implemented custom IFC parsing strategies to extract only relevant components for scaffolding attachment.

Real-Time UI Responsiveness

• Solution: Leveraged React’s state management and GPU-driven updates for a smooth user experience.

Business Impact and Future Enhancements

Impact on Stillastorget.no

• Efficiency Gains: Automated scaffolding planning reduces manual work and improves accuracy.
• Cost Savings: Optimized material estimation through BOM generation minimizes waste.
• Market Differentiation: Cutting-edge technology positions Stillastorget.no as an innovator in construction technology.

Planned Enhancements

• AI-driven Scaffold Placement: Implement reinforcement learning to optimize scaffold positioning.
• Augmented Reality (AR) Support: Enable scaffold visualization through AR for on-site construction planning.
• Cloud Integration: Store and retrieve scaffold designs via cloud-based project management platforms.

Conclusion

This project demonstrates the power of modern web technologies in revolutionizing scaffolding graphics for construction. By combining WebGPU, ifc.js, and real-time optimizations, we have built a scalable and efficient solution for Stillastorget.no. Future improvements will continue to enhance its capabilities, ensuring it remains at the forefront of construction visualization technology.

live demo

---