1 Introduction

As CAD applications such as Onshape [1] and Tinkercad [2], run on the web, CAD designers can design and review modeled products through a web browser without specific software. CAD designers use a two-dimensional display for the design process. However, there is a difference between a CAD model and an actual product, because it is difficult to express the depth information of a 3D CAD model via a 2D display. Although designing a 3D CAD model on a 2D display is less intuitive, CAD designers are accustomed to viewing 3D product designs with spatial information such as width, height, and depth using 2D displays. However, CAD reviewers who do not have empirical knowledge experience difficulties when examining the model design and making important decisions using 3D-projected CAD model with 2D displays.

Various types of stereoscopic 3D display such as 3DTVs, autostereoscopic multi-view displays, and autostereoscopic super multi-view (SMV) displays have emerged [3]. People can view 3D content on autostereoscopic displays without a wearable device; however, these displays are not widely used because the amount of content available for them is currently small and they mostly use images or videos without user interaction. Facilitating the use of autostereoscopic displays will require content that can take full advantage of the medium. Seo et al. [4] proposed a webizing SMV content rendering method that renders 3D content according to various types of SMV display profile on the web to create an emergent 3D content ecosystem. However, their method focuses on rendering content without various types of user interaction. In this paper, we propose a webized interactive CAD review system using SMV autostereoscopic displays that provides an immersive CAD model review environment. The content for the display is described by web technologies such as HTML5, CSS, and JavaScript, and the proposed method supports hand gestures-based user interaction for the SMV display environment. The proposed system renders the content on a web browser and handles user interaction using JavaScript.

2 Our Method

We design a system architecture for an interactive CAD review system on the web, as shown in Fig. 1. The webized content renderer is implemented based on the webized SMV content rendering system [4] and the CAD review web application has two user interfaces: the webized 3D annotation editor and the webized SMV CAD viewer. The CAD designer uses the webized editor to add a text, image, or video annotation to a CAD model. The CAD reviewer uses the CAD viewer to check or review the CAD models with various annotations.

Fig. 1.
figure 1

Overview of the architecture

Full size image

The CAD files are stored in the content store provider and linked in HTML documents that have various types of annotations for the CAD files. The content manager loads the CAD files and HTML documents, and the webized content renderer renders a final scene based on the display profile that describes characteristics of the SMV or 2D displays.

To support user interaction, the proposed system webizes interaction events according to the webized interaction method [5]. The user interaction events are synchronized between the webized 3D annotation editor and the webized SMV CAD viewer in real-time. The proposed system provides two types of interaction: mouse/keyboard and hand gesture interaction, according to the display type as shown in Table 1. We chose four basic interactions from TC184 Visualization Requirements [6]: selection (requirement 5), zooming (requirement 7), camera rotation (requirement 8), and transformation (requirement 16).

Table 1. User interaction for the CAD review system based on the TC184 requirements [6]
Full size table

A user selects a 3D object in 2D display mode by clicking the left button of the mouse on the 3D object. When the user points a 3D object using a finger in SMV display mode, the 3D object is selected. The user can zoom in and out to change the scale of the CAD scene by scrolling up and down with the mouse wheel in 2D display mode or swiping a hand from left to right or from right to left in SMV display mode. The user can also rotate the camera viewing perspective by dragging the mouse with a left click in 2D display mode or move their hand with two fingers in SMV display mode. Moving a 3D model first requires a preceding selection interaction. In 2D display mode, the system shows an axis helper and the user drags the axis helper along the x-, y-, or z-axis to move the selected object. In SMV display mode, the system highlights the selected object and the user swipes their hand to a new position while pointing at the object.

3 Experimental Results

We present an example scenario of a prototype implementation to verify our approach’s usefulness, as shown in Fig. 2. In this scenario, the CAD designer on the left side uses the webized 3D CAD annotation editor with a mouse device on the 2D display. The CAD reviewer on the right side checks the CAD model using a webized SMV CAD viewer with hand gestures for the SMV display. The system uses the leap motion controller to recognize hand gestures. When the reviewer has an idea and and suggestion with which to improve the model, the CAD designer adds an annotation to the model using the CAD annotation editor. The designer can use all resources on the web for annotations, and although the CAD designer and reviewer are located together in this experiment, they can be located remotely. They discuss and comment on the CAD model and add their opinions via annotations. The annotation editor and CAD viewer in the proposed system synchronize 3D models, their annotations, and the camera viewing perspective and position in real-time when the designer or reviewer changes the CAD scene via user interactions.

Fig. 2.
figure 2

Prototype implementation of the proposed system

Full size image

Figure 3 depicts examples of the annotation editor on the 2D display. The annotation editor shows CAD models and their annotations in the middle of the scene. The menu bar is located at the top right-hand corner of the editor to add, remove, and update CAD models and their annotations. The annotation editor loads an initial engine CAD model, as shown in Fig. 3(a). The “Model tree” menu bar shows a list of the CAD models and their annotations in the CAD scene. The CAD designer can select an “Add assembly” button on the “Tools” menu bar to add a propeller CAD model, as shown in Fig. 3(b), the CAD designer can add an annotation for the propeller assembly by clicking the “Add comment” button, at which point the editor shows a WYSIWYG HTML editor, as shown in Fig. 3(c). After an annotation is added, it is attached to the scene. The CAD designer can toggle the visible status of all annotations by clicking the “Show/Hide annotations” button at the top left-hand corner of the editor. The user interaction events change the scene of the annotation editor, and the webized SMV CAD viewer also synchronizes interaction events in real-time.

Fig. 3.
figure 3

Examples of the webized 3D CAD annotation editor: (a) loads an engine CAD model, (b) adds a propeller assembly CAD model, (c) adds an annotation for the propeller assembly, and (d) hides all annotations.

Full size image

The CAD reviewer views an autostereoscopic image with a sense of depth through motion parallax using the SMV CAD viewer on a SMV display and changes the position, rotation, and scale of the content via hand gesture interactions, as shown in Fig. 4. The reviewer can watch different rendering results for the 3D CAD models and their annotations seamlessly in the viewing zone using the motion parallax of the SMV display. Thus, the CAD reviewer, a non-CAD expert without experience in CAD applications, can intuitively understand the CAD model through the SMV display using motion parallax.

Fig. 4.
figure 4

Review examples using the webized SMV CAD viewer by moving viewpoints: (a) the movement trajectory of the CAD reviewer and (b) reviewer’s views at each position.

Full size image

4 Conclusion

In this paper, we have proposed a webized interactive CAD review system that uses SMV autostereoscopic displays to provide an immersive review environment through motion parallax. The proposed system uses all resources on the web for annotations, and it supports suitable hand-gesture-based interaction methods for SMV autostereoscopic displays at a long viewing distances. As a result, non-CAD experts can intuitively understand 3D CAD models. In the future, we will conduct a user study to evaluate our proposed system.