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.

Besides, 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… well, the app then transforms these scans into an easy-to-read 3D-model with its specific measures. Voilá!

But before talking about its pros, let’s go savvy.

To create this app we used RoomPlan API. A new Swift API that utilizes the camera and LiDAR Scanner on iPhone and iPad to create a 3D floor plan of a room.

And then, we exported the scan as a USDz file. This is a 3D scene representation format from Pixar Animation Studios.

Using Python we converted that USDz into a json representation compatible with Three.js. It involved moving from a backend or scripting environment to a frontend, web-based, 3D rendering framework.

You might be wondering why it was a necessary move. Here you’ll find the main reasons:

First and foremost, Three.js enables the creation of interactive 3D graphics in the browser, ideal for interactive 3D-model-apps. And, it’s best when it comes to real-time rendering.

Second, high-quality 3D graphics make apps more attractive. Users can interact with 3D content instantly without extra software, enhancing accessibility and engagement.

Third, you can access it on multiple platforms, such as: desktops, tablets, smartphones. And, a plus… you don't need to install additional plugins or software.

And last but not least, it belongs to a rich ecosystem. And, a bonus… it seamlessly integrates with HTML5, CSS3, and JavaScript frameworks (e.g., React, Vue.js).

You can find it on our webpage



Practical Use Cases

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

One visual sample case is when HVAC systems come into the game. 

HVAC stands for Heating, Ventilation, and Air Conditioning. These are responsible for regulating the temperature, humidity, and air quality in buildings. 

So, since the app could be enhanced to measure and place different components, the limits are set by you:

Heating: including furnaces, boilers, heat pumps, and electric heaters. 


Ventilation: can be natural air flows or mechanically designed


Air Conditioning: they can vary from small window units to large central systems. They typically use refrigeration cycles to transfer heat from the inside to the outside of a building.

Use and Benefits

By using a 3D space scanner in building HVAC systems you’ll find lots of benefits for 7 main reasons:

  1. Accurate measurements which are crucial for designing HVAC systems that fit perfectly within the given space and function efficiently.
  2. Detailed mapping including walls, ceilings, floors, and any existing fixtures or obstacles.
  3. Improved Design Efficiency allows you to simulate airflow, temperature distribution, and identify potential issues before installation, leading to better system performance and energy efficiency.
  4. Cost Savings due to avoiding potential errors and a minimized need for rework. Reducing material waste and labor costs, hence making the project more cost-effective.
  5. Enhanced collaboration allows stakeholders, including architects, engineers, and contractors to overview, analyze and see designs and plans.
  6. Retrofit and Renovation: it provides an accurate representation of the current state of the building, allowing for the design of HVAC systems that integrate seamlessly with existing structures.
  7. Documentation and compliance help ensure that the HVAC system complies with building codes and standards, and it provides a reference for future maintenance or upgrades.

To sum up, using a 3D space scanner in the development of HVAC systems enhances its process and improves overall project outcomes.

But, when we expand our scope, we can also imagine this app boosting other industries such as:

Construction and Architecture for designing and planning, monitoring and tracking the construction process, and also possible renovations and easy-to-adapt iterations.

Real Estate in the creation of virtual tours for potential buyers, doing an exhaustive maintenance follow up for admins, and meeting regulations and norms accordingly.

Manufacturing and Industrial Design can benefit from this in product design by creating 100% accurate measures, and iterating in reverse with engineers and designers. Plus, a thorough QA.

Interior Design uses space planning to help designers create layouts and visualize changes, ensuring that designs are practical and aesthetically pleasing. The app also allows and predicts 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?

Well, what it all boils down to is a top-notch app that allows you to do real-time and accurate measurement of rooms, objects, and it also brings furniture recognition into the formula.


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


A bit of USDz

To start with, let’s see what the acronym stands for: Universal Scene Description (USDz). A package, developed by Pixar Animation Studios.

It has become a powerful tool for and on Apple devices, making it a must for digital creators working in the augmented reality (AR) and virtual reality (VR) space.

USDz main features

One of the features is layering and composition, allowing engineers and creators to build complex 3D assets by combining layers of data.

Diverse types of data can be used without being tattered. Different elements and features can be added up and overridden to create the final object.

We urge you to keep on exploring and digging in, here you’ll see handy documentation and examples to use and apply taken from Moana’s movie.

So, there’s always a way to take it up a notch. By collaborating and adding valuable-knowledge to the community!

Another main characteristic is PBR, which stands for physically-based rendering, in this case materials and texture. It allows the creation of realistic and high-quality 3D content.

Lagarsoft apps recognizes furniture and context, meaning it can tell weather we’re recording the kitchen, living room, or else.

It could also mimic properties of metal, plastic, glass, and the like if you want to up the ante. This could be done due to the simulation of the way light interacts with their surfaces.

Go explore or ask us!

 

Time for a break

So to round up, if you’re looking to enhance your processes and see the potential in adding a USDz app to boost visualization, it’s time you contact us!

There’s no doubt this app comes into the table as a game changer. Functionalities are endless, but do you know what the best part is? 

Behind the product, there’s a group of A-level engineers working hand-in-hand with designers to up the game! 


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

Read more