3D Pipeline: How to create web-ready 3D content

06/03/2024

Hendrik Lober

Hot Topics
Feature Spotlights
Blog

Why are 3D models five-dimensional? And what’s the secret behind our 3D pipeline? Take a look inside the engine room of the rooom platform.

When you browse online, you might think the world is flat and two-dimensional. But in reality, it's three-dimensional. So why shouldn't the internet reflect that? But fact is, even the websites of the most innovative and modern tech companies are mostly 2D.

Why 3D?

Online, there’s often no way to view products from all angles and in detail. We miss the tangible experience, the sense of dimension, and the assurance that an object will fit in our own living spaces. For businesses, standing out from the competition is crucial. One innovative way to achieve this is by creating impressive digital experiences in 3D, AR, and VR. However, this requires a platform and technology that allows anyone to create 3D content without specialized knowledge. That’s where rooom comes in. Our mission was to develop a 3D pipeline that transforms any 3D data into web-ready 3D content, enabling businesses to use it for their marketing purposes.

The challenges we were facing? 3D content needs to load quickly and be accessible on any device for businesses to use it effectively. Plus, not all 3D content is the same. There are different types of 3D data, varying by context, function, and application.

While it’s possible to create 3D models from 2D photos, this article focuses on processing explicit 3D data, which can include the following types.

3D Construction Data: CAD data includes precise geometries, material properties, and technical specifications created with CAD software. These serve as the foundation for manufacturing and quality control, with a focus on functionality and high precision.

CGI Data (Computer Generated Imagery): These models have an extremely high polygon count, high-resolution textures, and large data sizes, resulting in lifelike, photorealistic representations. They are created using specialized software for computationally intensive rendering of photorealistic images or videos, with a focus on graphic quality.

Real-Time 3D: This data is used for video games, Virtual Reality (VR), and Augmented Reality (AR). It allows for instant visual rendering and interaction without delay or latency, creating dynamic and immersive user experiences. This is often achieved using powerful graphics processors (GPUs) and specialized game engines like Unity or Unreal Engine, with a focus on interactivity.

Each of these applications is like an island; 3D models designed for one purpose cannot easily be used for another. However, since each sector can benefit from the other, our goal at rooom was to build bridges between these systems.

Why 3D models are actually five-dimensional

3D models are computer-generated representations of objects in a three-dimensional space, defined by their geometric structure and surface properties. In 3D modeling, surfaces are typically represented by polygons, which are triangles that serve as the basic units for depicting complex geometries.

Polygons are defined by vertices, that are connected by edges. A single polygon forms a surface, and by combining many polygons, the surface structures of the model are created. The number of polygons determines both the surface detail and the computational requirements of the model. Material properties, such as color, are stored in images. To link the 2D image with the 3D surfaces, they are combined into five-dimensional data points. Images attached to 3D models are called textures. These textures can store various data, such as roughness and glossiness, making 3D models essentially five-dimensional.

Integrate realistic 3D product viewers seamlessly into your website

3 Milestones in 3D Technology

Just as bridge builders rely on technical advancements, we needed key milestones in 3D technology to move closer to our mission. Initially, there was little standardization: different types of 3D data operated independently, and there were no standardized formats. Seamless integration or data transfer between different systems only became possible with the following developments:

Standardized Format in the 3D Industry: The introduction of the glTF (Graphics Library Transmission Format) by the Khronos Group made data exchange between different applications much easier. This advancement greatly improved interoperability and efficiency in transmitting and using 3D content in web-based applications.
Physically Based Rendering (PBR): PBR brought in a standardized system for depicting materials and surface properties based on physical accuracy. This enables realistic rendering under different lighting conditions.
Web-Based 3D Engines: These engines have made it possible to display 3D content directly in the browser, quickly and without additional software. Whether on a PC, tablet, or smartphone, they work across platforms, enable real-time rendering, and allow 3D content to be easily shared via URLs and embedded on websites.

3D Pipeline – The creation of web-ready 3D Models

Even with system standardization, a significant issue remains: there's still a gap. Functional applications and construction 3D data have a specific structure that doesn’t easily integrate with web-based applications. The data used in the CGI field is so extensive that it’s unsuitable for interactive displays. This created the need for a "3D Pipeline." At rooom, 3D data is imported and goes through several steps before it can be displayed as 3D models on websites. This process is known as “pipeline”.

Steps a 3D model goes through before being displayed in an online shop or on a website. — From dataset to web-ready 3D model – A look at the 3D pipeline

To generate web-ready 3D models from data, the following steps are necessary:

1. Data Conversion

The first step in the 3D pipeline is data conversion. This involves converting the original data formats, such as common CAD files, into a standardized intermediate format. We use glTF for this, as it is compatible with many 3D applications. Construction and machine data are built from mathematically calculated surfaces due to the required precision. Since these surfaces are not suitable for photorealistic rendering, they are converted into triangles in the first step of the pipeline. This conversion allows for efficient real-time rendering with enhanced material properties.

2. Data Reduction

In 3D modeling, surfaces are represented by polygons, which can make curved surfaces look jagged. To achieve truly smooth surfaces, many triangles are needed, often resulting in very large data sizes, especially with CGI models. The second step in the 3D pipeline tackles this by reducing the data size while maintaining detail. The level of detail is minimized to what's necessary, with less visible areas of the 3D model being heavily optimized. This process can shrink data sizes from millions of polygons to just tens of thousands, preserving the model's shape while making it more efficient.

3. Data Compression & Preparation for Real-time 3D

The next step is data compression. In the post-processing pipeline, various analysis algorithms are used to merge triangles into larger ones, maintaining the 3D model's shape quality. This process, called decimation, ensures that the ratio of image coordinates to textures remains consistent or is translated to a simpler layout. Afterward, textures are compressed at the format level and saved in different sizes. Any remaining metadata, unnecessary materials, or redundant information in the model are removed or compressed. Depending on the performance capabilities and connection quality, the appropriate texture size is delivered. This ensures that 3D models look high-quality while keeping data sizes low.

3D Furniture for your online shop – with AR view, annotations & animations

4. Display on the Platform

After uploading to the database, the prepared data, along with image information, called textures, can be loaded in the rooom platform. A virtual 3D space is created where the object is placed. A virtual camera is set up, which can move around the space and capture 60 frames per second. The camera is controlled by touchscreen input or keyboard and mouse, allowing users to interact with it.

For displaying the model’s surface, the geometry is rendered in white and then colored using the BaseColor texture. A 360° panorama is then loaded to calculate reflections on the surface of the 3D model. The Roughness texture determines how blurred these reflections are, while the Metalness texture defines whether certain areas appear metallic. Light sources in the virtual scene are calculated individually and added to the object's color. Finally, the surface color is combined with the precomputed light in the textures, making the 3D object appear in full detail. This process repeats 60 times per second for all objects, making data reduction crucial for optimal performance.

This interactive display also allows for real interaction with the model’s properties. Users can change and test attributes like color or material in real-time using the Product Editor.

The Future is 3D!

Make the most of 3D technologies with rooom's solutions. Our platform lets you easily create your own 3D content – whether you have existing 3D data or not.

What’s to come? Web-Based 3D and AI-Generated 3D Content

Easily configurable virtual 3D spaces, device independency, and high visual quality – this is what we need for the next stage of the internet. Therefore, we’ve integrated a web-based game engine with a powerful modular system and an optimized database, all tied together with an intuitive user interface. The result is an ecosystem where you can reuse your own 3D content, like objects or spaces, for various scenarios. And the best part? You don’t need any special skills. Our platform removes the technical barriers that have previously kept users from embracing immersive technologies, making them easier to use than ever.

A hot topic in the tech world is Artificial Intelligence (AI), and it’s also making waves in the 3D space. So, how does AI stack up against humans in creating 3D content? Currently, there are various research efforts exploring the extent to which entire 3D models can be created based on text, similar to image technology. Right now, AI-generated 3D models have low quality and resolution and can only represent simple surface properties like color. However, this is expected to change significantly within the next 3–5 years.

However, it's important to remember that AI, much like blockchain technology, has a massive performance problem: producing the high-quality images and text we expect from modern AI tools requires large server farms. Once the hype dies down, AI will become harder to finance unless the server load-to-subscription ratio improves significantly. This is why performance optimization for the same or higher quality of generated content is a major focus of current AI research. And in the case of AI-generated 3D content? With 3D models, there's an additional dimension, meaning the computational load is much higher. So, it will take some time before 3D powered by AI really takes off. But we are ready and excited for the groundbreaking developments AI will bring to the 3D space.

Share post on