Web-Based CAD Viewers
An article by Nikita Letov
Opening a 3D computer-aided design (CAD) model within a web-based service can be more challenging than one could think. This is mainly due to absolute or partial inability of existing online approaches to perform complex computations with appropriate performance.
However, as we don’t want to bring the whole CAD system online and only want to view CAD models, we reduce the complexity of the problem enough to have already existing and working solutions. Viewers in general are much simpler packages than GMKs and CAD-systems, mostly because they allow using the CAD viewing features without having the CAD design features.
There are many applications for web-based CAD viewers, but most of them are of engineering nature. For example, GrabCAD is a company that implemented web-based CAD viewers on their platform. GrabCAD is a free online platform that allows sharing of CAD files in various formats among its 4 million users. It allows not only to upload or download a CAD file, but also to preview it via either prerendered images or in the embedded 3D viewer. The GrabCAD users can use the search engine to find a CAD file of their interest by keywords or description, go through results by looking at rendered images of CAD models, and select the most suitable option among them for download.
This article can be of use for those who plan to have in a CAD viewer, or any other web-based 3D modelling plugin on their platform, or for anyone interested in how it all works. In this work, we’d like to cover the 3D viewers, explain how they work and discuss how to utilize them best.
Solution
The first thing we need to consider about how the solution should look like, is that we should be able to view CAD files just like we do that in CAD software on our PCs. The interface should be similar in many ways and intuitive for any user.
The second thing is that we want it on the web. That automatically suggests that the solution should most likely be in JavaScript, as it is one of the few programming languages with built-in support in all major browsers and definitely the most popular out of them all.
And, as mentioned, there are tools ready to be used — JS libraries — that are allow rendering of geometry on the web in case no actual CAD functionality and only viewer is required.
For example, xeogl is a JS library which serves as a web 3D engine for technical visualization and can be embedded in a website. xeogl allows opening 3D models in the GLTF file format on a webpage (see Figure 1). Moreover, xeogl supports the STL file format but to some extent, e.g. it does not support STL assemblies.
Another JavaScript library for CAD visualization is OpenJSCAD which allows modelling of 3D models either scripted in JavaScript (see Figure 2) or uploaded from an external file.
The three.js library is another example of a tool that can be used to open STL files (see Figure 3).
How Does It Work?
All that sounds great, but using these tools requires a bit understanding on how do they work.
Functionality
The CAD viewer’s functionality should allow almost the same functionality as the CAD software with actual design functions thrown away from it.
That being said, as the main user of our CAD viewer shall be someone from engineering, they should have no trouble in using it intuitively.
The basic functionality of the viewer includes:
- Rotating the part with left mouse button
- Zooming in and out with a mouse wheel
- Moving the part on screen without rotation with right mouse button
In some cases the interface is different, but this one is the most popular CAD software.
Framework
Geometrical modeling kernels (GMK) that are normally used in CAD software packages are large software components that require high-level programming features and thus normally are dynamic-linked libraries (DLL) written in the C++ language. GMK’s main purpose is to apply mathematical rules (mostly from linear algebra) to some data (a CAD file) so that the user can see the projection of the 3D model on a 2D screen and manipulate this data in numerous ways.
A GMK is usually developed by a large team of software developers and mathematicians for several years and thus are challenging to be developed by a small group of people. However, there are numerous GMKs that are open-source and available for implementation such as Open Cascade. Figure 5 shows the components that are often found in GMKs. The viewer — which is our main focus in this article — is responsible for showing the user what they want. The solver is something that is more related to standalone CAD software packages, as it is responsible for designing parts and supports operations such as extrusion, rotation, substraction, etc. The converter has to transfer the uploaded files into the native GMK format and other supported formats. There are more components, but these three are essential and common.
Since interactive 3D graphics needs to be rendered on the web, there has to be an API to do so. WebGL is one the most notable ones as it is written in JS and works in any browser. WebGL is essentially the same as OpenGL — a package used for viewing 3D models in many fields, starting with engineering and ending with video games. WebGL is simply a JS binding of OpenGL, so it has the same functionality, but in JavaScript and not C, and thus can be used for web-development.
The JS libraries mentioned in Section 2 serve as interfaces to WebGL — they provide sets of functions and classes which in turn call to WebGL and render 3D information in browser.
Let us consider xeogl which is used at GRAD4. Its architecture follows the pattern in Figure 6, though it is similar in other JS 3D modelling libraries. Here the Scene is the design space — this is where the Entity, the actual 3D model, is located and all the magic happens. The Entity has Geometry which defines its shape and position, and Texture which defines its color, how does it reflect the light, etc.
There are actually many more classes, like Camera which defines the user viewpoint and viewangle, but they are supportive and could be added if needed.
How to Use It Best
Having basic functionality is good, but having more useful functionality is better.
For example, the wire-frame view allows the user to see through the part which is convenient if the part is hollow or has lots of curvatures and pockets:
Enabling opacity settings helps with analyzing assemblies:
Specifying reflection intensity and roughness might help the user to distinguish materials, let’s say metallic from non-metallic:
Having a navigation cube in the corner such as the one in Autodesk Inventor helps the user to navigate in the design space and not get lost:
In other words, we should always think about the user and how they shall use the viewer. These and many other additional features, some of which haven’t been invented yet, that can result in positive user experience with the viewer and make it more convenient to use it.
The viewer of GRAD4
GRAD4 is an innovative technology company that standardizes and automates the outsourcing process for buyers and suppliers in the manufacturing sector. It has developed the best technological solution for all companies that have needs or manufacturing capabilities in CNC, sheet metal and welded assembly. A viewer integrated to their platform is a big plus for all their users as it provides visual information about the CAD file on the platform. Otherwise, the users would need to download the part and open it with their CAD system, which adds complexity that is better to be avoided.
xeogl is used at GRAD4 as the core engine for its viewer and there are reasons behind this decision. In OpenJSCAD, an external file, even in the STL format, is converted into JSCAD — an internal file format of OpenJSCAD. This converting takes significant amount of time, e.g. converting an STL-file of the Stanford Bunny (which is a sort of “Hello World” in computer graphics) takes approximately 30 seconds on an 8 GB RAM machine.
The three.js library looks oriented for computer graphics mostly as it provides numerous features for graphic design which are not required for engineering design and visualization, such as shaders and different rendering techniques. These techniques might unnecessarily affect technical visualization and make it slower than needed.
So we went with xeogl because it’s fast its primary purpose is to support geometric modelling in engineering. It’s not perfect, there is the rise of user’s computational expenses when opening a file with extremely complex geometry which, however, does not appear in practice much.
As already mentioned, the viewer’s functionality depends on the end users, what they expect of it and also some features they don’t expect but still glad to have them.
With this in mind, the CAD-viewer of GRAD4 has features that suit the best to our customers. For example, the user can additionally take a snapshot of the part as in encircled in red in Figure 12 and this snapshot will be used as a preview for the part for manufacturers to browse. It is important as it helps the buyers not to get lost in the list of parts they want to have manufactured, and it helps the manufacturers with finding the parts they can manufacture fast and of great quality.
The user could also press buttons 1–6 to get one of the 6 main projection views as seen in Figure 13. Note that the viewer also supports various colors which are predefined by the user in the CAD-file they have.
Moreover, in case you lose your part in the Scene, double-clicking it would trigger the fit-to-view function that shall return the model where it belongs.
As you can see, in GRAD4 the experience that the user get from the viewer heavily depends on the user itself, so it is important to understand which features required by the user and on how the viewer is to be used.
Conclusion
Since the JS viewers are web-based, the issue of availability across various platforms and operating systems is avoided as no specific prerequisite software has to be installed prior using it (except for a web-browser of the user’s preference).
There are many ways the viewers can be improved though. For example, it becomes a common practice in large companies to support their viewers with cloud computing. The viewer of the previously mentioned GrabCAD is supported by cloud computing which transfers all the computations needed for the part rendering from the user to the cloud. Going further, the agile CAD software approach of Onshape — an whole online CAD software that allows creating parts and assembles similar to conventional stand-alone CAD system — wouldn’t be possible without utilizing cloud services.
Moreover, some of those platforms are available on portable smartphone devices, e.g. the Onshape application is available for both Android OS and iOS which suggests that GRAD4 can eventually has its own application for smartphones. Note that both Onshape and GrabCAD provide services that differ from the ones that are require in GRAD4: there is no specific need in full-scale CAD functionality (as in Onsghape) and the database of CAD files should include actual parts produced by manufacturers, i.e. GRAD4 is not a platform for sharing of CAD file designed by students and amateur engineers (as GrabCAD is) but a platform for the actual buyers to upload the CAD-file of a part they want to have produced and the actual manufacturers that can produce the part.
A 3D viewer becomes a common and crucial component for online platforms that work in/for any engineering industry. We covered how the web-based viewers are structured, how can they be used, and how to adapt their functionality according to particular needs.
About the author
Nikita is a Mitacs Research Intern at GRAD4. His main responsibility is development and support of the 3D CAD viewer in the platform. He has experience of applying geometric modeling tools at Airbus and C3D Labs in his past. He is a Ph.D. candidate in mechanical engineering at McGill University and holds a degree in airspace systems (M.Sc.) and manufacturing automation (B.Sc.). Currently working at the Additive Design and Manufacturing Lab on novel geometric modeling and design tools to support complex geometries.
