Introduction

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within a compatible web browser without the use of plug-ins. Prerequisites for WebGL to function are that the project Insight models have been converted to the .CBXS streaming format and uploaded into the Insight Visualisation Folder in the Project>Document Library.

To check this, go to the Insight Visualisation folder and a icon will appear next to compatible .CBXS files. Please see example below for reference.

WebGL enabled areas in BIMXtra

WebGL functions are enabled in several areas of the system as detailed below:

DMS

WebGL is enable for all .CBXS and .IFC files uploaded to the BIMXtra DMS. A  icon will appear next to the file in the Download/View column. 

WebGL in this mode will load a single file and allow users to navigate around the model with same mouse navigation controls as Insight.

Please see screen capture below for an example of 3D rendering using WebGL in the DMS.

Design Schedules

The WebGL  icon will appear in the design schedules when components are located in the corresponding .CBXS file uploaded to the Insight Visualisation folder.

When the WebGL rendering panel loads it will highlight the component from the design schedules in red and zoom to the object.  Please note, the radius of render is initially set to a 10m default value and there after the radius value is stored by user and project, but by increasing this value the surrounding components from all .CBXS files in the location of the selected components will be shown. These surrounding components will be rendered in grey transparent colour override.

Please see screen capture below for an example of 3D rendering using WebGL in the Design Schedules.

Comms and Construction Links

Similar to the Design Schedule WebGL Function. The WebGL icon will appear next to Comms and Forms that have been attached to components that the system can locate in the corresponding .CBXS file, uploaded to the Insight Visualisation folder.

When the WebGL rendering panel loads, it will highlight the component from the design schedules in red and zoom to the object.  Please note, the radius of render is set to 1 by default, but by increasing this value, the surrounding components from all .CBXS files in the location of the selected components will be shown. These surrounding components will be rendered in grey transparent colour override.

Please see screen capture below for an example of 3D rendering using WebGL in the Design Construction Page.

Clash Detection Links

Similar to the Design Schedule WebGL Function. The WebGL icon will appear next to clashes that have been attached to components that the system can locate in the corresponding .CBXS file, uploaded to the Insight Visualisation folder.

When the WebGL rendering panel loads, it will render the two clash objects in red and green.  Please note, surroundings can be enabled to show other objects in the vicinity of the clashed objects and the radius of render is set to 1 by default, but by increasing this value, the surrounding components from all .CBXS files in the location of the selected components will be shown. These surrounding components will be rendered as well, in grey transparent colour.

Please see screen capture below for an example of 3D rendering using WebGL in the Clash Detection Page.

WebGL controls

Below is a description and diagram of the basic control layout for the WebGL 3D Viewer:

1. WebGL Controls - These controls are the setting options for how WebGL renders the 3D model.

   1. Debug - FPS (displays the Frame Per Second rate), Render Info (stats from the rendering engine), Wireframe (changes the render to display object in Wireframe mode) and Normals (renders to Normals mapping of the object in Red and Green colours).
   2. Helpers - Grid (inserts a reference grid into the scene), Axis (displays the scene's axis), Cameras (inserts a 3D camera in the scene), Planes (inserts a plane reference in the scene) and Bounding Boxes (renders a yellow box around all visible components in the scene).
   3. Ambient Light - Two slider controls to define the intensity and exposure of components rendered in the 3D view.
   4. View Settings - Object back faces (renders the inverted side of components in the scene. Please note, this will double the amount of rendered triangles that can affect the navigation performance), Grey Level (slider controls how grey the objects are rendered at) and Transparency (slider controls the level of transparency on components rendered in the scene).
   5. Streaming - Radius (slider controls only appear when loaded from Design, Comms or Construction to find a highlighted object. The slider value then defines the object to be rendered into the scene around the highlighted object).
2. Navigation - Arrows zoom to the extent of all the rendered components or the selected components. Arrows move the camera to the top corners of the bounding box and the icon moves the camera to a top view. Mouse>Right Click also has a Zoom to Object command.
3. Grey and Transparency - Buttons override the components default appearance to shown non-selected or highlighted components in grey and/or transparent.
4. Rotate - Switch between standard mouse walk mode and rotate around selected components to centre of the modelled components rendered.
5. Menu Ribbon - replicates controls from Insight over the following areas: Project, Selection, Comms and View.
6. Render Scene - Area on the screen where 3D components can be viewed.

Menu Ribbon Controls

Project Menu

The project menu allows the user to control what components can be rendered into the scene from the available models held in the Insight Visualisation folder.

1. Enable/Disable Touch - This either enable or disables on screen button for touch navigation around the model space.

Selection Menu

1. Highlight - Used to pick out objects based on predefined groupings or categories. These can then be isolated or added to the current selection and worked on within other tools.
2. Visible - The Visible tree is used to control which objects are currently displayed, as items checked on it are the only objects displayed in Insight. This allows a group of objects of interest to be isolated, and tasks carried out on the refined group.
3. System -Used to pick out objects based on system reference from the Design schedules. These can then be isolated or added to the current selection and worked on within other tools.
4. Search - Highlight components using their CAD Handle.
   

Forms Menu

Populate Forms - By clicking on the button you display all forms configured for the project, select one to Add.

Press to add a new form to the currently selected objects, and have the form Component Number fields pre-populated. If there's no current object selection, the form will be created as a free-standing form. Free-standing forms can't be added to objects at a later stage.

Comms Menu

Add Comms - Create a new Comm with a capture of the current screenshot. If objects are selected the Comm will be attached to them and will pre-populate the Comm's Component No and Component Name fields. If no objects are selected a stand-alone Comm will be created. 

View Menu

1. Snapshot - Feature coming soon - Navigation between Snapshot locations saved in Insight.
2. Orthographic - Toggle the view between perspective and orthographic mode. Note: The Navigation Controls vary slightly between the two modes.
3. Lights On - On/Off - Turns off and on the lighting and material affects in the 3D view.
4. Sky - Toggle the sky background On/Off.