Customized USDz pipeline for Three.js: matching iOS visual fidelity

Interested in web development and iOS visualization? This is the right place to find the tools and updates you were looking for.

What we did

At Lagarsoft we created an iOS app that enables you to accurately measure areas, rooms, walls, roofs, and buildings just by scanning them.

It also lets you identify places in the house and tag furniture, or even predict what it is. We’ll delve into these benefits later on.

You might be wondering what the catch is. The app then transforms these scans into an easy-to-read 3D model with its specific measures.

To create this app we used the RoomPlan API: a Swift API that uses the camera and LiDAR scanner on iPhone and iPad to create a 3D floor plan of a room.

We then exported the scan as a USDz file, the 3D scene representation format from Pixar Animation Studios. Using Python, we converted that USDz into a JSON representation compatible with Three.js. This involved moving from a backend/scripting environment to a frontend, web-based, 3D rendering framework.

Why was this move necessary?

• Three.js enables the creation of interactive 3D graphics in the browser, ideal for interactive 3D-model apps. It’s best for real-time rendering.
• High-quality 3D graphics make apps more attractive. Users can interact with 3D content instantly without extra software, enhancing accessibility and engagement.
• You can access it on multiple platforms: desktops, tablets, smartphones. No additional plugins or software required.
• It belongs to a rich ecosystem. It integrates with HTML5, CSS3, and JavaScript frameworks (React, Vue.js).

Practical use cases

When we think of possible applications of the tool, some niches and industries pop up. This is a must-use for real estate, engineering, architecture, and the like.

One visual sample case is HVAC systems. HVAC stands for Heating, Ventilation, and Air Conditioning, and it’s responsible for regulating temperature, humidity, and air quality in buildings. Since the app can be enhanced to measure and place different components, the limits are set by you:

• Heating: furnaces, boilers, heat pumps, electric heaters.
• Ventilation: natural air flows or mechanically designed.
• Air Conditioning: from small window units to large central systems, typically using refrigeration cycles to transfer heat in or out of a building.

Use and benefits

Using a 3D space scanner in HVAC design produces seven concrete benefits:

• Accurate measurements that are crucial for designing HVAC systems that fit perfectly within the given space and function efficiently.
• Detailed mapping including walls, ceilings, floors, and any existing fixtures or obstacles.
• Improved design efficiency: simulate airflow, temperature distribution, and identify potential issues before installation, leading to better system performance and energy efficiency.
• Cost savings due to avoiding potential errors and minimizing rework, reducing material waste and labor costs.
• Enhanced collaboration that lets stakeholders, including architects, engineers, and contractors, review and analyze designs and plans.
• Retrofit and renovation: an accurate representation of the current state of the building, so HVAC systems integrate seamlessly with existing structures.
• Documentation and compliance: helps ensure the HVAC system complies with building codes and standards, and provides a reference for future maintenance or upgrades.

Other industries also benefit: construction and architecture for designing, planning, monitoring, renovating; real estate for virtual tours, maintenance, and regulatory compliance; manufacturing and industrial design for accurate product design and reverse-iterating with engineers; interior design for space planning and furniture identification.

In each of these industries, 3D space scanning enhances accuracy, efficiency, and collaboration, leading to better outcomes and cost savings.

So, what does the app do?

A top-notch app that allows real-time and accurate measurement of rooms and objects, with furniture recognition included.

Watch a live demo: https://usdz-threejs-viewer.vercel.app/

A bit of USDz

The acronym stands for Universal Scene Description (USDz), a package developed by Pixar Animation Studios. It has become a powerful tool on Apple devices, making it a must for digital creators working in augmented reality (AR) and virtual reality (VR).

USDz main features

One feature is layering and composition, which lets engineers and creators build complex 3D assets by combining layers of data. Different elements can be added and overridden to create the final object.

Another main characteristic is PBR (physically-based rendering) for materials and textures. It allows the creation of realistic and high-quality 3D content. Lagarsoft’s app recognizes furniture and context, meaning it can tell whether we’re recording the kitchen, living room, or somewhere else. It can also mimic properties of metal, plastic, glass, and the like by simulating the way light interacts with their surfaces.

Time for a break

If you’re looking to enhance your processes and see the potential in adding a USDz pipeline to boost visualization, talk to us. Functionalities are endless. Behind the product is a group of senior engineers working hand-in-hand with designers.

Check the end result: https://usdz-threejs-viewer.vercel.app/