As time passed after publication of the previous blog on the topic of loading CAD data into three.js, several important updates have been accumulated which warranted a new post.
This post will cover:
- Use of the GLTF as an interim format\
- More details on the .cdxfb format used in CAD Exchanger Cloud\
- Detailed example of CAD Exchanger Web Toolkit
In addition to OBJ, STL and VRML mentioned in the previous blog, there is also GLTF (GL Transmission Format). The GLTF format is a “JPEG of 3D” format standardized and promoted by the Khronos group.
Support of GLTF export has been added in CAD Exchanger 3.7.0 along with a few other exciting features. Refer to this blog post for details.
GLTF comes in two flavors: JSON-formatted .gltf file bundled with .bin (binary file containing geometry) or as a monolithic .glb file.
To get GLTF from any input CAD file with the help of CAD Exchanger, you do just the same as was explained in the Part1 of this blog post:
A. Using CAD Exchanger Batch:
ExchangerConv.exe -i conrod.jt -e conrod.obj conrod.glb
B. Using CAD Exchanger SDK:
cadex::ModelData_Model aModel; cadex::JT_Reader aJTReader; aJTReader.ReadFile ("conrod.jt") && aJTReader.Transfer (aModel); cadex::GLTF_Writer aGLTFWriter; aGLTFWriter.Transfer (aModel) && aGLTFWriter.WriteFile ("conrod.glb");
Here is what the updated comparison table looks like:
|Product structure (hierarchy of assemblies and parts)|
|B-Rep (Boundary representation, or precise geometry)|
|Polygonal representation (tessellations, or meshes)|
|PMI (Product and Manufacturing Information)|
|Validation properties (bounding boxes, volumes, surface areas, centers of gravity)|
Among all above formats supported by three.js out-of-the box - STL, OBJ, VRML, GLTF – I would recommend the latter as its support by three.js seems to be the most powerful. Although VRML itself is slightly more feature-rich (thanks to user-defined properties), three.js does not take advantage of that.
When working on CAD Exchanger Cloud we had to design our own format that we could use to save the data in on a server and restore from on a client. We obviously could not use any of the above motioned formats supported by three.js (STL, VRML, OBJ, GLTF) as they are much more limited than what CAD files can generally contain. For instance, none of them is capable to contain B-Rep information, PMI or layers.
So we ended up developing our own format which would be highly efficient for cloud worfklows. Efforts in that direction resulted in birth of our proprietary format, which we called .cdxfb. It is highly compressed, multi-file format enabling to store entire 3D model with all retrieved supported data from the original CAD file.
The below table adds two formats introduced in this blog:
|60 KB||4.2 MB||2.7 MB||127 KB|
With growth of the original JT file size, the delta with the resulting .cdxfb tends to diminish. For instance, 1.05MB JT file is converted into 1.09MB .cdxfb file.
3. Detailed example of CAD Exchanger Web Toolkit
After publication of the previous post we had been working on updating our web-site and adding more relevant details on each product we offer. With that, we added a dedicated page on CAD Exchanger Web Toolkit (which we formerly referred to as “Web SDK” but decided to rename it to avoid confusion with “CAD Exchanger SDK”).
While documentation publication is still underway, let me share just a very short and simple code snippet demonstrating capabilities of displaying CAD files with the help of three.js and CAD Exchanger Web Toolkit:
const aScene = new THREE.Scene(); // Create model const aModel = new cadex.ModelData_Model(); // Model uses multiple external data, so requires provider for it. const dataLoader = async (theModelUrl, theObjId) => fetchFile(theModelUrl + '/' + theObjId); // Load model by URL. await aModel.loadFile(theModelPath, dataLoader, false /*append roots*/); // Convert model into three.js entities const aConverterParameters = new cadex.ModelAlgo_ThreejsConverterParameters(); const aThreejsConverter = new cadex.ModelAlgo_ThreejsConverter(aConverterParameters); aScene.add(await aThreejsConverter.convertModel(aModel));
To see this code in action please go to the ‘three.js’ example available through the above link.
Moreover, the following WebGL widget demonstrates using the above code right here, in HTML:
I hope to continue this blog post series by providing a more detailed example on how to display a 3D CAD file with the help of three.js. I’m going to demonstrate how to do this with the help of CAD Exchanger Web Toolkit and without it, so that you could get better understanding of both paths and choose the one that works best for you.
Please stay tuned – that shouldn’t be long ;-).