You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.

Introduction

BIMer tools are intended to allow you to build an application that converts and displays 3D models on a web browser.

bimer flow chart

Use BIMer.IFC to convert the 3D model represented in the IFC file to a BIMer.Viewer readable format. Use BIMer.storage connectors to output JSON files structure to your application storage. Use BIMer.viewer to display the model derivative from the JSON files structure served over HTTP protocol from your application storage.

Integrate BIMer into a web application

Following is the overview of the steps that need to be completed to integrate BIMer into a web application.

  • Install and run BIMer.IFC to translate the IFC file to JSON format (see Installation and Integration section for details).
  • Save translated JSON files structure to the server that your web application can access.
  • Add BIMer.Viewer libraries to your web application (see Essentials section for details).
  • Input the translated JSON files structure as a parameter of the launch method of the ViewerLauncher class (see Load Model section for details).

Prepare the model for rendering in the BIMer.Viewer

bimer rendering flow

BIMer.IFC is a standalone Java application that translates the IFC file to JSON format. Once the file is translated, the output JSON files structure is saved using BIMer.Storage which is a set of connectors that allows you to use any kind of storage to store and retrieve your application data.

During the file conversion geometries, object properties and relations are extracted, so that the design data can be used in your app.

Display 3D models in a web browser

3d model displaying flow

BIMer.Viewer is a JavaScript library responsible for rendering JSON files prepared by BIMer.IFC on a web browser.

Customize the BIMer.viewer

The BIMer.Viewer libraries are delivered with a default UI allowing users to control and manipulate the displayed model. Developers can modify the viewer’s appearance and some of the behaviour.

BIMer.IFC

Developer’s Guide

Overview

The BIMer.IFC is a standalone Java application for translation of the IFC file format to a JSON files structure for rendering in the BIMer.viewer. During the model conversion BIMer.IFC extracts valuable metadata that can be integrated into your app, like object hierarchy trees and object properties.

Installation and Integration

As a standalone Java application BIMer.IFC needs to be installed on your server to perform the conversion of the input IFC file to the JSON files structure that can be consumed and properly displayed by the JavaScript library BIMer.viewer.

BIMer.IFC requires Java 8 and internet connection to work. At the initial launch BIMer.IFC will ask for permission to download and install a required module, it is a library with data models prepared by Dynamic Solutions - i.e. pl.ds bimer-ifc-data-model 1.0.0
All downloaded dependencies will be located in the same location as the JAR file and will be used for the next launches of the BIMer.IFC.

To perform the installation of BIMer.IFC without a prompt for permission use the following optional JAVA parameter:

-DALLOW_BIM_SERVER_INSTALLATION=true

Use the following parameterized command to run the application:

java -jar fileName.jar URI

where fileName stands for the name of the delivered jar file, which unless changed, will be bimer-ifc-launcher-version, where version stands for the current tool version.

Parameter:

Name Description
URI An absolute URI of the IFC file; supported schemes are file, http and https
Output folder name The name of the folder is the same as the name of the input IFC file without the file format extension
Output folder location The location of the folder depends on the location of the input IFC file: local disk - output is stored in the same location as the input file; other - output is stored in the same location as the BIMer. IFC Jar file

BIMer.Viewer

Developer’s Guide

Overview

  • What is the BIMer.Viewer
  • The BIMer.viewer is a WebGL-based, client-side JavaScript library for 3D model rendering. It allows you to view design models on the web prepared for rendering by the BIMer.IFC converter library. BIMer.Viewer contains two modules: BIMer.Viewer.lib and BIMer.Viewer.ui. BIMer.Viewer.lib is a library responsible for rendering models and managing all actions placed in the BIMer.viewer. BIMer.Viewer.ui is the implementation of a user interface built based on the MDL framework.

  • Getting Started with the BIMer.Viewer
  • Before you can display a model within the BIMer.Viewer, you must convert the IFC file to the JSON format. You’ll need the BIMer.IFC to make this work. The output JSON files structure needs to be made available for the viewer using http protocol.

Essentials

Add viewer to HTML
  • Styles
  • The following HTML snippet includes the Material Lite CSS and JavaScript files for the scene generated by the BIMer.Viewer and the appearance of the default buttons.

    Include the Material Lite CSS and JavaScript files in each HTML page in your project where you need the BIMer.Viewer to be displayed. It is recommended that you use the files hosted on the MDL’s CDN. You can also customize and download them to host them yourself, build them from the Material Design Lite source code or install them in your npm/Bower project.

                                                    
                                                        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                                                        <link rel="stylesheet"
                                                        href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css"/>
                                                    
                                                
  • Scene container
  • The following HTML snippet sets up the scene for the BIMer.Viewer. Add this <div> within the <body> section of your website, it will be the container for the viewer.

                                                    
                                                        <div class="bimerifc-scene-container"></div>
                                                    
                                                
  • Scripts location
  • The following HTML snippet specifies the location of the scripts that make the BIMer.Viewer (i.e. BimerIfcViewer-lib and BimerIFCViewer-ui) and the MDL library needed for the BimerIFCViewer-ui.

    Within the <script> tag specify the location of the Viewer’s JavaScript code with the version of the library that needs to be downloaded. The <script> tags need to be added at the end of the body section (or as close to the end as it’s possible considering the current source code structure) to allow the website to render all the static content prior to downloading the scripts. Where path stands for the location of the BimerIfcViewer-lib and BimerIfcViewer-us files and hash stands for the current version of the libraries.

                                                    
                                                        <script src="<LIBRARY-PATH>/BimerIfcViewer-lib-<HASH>.bundle.js"></script>
                                                        <script src="<LIBRARY-PATH>/BimerIfcViewer-ui-<HASH>.bundle.js"></script>
                                                        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
                                                    
                                                
Initialize viewer

The initialization of the viewer needs to be performed only once. To properly initialize the viewer you need to complete the steps mentioned in the previous section. The resulting HTML will be as follows:

                                    
                                        <head>
                                            <meta charset="UTF-8">
                                            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                                            <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css"/>
                                            ...
                                        </head>
                                        <body>
                                            ...
                                            <div class=”bimerifc-scene-container”></div>
                                            ...
                                            <script src="path/BimerIfcViewer-lib-hash.bundle.js"></script>
                                            <script src="path/BimerIfcViewer-ui-hash.bundle.js"></script>
                                            <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
                                        </body>
                                    
                                

The <div> container with the class bimerifc-scene-container will initialize the viewer instance together with a custom initializing script (snippet below). You can add the script below or write your own. Put it at the end of the <body>.

                                        
                                            <script>
                                                const container = document.querySelector('.bimerifc-scene-container');
                                                const viewerLauncher = new BimerIfcViewer.ui.ViewerLauncher(container);
                                                viewerLauncher.launch(<MODEL_URL>, <MODEL_NAME>);
                                            </script>
                                        
                                    
Load Model

To load the model use the launch method of the viewerLauncher class. Loading the model can be repeated many times with only one initialization of the viewer.

Advanced Options

UI Customisation

The BIMer.Viewer has a default toolbar, which is located at the top center of the page. A tool for orienting the camera view on the model, the ViewCube, is located at the right bottom corner of the page - this one cannot be modified using the Advanced Options, it is an integral element of the scene. Developers can customize the BIMer.Viewer’s appearance (toolbar and controls) and some of the behavior (responding to events). The below API Reference provides information on how to implement a custom UI and controls. The detailed steps described in the Essentials section do not apply, you need to follow them as guidance and adjust them to the custom implementation.

API Reference

BimerIfcViewer.lib

SceneContainer

A base class for BIMer.Viewer, responsible for 3D model rendering and scene manipulations.

Constructor
                                    new SceneContainer(container, language)
                                

Parameters:

Name Type Description
container required HTMLElement The BIMer.Viewer container
language string I18n language code, to define reference for the viewer localisation
Methods
                                    loadModel(modelUrl, actionsSetupCallback, loadingProgressCallback, missingWebGlCallback)
                                
Name Return Type Parameters Description
loadModel void modelURL, actionsSetupCallback, loadingProgressCallback, missingWebGLCallback Loads the 3D model from the provided location (URL). During the loading process when needed the method is calling provided callbacks

Method parameters definition:

Name Type Description
modelURL string URL to the JSON file structure where the model derivative is stored. This should be the unmodified output of the BIMer.IFC application
actionsSetupCallback function Function that gets called when the actions toolbar can be built and placed in the scene container. Function is called using two parameters: actions - BimerIfcViewer.lib. Actions. It is the object responsible for handling all actions available in BIMer.Viewer
loadingProgressCallback function Function that gets called to update the loading progress information. Function is called using two parameters: event – ProgressEvent. It is a built-in JavaScript object with loading progress data.
missingWebGLCallback function Function that gets called when the client’s browser does not support webGL. Function should inform the client that it is impossible to load a 3D model using this browser
Actions

An object responsible for triggering all built-in scene and model manipulations. It also provides access to model information like available model element types or properties.

Constructor
                                    new Actions(context)
                                

Parameters:

Name Type Description
context required object The BIMer.Viewer context object
Methods
                                    freeOrbit()
                                
Name Return Type Description
freeOrbit void Switches active scene control to free orbit
                                    pan()
                                
Name Return Type Description
pan void Switches active scene control to pan
                                    zoom()
                                
Name Return Type Description
zoom void Switches active scene control to zoom
                                    reset()
                                
Name Return Type Description
reset void Resets the entire scene to the original setting
                                    toggleFullscreen()
                                
Name Return Type Description
toggleFullscreen void Toggles fullscreen
                                    getAvailableFilterTypes()
                                
Name Return Type Description
getAvailableFilterTypes String array Provides an array of available element types required for filtering by type
                                    explode(value)
                                
Name Return Type Parameters Description
explode void value Explodes elements of the model

Method parameters definition:

Name Type Description
value number Number used to calculate explode scale using formula: 1 + value / 50
                                    clip(value)
                                
Name Return Type Parameters Description
clip void value Clips elements of the model

Method parameters definition:

Name Type Description
value number Number used to calculate clipping vector using formula: zHeight * inputValue / 100 where zHeight is the highest point of model
                                    applyFilter(type, enable)
                                
Name Return Type Parameters Description
applyFilter void type, enable Applies filter on model elements by type of the element

Method parameters definition:

Name Type Description
type string Name of the element type for filtering
enable boolean true - elements with provided type will be filtered out, i.e. they will be hidden on the model view false - elements with provided type will remain visible on the model view
                                    loadElementProperties(uuid, callback)
                                
Name Return Type Parameters Description
loadElementProperties void uuid, callback Provides element’s IFC properties as callback function data parameter

Method parameters definition:

Name Type Description
uuid string Name of the element type for filtering
callback function The name of the function that will be called on triggering of an event with provided eventID
                                    addEventListener(eventID, callback)
                                
Name Return Type Parameters Description
addEventListener void eventID, callback Registers an event handler

Method parameters definition:

Name Type Description
eventID string Supported event ids: model-element-selected – triggered on selection of the element of the model. model-element-unselected – triggered on unselection on the element of the model.
Triggering of one of the supported events calls a callback function (registered) with a parameter - an event object containing uuid property – the model’s element’s UUID.
callback function The name of the function that will be called on triggering of an event with provided eventID

BimerIfcViewer.ui

ViewerLauncher

An object responsible for triggering all built-in scene and model manipulations. It also provides access to model information like available model element types or properties.

Constructor
                                    new ViewerLauncher(container)
                                

Parameters:

Name Type Description
context required HTMLElement The BIMer.Viewer container
Methods
                                    launch(modelUrl, modelName)
                                
Name Return Type Parameters Description
launch void modelURL, modelName Initializes loading of the 3D model from the provided location (URL)

Method parameters definition:

Name Type Description
modelURL string URL to the JSON file structure where the model derivative is stored. This should be the unmodified output of the BIMer.IFC application
modelName string The name of the model that will be displayed above the launch button