This post is the first one in a series where we intend to share some general considerations relevant when building interactive web applications with 3D data. We are going to cover the following topics:
- Use cases for 3D web apps and underlying technology for 3D display
- Architecture considerations that follow from operating 3D data
- Client-side tools for 3D data display
- Options for setting up the backend of 3D web apps
- Technologies for end-to-end web application creation
Why target the web with your 3D applications?
During the 2010s a trend has emerged to make applications for the web, not for the desktop. This isn't surprising because on one hand, the browsers and developer tools have progressively gotten better, but also because web apps are in a few ways more convenient both for developers and users.
Developers get universality, since web browsers are the most common execution platform in the world. A web application allows for much stricter control over code and other intellectual property, and enables licensing policies that are difficult to enforce when distributing binaries. Some maintenance challenges become a thing of the past (e.g. every client's environment is roughly the same and everyone is on the latest version of the app).
For the user it also means that local environment-related issues are much less relevant and they essentially boil down to what browser is being used. The hardware requirements become more relaxed, while the app and data within it can be accessed from anywhere.
When it comes to the 3D data though, it might be unclear whether the web is a good platform for that type of application. After all, depending on the extent of interaction with 3D data, they can be very heavy. However, the fact that now even the 3D modeling and CAD modeling software is available on the web, and that's arguably as heavy as the 3D apps get, should lift the concerns of feasibility.
What apps need 3D data?
There are categories of applications, which invariably have to deal with 3D data, such as the aforementioned 3D modeling and CAD modeling software. Aside from the actual modeling, the 3D web apps can be utilized for many related workflows:
- An online photorealistic rendering service could display a preview of the render to fine-tune the camera position and lens options and to apply materials.
- A 3D asset catalog can provide interactive samples and play animations contained in them.
- Web-based PLM and PDM systems need to display 3D models of parts for the user to conveniently navigate the catalog. They can also provide design review capabilities - showing the model to multiple concurrent users and allowing them to leave annotations on top of it.
- Numerical simulation tools display the analyzed parts and overlay the simulation results on top of them - computed airflow, heat distribution, deformation in response to load.
Outside of modeling or product design space, the opportunities are still plentiful to enrich the applications with 3D models:
- An online store instead of still images can show interactive 3D models of products and provide a configurator for the client to customize their order with options.
- A custom manufacturing shop can allow users to upload part models, analyze them under the hood for issues that could result in fabrication problems, and then display the analysis report or quotes for various fabrication processes.
- A museum can attract visitors by setting up a virtual tour and inserting 3D models of some items in its collection for the user to play around with.
If you sell a product, or a service, adding 3D data to your website enriches it. It allows you to either better showcase your products, or add flair and entice your potential clients.
How is 3D data displayed in web apps?
The idea of putting 3D models on web pages originated basically with the creation of the internet, right at the beginning of the 90s. VRML format, conceived then, attempted to provide a description of interactive 3D scenes embeddable into web pages. The display and evolution of VRML scenes were the responsibility of the VRML player, a browser plug-in, utilizing the graphics capabilities of the host machine.
The objective limitations of hardware and network bandwidth at the time played against the VRML and it never really gained traction. The websites too managed without 3D graphics during the 90s and 2000s. As the network and user hardware capabilities got to an acceptable level, it finally became feasible to put 3D data on the web. The standardization effort, driven by Khronos Group with participation from key browser vendors, eventually resulted in a WebGL specification - the de facto standard technology for 3D on the web.
WebGL is, roughly speaking, a port of OpenGL to the browser. More specifically, it is a set of JavaScript APIs that can render 3D scenes onto HTML canvas. These APIs are built directly into the browsers' JavaScript engines and don't require plugins. That's a good thing, since intrusive browser plugins of the past have a track record of security vulnerabilities. Additionally, a dependency on a plugin, a technology not included out of the box, would have limited the reach of your 3D-powered web app. Conversely, when you're writing a web app targeting sufficiently modern browsers, WebGL is already there - in all of them, meaning that developers can get to a wider audience and users can just open the website and have it simply work.
WebGL provides the ability to feed the GPU the meshes, apply textures and control the rendering process with shaders. This is quite a low-level approach, which stems from WebGL's similarity to OpenGL. In particular, it means that experienced graphics programmers can easily transfer their expertise and be productive on another platform. On the other hand, if one wanted to implement rendering of complex scenes from scratch, and also allow the user to interact with them, it would take a huge effort. Luckily, there are a few higher-level tools that simplify the usage of WebGL for rendering and scene interaction. We'll be considering them in a future post in this series, so stay tuned.
Summary
In this post we have explored the reasons why one may consider making a 3D web application, imagined the types of apps that may benefit from including interactive 3D data, and also considered the basic technology powering the 3D graphics on the web today.
In the next post in this series, we are going to explore the steps the 3D data has to go through to become a part of the interactive web app and the implications these steps impose on the architecture of the app.
This 3D visualization is powered by CAD Exchanger Web Toolkit - a library for interactive CAD data visualization. Find out more and request a free trial here.
Learn more:
How To Load 3D CAD Data Into Three.js. Part 1
How To Load 3D CAD Data Into Three.js. Part 2
Building 3D web applications with CAD Exchanger Web Toolkit
Next parts: