In 2018, I worked remotely with SolidComponents™ in Halmstad, Sweden, to develop the WebGL-based 3D CAD viewer within their online engineering components catalog.

We developed the CAD viewer on xeogl, an open source WebGL library I created for developing 3D model visualization applications in Web browsers without using plugins.

In this article, I’ll describe some of the features that I implemented within the CAD viewer.

Contents

• The Client
• Requirements
• Solution
  • 3DXML
  • Wireframe

The Client

SolidComponents™ is a company based in Halmstad, Sweden that provides an online catalog of engineering components. For each component, the catalog provides a static image, a table of attributes, and a downloadable 3DXML CAD model that was originally created in SolidWorks.

Requirements

• Create a WebGL-based viewer for users to interactively view the 3D model of each product in the catalog
• Render using realistic, physically-based materials
• Render wireframe and transparent views

Solution

Using xeogl

I implemented the SolidComponents CAD viewer as a wrapper class around xeogl, an open source WebGL library I created for 3D visualization.

3DXML

I chose to make the viewer load the downloadable 3DXML model itself, rather than load some other format from SolidWorks, such as STL or OBJ. This way, we’re guaranteed to have a rendition that closely matches the way the 3DXML model looks in SolidWorks. Also, STL and OBJ were not able to express the same materials that we would see in the 3DXML.

A nice feature of 3DXML is that all the files that comprise the model (ie. scene, geometry and material descriptors) are packed into a single ZIP archive that can be loaded in a single HTTP request. Internally, the viewer then unpacks the files within the ZIP archive, converts the XML to JSON, and then parses the JSON using a recursive descent parser, to create the various 3D objects within the xeogl scene graph.

Wireframe

Often, a 3DXML file contains multiple representations of a model, such as solid-shaded and wireframe. In this case, however, we could only rely on it to contain a solid triangle mesh representation. Therefore, for wireframe views, I’m relying on xeogl to auto-generate the wireframe representation from the triangle mesh.

For each geometry, xeogl creates a second wireframe mesh that contains the edges between adjacent triangles whose surface normals deviate from each other by a given threshold, ie. the “hard” edges. This technique eliminates the “inner” edges, which are edges shared by triangles that are part of the same faces.

Wireframe with inner edges	Inner edges eliminated

(work-in-progress)

---