How Do You Bring a BIM Model Developed in Revit to a Web Browser?

At ATBIM, we start with the BIM model of our own office developed in Revit, prepare it in Blender, work with GLB (binary glTF 2.0), apply a specific optimization process, and finally use Three.js to visualize it interactively in the browser.

The overall workflow is:

Revit → Blender → GLB → Optimization → Three.js → Web

The challenge was not simply to display a 3D model online. A model created to work within a BIM environment has very different requirements from a model that needs to be downloaded, rendered, and interacted with directly in a web browser.

That is why turning our BIM model into the foundation of a digital twin required adapting each stage of the process.

From the BIM Model to the Browser: The Process Step by Step

1. The Starting Point: Our BIM Model in Revit

The virtual office is based on a BIM model developed in Revit, with the architectural and building systems modeled as separate disciplines.

Walls, floors, furniture, panels, mullions, ducts, insulation, and HVAC equipment are all part of the original model.

And this is where one of the most interesting aspects of the entire process comes into play: the model’s BIM origins remain recognizable even after it reaches the web.

The architectural GLB file retains 710 nodes whose names originate from Revit, including information such as category, family, type, and ElementId.

For example, within the file later used by the viewer, we can still find elements identified as:

• Wall, for walls.
• Floor, for floors.
• FamilyInstance, for furniture and other elements.
• Panel and Mullion, for curtain wall components.

Even a meeting table retains its ElementId 194305.

This means that transforming the model for use on the web does not completely remove the structure inherited from Revit.

2. Preparing the Model in Blender

The next step in the process takes place in Blender.

At this stage, we added certain visual elements that were not originally part of the BIM model. One example is the workstations with dual monitors and their emissive materials, which make the screens appear to be switched on within the viewer.

3. From Blender to GLB

Once the model has been prepared, the format used to bring it into the web environment is GLB, the binary representation of the glTF 2.0 standard.

The architectural and MEP models are also kept as separate models.

The architectural model retains elements such as walls, floors, panels, mullions, and families, while the MEP model preserves ducts, insulation, fittings, and HVAC equipment originating from Revit.

This separation allows us to work with both disciplines independently within the viewer.

4. Why Isn’t Simply Exporting the Model Enough?

This is where one of the project’s main challenges comes into play.

A BIM model is not originally designed to run inside a web browser.

In Revit, the main goal is to work with BIM data, geometry, and disciplines. On the web, the priorities are different: download size, geometry, textures, graphics memory, and performance.

That is why the model is not simply published after being exported.

Before reaching the user, the GLB files go through an optimization process developed specifically for the project. The system uses glTF-Transform, Draco, and Sharp, among other technologies, to optimize geometry and textures.

In other words, we are not simply changing a file format.

We are adapting a model created for a BIM environment to the requirements of an interactive 3D experience running on the web.

And this is where we encounter some of the most interesting technical challenges of the entire development process.

BIM Model vs. Web-Optimized Model

The difference becomes clearer when we look at what each environment requires.

A BIM model is designed for:

• Project design and management.
• Structured BIM data.
• Architecture and MEP systems.
• Families and building elements.
• Working within specialized software such as Revit.

A 3D model prepared for the web is designed for:

• Loading directly in a web browser.
• Reducing download size.
• Controlling graphics memory usage.
• Optimizing geometry and textures.
• Real-time rendering.
• Interaction from desktop, tablet, or mobile devices.

The goal, therefore, is to find the right balance: adapting the model to the browser without completely losing the connection to its BIM origins.

5. Three.js: Finally Bringing the Model to the Browser

After preparing and optimizing the GLB files, we reach the final step in this first part of the process: rendering them on the web.

Our viewer is integrated into a website built with Astro and uses Three.js as its 3D engine.

Three.js handles the elements required to turn the 3D files into an interactive experience: the scene, camera, lighting, shadows, controls, and model loading.

In addition, the GLB files begin downloading from the page’s

before the viewer itself is initialized. By the time Three.js is ready to use them, the data is already being downloaded or is available, avoiding the need to start a second request for the same model.

The result is the foundation on which we build our digital twin:

a BIM model of our office transformed into a 3D space that can be accessed directly from a web browser.

BIM Continuity: What Makes the Process Particularly Interesting

One of the ideas that best summarizes this first stage of the project is BIM continuity.

Even after passing through different tools, formats, and optimization processes, the file used by the browser still contains information originating from Revit.

A wall is still recognizable as a wall.

The floor retains its type information.

Curtain wall elements remain differentiated.

And the meeting table still retains its ElementId.

The project’s technical report highlights this continuity as one of the most interesting aspects of the development: the BIM chain is not completely broken when the model reaches the web.

This opens the door to building much more on top of the model than a simple 3D visualization.

What Do We Achieve with This Process?

The result of this first phase is a technology pipeline that can be represented relatively simply:

But getting that final step to work properly, especially on devices with limited resources, raises a second question:

How do we make a complex BIM model run smoothly in a web browser and on mobile devices?

The answer involves textures, Draco, WebP, geometry, shadows, and, above all, a resource that initially caused us more problems than the file size itself: GPU memory.

That will be the focus of the second part of this series.

Frequently Asked Questions About Bringing a BIM Model to the Web

Can a Revit model be viewed directly in a web browser?

Not in the same way it is used within Revit. In our case, the model goes through a preparation process, is exported to GLB, and is optimized before being loaded and rendered using Three.js.

What format do we use to bring the BIM model to the web?

We use GLB, the binary representation of the glTF 2.0 standard. The 23 models analyzed also use Draco compression for their meshes.

Does the model lose all the information inherited from Revit?

No. The GLB files retain information originating from Revit in the names of many nodes, including categories, families, types, and ElementIds. The architectural model retains 710 nodes with this structure.

What role does Three.js play in the digital twin?

Three.js is the 3D engine used to build the browser-based experience. It handles model rendering, cameras, controls, lighting, shadows, and other components of the 3D scenes.

Discover more in the second part of our series on how we created the digital twin of our office.