xeolabs bio photo

xeolabs

Lindsay Kay

3D software engineer / WebGL developer

Twitter LinkedIn Github


My chapter on SceneJS for OpenGL Insights is now free to download!

SolidComponents™ Online CAD Viewer

The Client

SolidComponents™, based in Halmstad, Sweden, provides an online catalog of engineering components.

Requirements

  • Create a WebGL-based viewer for users to interactively view 3D CAD models of products from the client’s online catalog
  • Load files exported from SolidWorks
  • Realistic, physically-based materials
  • Wireframe and transparent viewing modes

Solution

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 3DXML as the viewer’s file format, since it’s the native SolidWorks format and represents the model exactly as it appears in SolidWorks.

Wireframe

For wireframe views, I’m relying on xeogl to auto-generate wireframe meshes from 3DXML’s triangle meshes.

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)

Contents