I am in Gothenburg supporting the Forge accelerator.
I have not quite finished it yet, but the existing functionality looks as if it already ought to be very useful indeed to anyone working with geometry in the Forge viewer.
- Working in Visual Studio Code
- Adding custom geometry to the Forge Viewer
- Next steps
- Detailed notes and pointers
Inspired by Kean Walmsley's note on enabling Visual Studio Code’s integrated web debugging, I am using Visual Studio Code to develop ForgeFader and very happy with it indeed.
I have not actually enabled the integration with Chrome debugging that is the main point of Kean's article, but just using this as an editor is a good start.
ForgeFader implements a Forge viewer extension to calculate and display signal attenuation caused by distance and obstacles in a building model with a floor plan containing walls.
It implements a functionality similar to RvtFader:
Given a source point, calculate the attenuation in a widening circle around it and display that as a heat map.
Two signal attenuation values in decibels are defined in the application settings:
- Attenuation per metre in air
- Attenuation by a wall
This app is based on Philippe Leefsma's Forge React boilerplate sample.
Please refer to that for more details on the underlying architecture and components used.
The ForgeFader implementation lives in Viewing.Extension.Fader.js.
On loading, in
onGeometryLoaded, it determines the Revit BIM wall fragments for subsequent ray tracing.
On picking a point on a floor in the model, in
onSelection, it launches the
attenuationCalculator function to do the work.
That fiddles around a bit to determine the picked floor top faces and add a new mesh to the model on which to draw the attenuation map.
Once the mesh has been added, it in turn calls
rayTraceToFindWalls to create a bitmap representing the signal attenuation to be displayed by a custom shader.
When debugging any kind of geometrical programming task, it is of utmost importance to be able to comfortably visualise the situation.
In this app, I add three different kinds of geometry dynamically to the model displayed by the Forge viewer:
- Points and lines representing the top face of the floor and the picked source point.
- A mesh representing the top face of the floor to be equipped with a custom shader and offset slightly above and away from the floor element surface.
- Points and lines representing the raytracing rays.
Three example screen snapshots illustrate what I mean.
Display points and lines for debugging using
Create a mesh to represent the floor top face and offset it up slightly above the floor surface:
A debug helper displaying lines in the model representing the ray tracing rays:
- Perform the raytracing to determine the number of walls between the picked signal source point and a grid of target points
- Generate a bitmap based on that information, or simply a mapping of
(u.v)values to the desired colour value.
- Implement a custom fragment shader to display the (u,v) to colour mapping on the floor top face mesh.
I made the following notes during the research and implementation steps.
- Colour gradient examples:
- A series of three consecutive approaches to solve the task, starting with the most obvious, for the learning curve. However, the last in the series, using shaders, although last in the learning curve, once understood, is actually probably the most effective and simplest approach.
- Projecting Dynamic Textures onto Flat Surfaces with Three.js.
- Using Shaders to Generate Dynamic Textures in the Viewer API.
- Setting up the new project based on boilerplate code:
- Looked at
onSelection; it relies on
- How to get the model object tree of 2d drawing.
- For ray tracing, look at
- Create a custom mesh with a finer resolution than the original face.
- Assign colours to the mesh.
scene.addand pass a mesh.
- The viewer does not have any concept of the face of an element. It is all just individual triangular fragments.
- Check out the function
- Shader produces all the points, calculates and sets result.
- Stemkoski Three.js Examples, Shader – Attributes (source).
- Intro to Pixel Shaders in Three.js.
I want to attach a fragment shader to the picked floor face. My shader should draw an image or texture directly, i.e., the desired 'heat map'. Here are som more complex pixel shader samples. I need to implement a fragment shader script and equip it with an id.