This blog post will present three techniques to improve 3D visualizations of mechanical parts published on the web. Web users expect standard and intuitive user interaction patterns without a steep learning curve or need a User’s Manual to read and use the links on that page. Standard web content practices give users familiar patterns for hyperlinks, for text search features, and audiovisual playback; this article is a start at establishing conventions for interactive 3D content delivered on a web page. The examples used here are of mechanical parts and assemblies, but the techniques may be applied to other type of 3D content such as immersive scenes or data visualizations. An inspiration for this work is the identification of software design patterns as described in the influential book Design Patterns: Elements of Reusable Object-Oriented Software – the Gang of Four Design Patterns book. As in the case of software design patterns, the patterns presented here do not represent an original concept heretofore unseen in  computer science; rather the goal is to identify and name a pattern or technique; isolate its use in a simple but real example, and suggest guidelines for how it is to be used. The patterns are independent of the execution or implementation method but are implemented here using X3D models rendered using JavaScript based X3D viewers X_ITE and X3DOM in HTML5 web pages and rendered using WebGL. X3D is an ISO standard format for interactive 3D scene graphs, with freely available specification documents, and viewable with multiple X3D viewers on many platforms including within web pages on the common web browsers.

Controlled Motion

Controlled motion is the internal motion or rearrangement of the elements of the scene under user control, as illustrated in Figure 3. For a mechanical part the motion can be used to clarify the structure of several parts in an assembly and may even be used to illustrate the specific motions to assemble or disassemble a product as part of fabrication or maintenance. The goal of this design pattern should be to balance  freedom of motion – allowing the user, for example, to drag parts from place to place; with clarity of presentation; and preventing the user from putting the scene in an unrecognizable state. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Interaction

Feature interaction allows the user to control the visualization with a pointing device, such as a mouse, aimed at a feature of a part, for example the body of a part or a smaller shape feature of a part such as protrusion, hole, or edge. This is demonstrated in Figure 2 demonstrating interacting with a mouse-over, bringing up a label; and a mouse-click which removes the part from the rendering, exposing interior components. This pattern is not specifically a hyperlink pattern, if hyperlink means the viewer is presented with or navigates to new content. Following a hyperlink is just one form of control that can be implemented using this pattern. Further development of this pattern  will require consideration of the many type of interaction made possible by pointing devices such as simple pointing; clicking, possibly supplemented with multiple buttons and options; dragging; and gestures.  These many forms of interaction possible with a pointing device present the challenge of signaling to the user what types of interaction are available in an interactive scenegraph and what are the results of this. A further complication is that pointing device interaction may also be expected to have other uses; for example a dragging a mouse over a 3D scene may be expected to change the users viewpoint on the scene  or may be expected to scroll the entire webpage in which the 3D scene is embedded.

 

 

 

Visibility

Selective visibility is a technique to reduce distracting clutter in a visualization by automatically removing elements from the displayed scene when those elements do not contribute useful information because of their placement. It is distinguished from visibility controlled by the user with explicit user interface controls. An example of this technique is in Figure 1, combining a solid model of a part with 2D drawings of the part in standard orthographic projections. The purpose of this combination is to combine the detailed definition of part dimension, tolerances, and surface features possible with 2D line drawings with the explicit communication of 3D relationships among the part features enabled by a navigable 3D visualization. A potential drawback of this combination, in which the 2D line drawing positions are fixed to the part body, is that those drawings become distracting and unreadable if viewed near edge-on, or even in reverse from the back-side, as the viewers viewpoint changes. The solution to this problem is to remove the drawings from the visible scene under those conditions; and this can be done automatically as the viewer’s viewing position changes using the Environment Sensor nodes defined in X3D. The ProximitySensor node allows the scene author to define a volume of space and to specify event handling actions when the viewing position enters and leaves this volume. For the pattern of selective visibility there is a defined volume of viewing space for each 2D drawing element in the scene, from which viewpoints the 2D drawing is reasonably lined up with the corresponding section of the 3D model. An important feature of the selective visibility pattern is that the visibility is automatically controlled by the rendering engine under logic prepared by the scene author. It is also possible to allow the user to explicitly control visibility using check-boxes or some other toggling user control. This option will be usable as long as the user can understand the viewing options available, but with the option of controlling N scene elements that can be switched between visible and non-visible the user has essentially viewing options to understand, quickly becoming incomprehensible. It will be important to control showing and hiding elements as much as possible automatically and using understandable rules of visibility.