yermolim / glbim

Three.js-based GLB model viewer written in TypeScript

GLBIM 🏗️

Three.js-based GLB/IFC model viewer

Created for personal use in a project focused on BIM, so use cases may be limited, but maybe will still be helpful to someone. The main goal was to make it possible to open dozens of large industrial building models with thousands of elements and millions of polygons while keeping an optimal render performance. Optimized mesh merging to reduce render calls, GPU picking, using only vertex colors, etc. were the ways to achieve it. Target models are static, without the need to take into account their internal structure, textures are ignored.

Main features:

• loading multiple GLB(with draco compression support) and IFC models
• huge performance optimization by merging all scene meshes into single mesh (or one mesh per loaded model optionally) with vertex colors (with alpha value supported) to reduce frame time by minimizing render calls
• additional render speed optimization while moving/rotating camera by using simplified background scene
• ability to interact with models (select/isolate/hide/color model meshes) from code by mesh ids*
• mouse and touch support (pointer events used) with numerous actions available: orbit navigation (zoom/pan/rotate), single and multiple manual selections of model meshes (fast GPU picking with background scene is used), area mesh selection, isolation of selected meshes, highlighting model meshes on hover
• detailed feedback about current viewer state by notifying of all changes in the opened scene using RxJS observables
• customization with options provided, most of which are available for modification at runtime
• custom axes helper with camera rotation on axis label click
• HUD scene for showing custom 2d infographics on top of model view
• vertex selection mode with point snap using raycaster and barycentric coordinates
• distance measure mode (extremely useful for BIM)
• auto-resized canvas with transparent background (so outer container background used, easy to switch colors)

Outside of scope:

The support of these possible features are outside of the current module scope and their implementation is implausible unless there will be a huge amount of requests for additional features, which I think is extremely unrealistic.

• textures
• animation
• model editing

External dependencies:

• Three.js
• RxJS
• IFC.js web-api

*Mesh ids

A combination of model id and mesh 'name' field is used as mesh id (${modelId}|${meshName}). This id is used for all available manipulations with a mesh (selection/isolation/hiding/coloring etc.). If mesh id is not unique, any manipulation will affect all meshes with this id.

If I find time for this, or if there are any requests, I will add more details to the description.

glbim's Issues

IFC.js integration

Hola!

This project is really cool. We are struggling with optimization in IFC.js, and in the future this kind of experiments might be very useful. Just checking in to say hello and let you know that if you ever want to integrate this with IFC.js ecosystem, build other things with IFC.js or just chat, you can count on us. 😉

Sorry for opening the issue, but we didn't know how to contact you.

Cheers!

Model textures not supported

Hi @yermolim, your viewer looks great, but i have found that glb model textures are not rendered. Is it possible to update viewer to support it?