How We Made 1GB IFC Files Usable in the Browser: Culling, Tiling, and Compression Explained

Handling massive 1GB+ IFC files in web browsers can feel impossible - but it’s not. By using three key techniques - culling, tiling, and compression - you can dramatically improve performance, reduce crashes, and make these files usable across devices. Here’s how it works:

• Culling: Load only the data users need, based on their view or actions, to minimize memory usage.
• Tiling: Break large models into smaller, independent sections (tiles) for faster loading and better memory management.
• Compression: Shrink file sizes by removing redundancies and optimizing geometry, without losing crucial data.

These methods work together to make even the largest IFC files run smoothly in a browser, transforming slow, unresponsive workflows into efficient, web-friendly experiences. Let’s explore how each approach solves specific challenges and how combining them can optimize performance.

Connect! 2021: Online IFC, The Future of Open BIM - Antonio Gonzalez Viegas (IFC.js)

Why IFC Files Are Hard to Handle in Browsers

IFC files present unique challenges for browsers, not just because of their size, but also due to their intricate structure. A simple "upload and view" method often falls short when dealing with such complex BIM data.

How IFC Files Are Built and Why They Get So Large

IFC files are designed to store detailed information about buildings, including individual properties, relationships, and geometric data. While this makes them invaluable for construction and facility management, it also leads to massive file sizes for several key reasons:

• Repeated geometry data: Imagine a building with hundreds of identical windows. Instead of referencing a single template, IFC files often store the full geometric definition for each window, significantly increasing file size.
• Excessive metadata: Each object can include dozens of properties. While this metadata is useful for various applications, it creates unnecessary overhead when the focus is on visualizing the model.
• Nested relationships: Elements in IFC files often reference other elements in layers. For example, a wall might link to materials, which in turn reference thermal properties or standards. These dependencies add complexity and processing demands.
• Excessive precision: Geometric data in IFC files is often stored with a level of precision far beyond what’s needed for web-based visualization, further bloating the file size.

What Limits Browsers When Loading Large Files

Web browsers have built-in constraints that make handling large IFC files particularly difficult. These limitations are designed to maintain stability and security but pose significant challenges for BIM applications.

• Memory constraints: Loading large IFC files can consume an enormous amount of memory. Traditional methods may require over 4.5 GB of memory, while optimized techniques can lower this to about 1.7 GB. Even then, this is impractical for most browser environments, especially on laptops with 8 GB of total RAM. Dedicating such a large portion of memory to a single web application isn’t feasible for most users.

"However, the task of loading large IFC models typically consumes a large part of the memory of a web browser or even crashes the browser, and this significantly limits further BIM applications."

• Hong-Lei Lu, Jia-Xing Wu, Yu ^[2]

• Processing bottlenecks: Browsers need to convert IFC data into 3D objects for rendering, a task that is CPU-intensive and often single-threaded. This makes the CPU a critical bottleneck ^[3].
• Rendering performance: Unoptimized large models can run at frame rates as low as 3 FPS, making interaction nearly impossible. Optimized methods can improve performance to around 20 FPS, but this still highlights the strain such files place on browsers ^[2].
• JavaScript engine limitations: Tools like NodeJS, widely used for IFC processing, have strict memory limits. For example, JavaScript engines impose a 1 GB limit for text strings, which can lead to "Fatal JavaScript invalid size error" messages when processing large files ^[5].
• Resource competition: Browsers also juggle other active scripts and system tasks, which can divert resources away from rendering BIM models ^[3].

Even file hosting services recognize these challenges. For instance, One Click LCA’s IFC Viewer supports files up to 1,000 MB, but files exceeding 300 MB often experience noticeable performance issues ^[4].

Understanding these browser limitations is crucial for developing strategies like culling, tiling, and compression to handle massive IFC files more efficiently. These techniques will be the focus of the next discussion.

Culling: Loading Only What Users Need to See

Culling tackles the challenge of browser limitations by focusing on loading only the data users actively need. This approach minimizes memory usage and improves performance. In many building models, users typically concentrate on specific floors, rooms, or systems at a time. Loading irrelevant elements from areas outside their current view wastes browser resources unnecessarily.

Server-Side Processing to Streamline Data

Server-side culling happens before any data reaches the browser, ensuring only the most relevant information is sent. This preprocessing step trims away unnecessary elements, delivering a leaner dataset.

• Geometric culling removes objects outside the user’s selected area. For instance, if someone is examining a single floor in a multi-story building, the server excludes data from other floors before sending it. This method drastically reduces file sizes for specific views.
• Level-of-detail adjustments simplify the geometry of objects based on their distance or importance. Nearby elements retain full detail, while distant ones are rendered in simpler forms. This is particularly useful when some buildings in the model serve as background context rather than the main focus.
• Metadata filtering eliminates irrelevant property data. For example, a facilities manager reviewing space usage doesn’t need material specifications or construction timelines. Stripping away this information reduces data transfer without compromising the visual experience.

Once the server processes the data, client-side techniques take over to dynamically refine what users see as they interact with the model.

Real-Time Adjustments Based on User Actions

While server-side culling prepares the data, client-side culling adapts dynamically to the user’s behavior. This ensures the system responds to real-time needs without overloading browser resources.

• Frustum culling ensures that only objects within the user’s current view are rendered. As users pan, zoom, or rotate the model, the system updates visible elements and temporarily unloads objects outside the view, freeing up resources.
• Distance-based culling adjusts detail levels based on proximity. When users zoom in, detailed data is loaded for close objects, while distant ones remain simplified. This creates a smooth transition from a broad overview to a detailed inspection.
• Progressive loading starts with a simplified version of the entire model and gradually adds detail to areas where users focus their attention. If a user repeatedly examines a specific section, the system prioritizes loading higher-resolution data for that area while keeping other sections at lower detail levels.
• Interaction-based filtering responds to user selections. For example, if someone chooses to view electrical systems, the system unloads unrelated data and displays only the relevant information.

Tiling: Breaking Large Models into Smaller Pieces

Tiling is a method that divides IFC models into smaller, manageable sections, or "tiles", which are loaded individually as needed. Instead of overwhelming a browser by processing an entire 1GB file at once, tiling organizes the model into a grid-like structure where each piece operates independently. This makes large datasets easier to handle while preserving the overall integrity of the model and boosting performance.

Think of it like a mapping app: only the part of the map you’re viewing loads, not the entire world. Similarly, in large building models, users typically focus on specific areas, so tiling ensures only those sections are loaded. This approach significantly reduces load times and improves memory efficiency, as explained in more detail below.

Spatial tiling divides a building into logical sections like floors, zones, or functional areas, loading only the parts users navigate to. Hierarchical tiling adds another layer by presenting simplified overviews at a distance and detailed views up close. Temporal tiling separates data based on time, allowing users to toggle between current, planned, or historical states of the model.

How Tiling Improves Browser Performance

Tiling enhances browser performance by using a progressive loading system that fetches only the most essential data upfront. Instead of waiting for an entire model to load, users get a basic view of the model, with additional details appearing as they explore further.

This method also improves memory usage by dynamically loading and unloading tiles based on what the user is viewing. By keeping only the relevant sections in memory, the browser avoids becoming overloaded. Similarly, selective loading conserves bandwidth, as only the necessary data is downloaded when needed.

Rendering performance sees a boost as well. Graphics processors handle smaller chunks of data more efficiently, resulting in smoother and more responsive navigation. Additionally, the system can preload adjacent tiles in the background, ensuring seamless transitions as users move through the model.

Important Factors When Setting Up Tiling

Getting the most out of tiling requires careful planning and configuration. Here are some key considerations:

• Optimize tile size: Striking the right balance is critical. Tiles that are too small create unnecessary overhead from managing many files, while overly large tiles negate the benefits of breaking the model into sections.
• Manage boundaries: Avoid visual gaps or overlaps between adjacent tiles. Elements that span multiple tiles should transition seamlessly to maintain visual and functional consistency.
• Preserve data relationships: Ensure interconnected components, like building systems or structural elements, remain linked across tiles to keep the model accurate and functional.
• Ensure coordinate consistency: Proper alignment of tiles within the overall model is essential for accurate measurements and spatial analysis.
• Implement caching strategies: Decide how long tiles should stay in memory based on usage patterns. Frequently accessed tiles can remain cached longer, while others are unloaded to save resources.
• Prioritize network loading: Focus on loading the user’s current view first, while preloading adjacent areas to enable smooth navigation.

Compression: Making Files Smaller Without Losing Data

Compression is the final piece of the puzzle for handling large IFC files efficiently in web browsers. While culling removes unneeded data and tiling breaks models into smaller chunks, compression reduces file sizes even further - without losing the essential architectural and engineering details. This process can shrink files significantly while keeping all critical information intact.

The secret to effective IFC compression lies in recognizing that these files are highly structured and often contain repetitive elements, like windows and doors. Smart compression techniques take advantage of this repetition to store data more efficiently.

Comparing Different Compression Tools and Methods

Not all compression methods are created equal, and their effectiveness often depends on the type of IFC file and its intended use. General-purpose compression methods, like ZIP, reduce file size but don’t consider the relationships between building elements. On the other hand, geometry-focused compression targets the 3D coordinate data that defines building shapes. Since geometric data often accounts for a large portion of an IFC file’s size, optimizing it can yield substantial reductions. Semantic compression goes a step further by interpreting the meaning behind the data - it identifies repeated elements, like identical windows, and references a single definition instead of duplicating information.

These techniques provide a strong foundation for further reducing file sizes through systematic cleanup.

Optimizing File Structure and Eliminating Duplicates

Before applying compression, cleaning up the IFC file can make the process even more effective. Many IFC files carry unnecessary data from the design process, including unused definitions, redundant properties, and poorly organized structures.

One key step is removing duplicate geometry. During design, identical shapes are often created multiple times, but referencing a single shared definition instead can significantly reduce file size. Similarly, property optimization involves eliminating empty fields, consolidating similar attributes, and removing duplicate information that doesn’t add value to the model.

Another useful tactic is reducing coordinate precision. IFC files often store coordinates with a level of precision far higher than needed for construction purposes. Adjusting precision to a practical level can shrink the size of geometric data without affecting the model’s usability.

Automating this cleanup process with scripts or specialized tools ensures consistency and efficiency, especially for large files. Setting clear rules to retain important data while removing redundancies is essential.

Reference consolidation is another powerful approach. IFC files frequently include multiple definitions for the same element, created at different times or by different team members. Combining these references reduces both file size and the complexity of the data structure, making the file easier to work with and more suitable for compression.

Combining Culling, Tiling, and Compression for Best Results

When culling, tiling, and compression come together, they form a system that efficiently transforms massive IFC files into assets ready for the web. Each technique plays a specific role: compression reduces file size, tiling breaks models into smaller, manageable pieces, and culling ensures the browser only loads the data it needs. To make this system work seamlessly, the order of operations is key.

The best approach treats compression and tiling as preprocessing steps, while culling functions dynamically based on how users interact with the model. This method boosts performance while keeping the flexibility users need to explore intricate building models. Here’s a streamlined workflow that ties these techniques together.

Step-by-Step Process for Handling Large IFC Files

Start with file preparation during the upload process. Begin by compressing the original IFC file. Focus on optimizing geometry and removing duplicates to shrink the file size before moving to the next stage.

Once compressed, divide the model into tiles. Use logical divisions like floors, wings, or structural zones rather than arbitrary cuts. This ensures each tile is both practical to load and efficient for network requests.

While tiling, ensure metadata remains consistent across tile boundaries. For instance, elements like structural beams or HVAC systems that span multiple tiles need special attention to preserve their properties, no matter which tiles are loaded.

On the server side, assign systematic names and indexes to the tiles. Generate manifest files that describe the contents, boundaries, and relationships of each tile. This metadata is crucial for the dynamic culling system.

Dynamic culling kicks in as users interact with the model. By monitoring the user’s viewport, zoom level, and selected elements, the system determines which tiles to load and adjusts the level of detail in real-time. This ensures users get the context they need without enduring long load times.

Finally, maintaining data accuracy and system stability is critical. Rigorous control measures help ensure the system performs reliably.

Solving Problems and Keeping Data Accurate

To keep the system running smoothly, several control measures are essential:

• Version control: Track compression settings, tiling boundaries, and culling rules for every file. This is especially important when updates require consistent reprocessing.
• Data integrity checks: Confirm that geometric relationships stay intact, element properties remain unaltered, and measurements hold their accuracy after each step.
• Memory management: Automate routines to unload unnecessary tiles and monitor memory usage. Set clear limits to prevent crashes by keeping the number of active tiles under control.
• Fallback strategies: Plan for unexpected issues like corrupted files by having the option to serve original, unprocessed files when needed.
• Compatibility testing: Ensure optimized files work with standard IFC viewers and analysis tools to avoid disrupting workflows.

For projects where IFC files are updated frequently during design phases, adopt workflows that focus on reprocessing only the affected tiles. This targeted approach saves both processing time and server resources, making it an efficient choice for dynamic projects.

AlterSquare‘s Experience with Large-Scale Web BIM Solutions

Managing massive IFC files directly in browsers is no small feat - it calls for a deep understanding of cutting-edge web technologies paired with insights into construction workflows. AlterSquare has carved out a niche in this space, assisting startups and growing companies in converting intricate building data into efficient, user-friendly web applications. Their expertise bridges technical complexity with practical application, delivering solutions that meet the rigorous demands of BIM projects.

Through their engineering-as-a-service model, AlterSquare extends your technical team to craft custom MVPs (Minimum Viable Products). This approach proves especially valuable for organizations handling large-scale BIM data, where challenges like 3D visualization and web performance optimization are critical.

"At AlterSquare, we bring to you an augmented tech team that sells engineering as a service! We work with start-ups to build bespoke MVPs." ^[1][3]

Tailored Solutions for Startups and Growing Companies

AlterSquare’s delivery model is designed to address the specific challenges faced by companies at different growth stages. For startups grappling with large IFC files and performance bottlenecks, their 90-day MVP program offers rapid prototyping and expert guidance on tech stacks. This program is essential for validating BIM visualization concepts against the demands of real-world file sizes.

Startups without in-house expertise in 3D web development gain a significant edge by leveraging modern web technologies. For companies that have moved past the MVP stage, AlterSquare provides dedicated tech team augmentation services, with engineers skilled in 3D web development. These teams focus on building scalable architectures to meet the growing demands of users ^[1].

To streamline workflows, AlterSquare uses AI-driven development to automate IFC file processing, reducing both timelines and costs ^[1]. Their solutions also incorporate advanced optimizations, such as hardware acceleration, file compression, browser-based viewers, and network enhancements, ensuring that even large-scale BIM data performs seamlessly in web environments ^[3].

Real-World Impact: AlterSquare’s Success Stories

AlterSquare’s tailored approach has delivered measurable improvements in real-world projects. For example, they’ve enhanced BIM data handling by optimizing memory management in architectural visualization platforms ^[1]. Additionally, they’ve modernized legacy building information systems by introducing incremental loading strategies, resulting in faster load times and more responsive user experiences ^[1]. These upgrades are particularly beneficial for established companies looking to refresh their BIM workflows without causing operational disruptions.

Conclusion: Main Points for Optimizing 1GB IFC Files

Handling large IFC files in browsers requires smart strategies like culling, tiling, and compression to tackle performance challenges effectively.

• Culling: This technique filters out unnecessary data based on what the user is viewing, ensuring that only relevant components are loaded. This reduces the amount of data the browser has to process, speeding up load times.
• Tiling: By breaking a 1GB IFC file into smaller, manageable chunks that load progressively, tiling helps maintain smooth performance - even on standard devices.
• Compression: Advanced algorithms and deduplication shrink file sizes while retaining geometric accuracy and key details, cutting down bandwidth usage without sacrificing quality.

When combined, these techniques work together seamlessly. Culling narrows the data scope, tiling ensures efficient loading, and compression minimizes file size, turning massive 1GB files into responsive, browser-friendly applications. This makes it possible to access and interact with complex BIM data across various devices and network conditions without the need for high-end hardware or specialized software.

For organizations working with extensive BIM datasets, these methods not only improve performance but also make intricate information accessible to a broader audience. Stakeholders can collaborate in real-time on large-scale construction projects directly through a web browser, streamlining workflows and reducing technical barriers.

The key to success lies in customizing these techniques to fit your project’s unique needs. Factors like project type, user behavior, and performance goals will guide decisions on how aggressively you apply culling, the level of detail in your tiling approach, and the choice of compression algorithms. By integrating these tailored strategies into your workflow, you can unlock the full potential of BIM performance in the browser.

FAQs

How do culling, tiling, and compression make large IFC files faster and easier to use in a browser?

Large IFC files can be tough for browsers to handle, but a combination of culling, tiling, and compression helps streamline their performance.

• Culling focuses on cutting out unnecessary data, so only the essential parts of the file are loaded and displayed.
• Tiling splits the file into smaller sections, making it easier for the browser to load just what’s needed at any moment.
• Compression shrinks the file size, speeding up downloads while preserving the data’s accuracy.

By working together, these techniques tackle performance hurdles, resulting in faster load times, lower memory demands, and a smoother experience when navigating detailed architectural or engineering models in web applications.

What challenges do browsers face with large IFC files, and how do techniques like culling, tiling, and compression help?

Browsers often face difficulties when handling large IFC files. The main culprits? Slow loading times, excessive memory usage, and even the occasional crash. These problems arise because browsers must download and process massive 3D data files in their entirety, which can push their resources to the limit.

To tackle these challenges, techniques like culling, tiling, and compression come into play. Culling eliminates elements that aren’t visible, helping to conserve memory. Tiling splits the file into smaller, more manageable pieces, speeding up loading times. Compression shrinks the file size while preserving important details, making it easier for browsers to handle the data smoothly. Together, these methods help streamline performance in web environments.

What’s the best way to choose compression and tiling strategies for my BIM project?

When deciding on compression and tiling strategies for your BIM project, you’ll need to weigh several factors: the size and complexity of your IFC files, the required level of detail, and the performance demands of your web application. Start by pinpointing your project’s primary goals - whether that’s speeding up load times, shrinking file sizes, or something else - and find a way to achieve these without compromising the accuracy of your data.

For compression, try out different levels to strike the right balance between reducing file size and maintaining performance. When it comes to tiling, breaking large models into smaller, more manageable sections can make rendering smoother and improve the overall user experience. Testing these approaches on a smaller scale first can help you refine your methods and ensure they deliver the results you need.

Related Blog Posts

• 5 Browser Tricks That Cut BIM Model Load Times by 70%
• Breaking the Render Barrier: 5 Non-Code Tactics to Slash Load Times in BIM SaaS
• Handling Large IFC Files in Web Applications: Performance Optimization Guide
• Building 3D Viewers in the Browser: Three.js Implementation Guide