Step 2. Prepare JT file for Web Toolkit

Table of Contents

• Installing CAD Exchanger SDK
• Generating CDXFB file using CDXFB Converter Tool
• Generating CDXFB file using Python
• Generating CDXFB file using SDK
• Displaying thumbnail on start page

Any file to be rendered with the help of CAD Exchanger Web Toolkit needs to be converted into a web-friendly format CDXFB. This can be done using CDXFB Converter tool or CAD Exchanger SDK.

For users who want to evaluate the functionality of the Web Toolkit without going into the details of using the CAD Exchanger SDK, it is recommended to use CDXFB Converter tool. More information about it can be found on the CDXFB Converter tool. However, with full-fledged operation after evaluation, it will still be necessary to use the SDK. For other purposes, the best solution is using CAD Exchanger SDK.

In this tutorial, we will first consider CDXFB Converter Tool usage to convert a CAD model to the native .cdxfb format and then we will take a look at CAD Exchanger SDK for conversions and thumbnail generation. If you need something more complex than just converting files, then CAD Exchanger SDK also should fit your needs.

‍Note: C# with .NET 5 will be used when writing this example. If you are interested in another programming language, please take a look at the CDXFB Converter and Offscreen Rendering examples.

Demonstration model

In our tutorial we will use Radial_Engine.jt file (model can be downloaded from this link). This file should be copied to data/models folder, created in Step 1.

‍Note: Thumbnail generation is only available using the SDK. If you're using CDXFB Converter Tool for this tutorial, save the image below on your computer to use as thumbnail:

‍Thumbnail must be located in <path-to-JT Viewer-folder>/data/thumbnails/Radial_Engine.jt.png

Installing CAD Exchanger SDK

You can obtain the latest version of CAD Exchanger SDK by signing up for a free evaluation on our website.

‍Note: CDXFB Converter tool is available in CAD Exchanger SDK 3.16.0 or higher

Generating CDXFB file using CDXFB Converter Tool

CDXFB Converter Tool is a command-line application based on cdxfbconverter. It was created to simplify the evaluation of the Web Toolkit functionality.

CDXFB Converter Tool located in SDK package:

• On Windows: <CAD-Exchanger-SDK-folder>\win64\vc14.1\bin\CDXFBConverter.exe
• On Linux: <CAD-Exchanger-SDK-folder>/lin64/gcc7/bin/CDXFBConverter

The license key for CDXFB Converter Tool application should be copied into the directory containing CDXFBConverter application.

To launch CDXFB Converter Tool:

1. Open Terminal or Command Prompt application.
2. Change directory to the sub-directory containing CDXFBConverter application, i.e. one of the directories listed above.
3. Launch CDXFBConverter with arguments:

CDXFBConverter -i "<path-to-JT Viewer-folder>/data/models/Radial_Engine.jt" \
               -e "<path-to-JT Viewer-folder>/data/cdxfb/Radial_Engine.jt.cdxfb"

Generating CDXFB file using Python

CDXFB Converter Tool is not delivered with the SDK for Python. This is due to the distribution of the SDK for Python using pip.

To convert a file to .cdxfb format please use the cdxfbconverter example downloaded from GitHub.

To run python cdxfbconverter example:

1. Copy license file (cadex_license.py) into root python examples folder.
2. Open Terminal or Command Prompt application.
3. Change directory to the sub-directory containing cdxfbconverter example.
4. Launch the example with arguments:

python cdxfbconverter.py "<path-to-JT Viewer-folder>/data/models/Radial_Engine.jt" "<path-to-JT Viewer-folder>/data/cdxfb/Radial_Engine.jt.cdxfb/scenegraph.cdxfb"

Generating CDXFB file using SDK

‍Note: The complete code of this program can be found in <CAD-Exchanger-SDK-folder>/examples/<programming-language>/conversion/cdxfbconverter folder.

Project preparations.

1. Create cdxfbconverter folder in JT Viewer directory created in Step 1.
2. Create a new project in Visual Studio (for example, ConverterProject project name).

   ‍Note : Uncheck the "Create folder for solution" checkbox, otherwise your folder structure will be slightly different.

   3. Copy license file cadex_license.cs into cdxfbconverter folder.
3. Unzip CAD Exchanger SDK (for example, to the cdxfbconverter/cadex/sdk/ folder).
4. In created Visual Studio project add the cadex_license.cs file and add references to the CadExCoreNet and CadExViewNet libraries.

‍Note:

• Path to the CadExCoreNet library is specified as ..\cadex\sdk\csharp\netstandard2.0\CadExCoreNet.dll
• Path to the CadExViewNet library is specified as ..\cadex\sdk\csharp\netstandard2.0\CadExViewNet.dll

C# CDXFB converter

First, create basic C# application which connects CAD Exchanger SDK and activates license key. Also need to add paths to native CAD Exchanger SDK libraries.

cdxfbconverter/ConverterProject/Program.cs

using cadex;
using System;
using System.Runtime.InteropServices;
 
namespace cdxfbconverter
{
    class Program
    {
        [DllImport("kernel32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        static extern bool SetDllDirectory(string lpPathName);
 
        static int Main(string[] args)
        {
            // Add runtime path to CAD Exchanger libraries (e.g. compiled with Visual Studio 2015)
            SetDllDirectory("../../../cadex/sdk/win64/vc14.1/bin");
 
            string aKey = LicenseKey.Value();
 
            // Activate the license (aKey must be defined in cadex_license.cs)
            if (!LicenseManager.Activate(aKey))
            {
                Console.WriteLine("Failed to activate CAD Exchanger license.");
                return 1;
            }
 
            return 0;
        }
    }
}

Next, use the universal reader to read and convert the model to the CAD Exchanger's native in-memory representation.

Program.cs

                 return 1;
             }
 
+            // Path to source model
+            string aSource = args[0];
 
+            // Path to destination directory
+            string aDest = args[1];
 
+            // Path to thumbnails directory
+            string aIMG = args[2];
+
+            ModelData_ModelReader aReader = new ModelData_ModelReader();
+
+            ModelData_Model aModel = new ModelData_Model();
+
+            // Opening and converting the file
+            if (!aReader.Read(new Base_UTF16String(aSource), aModel))
+            {
+                Console.WriteLine("Failed to open and convert the file " + aSource);
+                return 1;
+            }
+
             return 0;

Finally, save the model to CDXFB.

Program.cs

               return 1;
             }
 
+            ModelData_ModelWriter aWriter = new ModelData_ModelWriter();
+            ModelData_WriterParameters aParams = new ModelData_WriterParameters();
+            aParams.SetFileFormat(ModelData_WriterParameters.FileFormatType.Cdxfb);
+
+            aWriter.SetWriterParameters (aParams);
+
+            if (!aWriter.Write(aModel, new Base_UTF16String(aDest)))
+            {
+                Console.WriteLine("Failed to save the .cdxfb file " + aDest);
+                return 1;
+            }
+
             return 0;

Optionally, you can optimize the resulting file size by choosing the information saved to CDXFB format. For more information please refer to Optimizing CDXFB file contents.

Program.cs

             aParams.SetFileFormat(ModelData_WriterParameters.FileFormatType.Cdxfb);
+            aParams.SetWriteBRepRepresentation(true);
+            aParams.SetWritePolyRepresentation(true);
+            aParams.SetPreferredLOD(ModelData_RepresentationMask.ModelData_RM_MediumLOD);
+            aParams.SetWriteTextures(true);
+            aParams.SetWritePMI(true);
 
             aWriter.SetWriterParameters (aParams);

Generating PNG thumbnail

In our tutorial, we are also using a thumbnail as a preview of the 3D file. To enable that, we add the ability to output PNG to our application:

Setup parameters to display one of available representation.

Program.cs

+            ModelPrs_SceneNodeFactoryParameters aParameters = new ModelPrs_SceneNodeFactoryParameters(
+                    ModelData_RepresentationMask.ModelData_RM_Any);

Convert model into visualisation entities.

Program.cs

+            ModelPrs_SceneNodeFactory aFactory = new ModelPrs_SceneNodeFactory(aParameters);
+            ModelPrs_SceneNode aRootNode = aFactory.Create(aModel);
+            aRootNode.SetDisplayMode(ModelPrs_DisplayMode.ModelPrs_DM_Shaded);

Create scene and display all entities.

Program.cs

+            ModelPrs_Scene aScene = new ModelPrs_Scene();
+            aScene.AddRoot(aRootNode);

Setup offscreen viewport with transparent background and perspective camera.

Program.cs

+            ModelPrs_OffscreenViewPort aViewPort = new ModelPrs_OffscreenViewPort();
+            aViewPort.Resize(300, 300);
+            aViewPort.SetCameraProjectionType(ModelPrs_CameraProjectionType.ModelPrs_CPT_Perspective);
+            aViewPort.SetCameraPositionType(ModelPrs_CameraPositionType.ModelPrs_CMT_Default);
+            ModelData_Color aBackgroundColor = new ModelData_Color(0xf5f5f5);
+            ModelPrs_BackgroundStyle aStyle = new ModelPrs_BackgroundStyle(aBackgroundColor);
+            aViewPort.SetBackgroundStyle(aStyle);

Attach viewport to the scene. Apply scene changes to viewport and wait until all async operations are finished. Then fit and center model on the image.

Program.cs

+            if (!aViewPort.AttachToScene(aScene))
+            {
+                Console.WriteLine("Unable to attach viewport to scene");
+                return 1;
+            }
 
+            aScene.Update();
+            aScene.Wait();
 
+            aViewPort.FitAll();

Grab rendered frame into image.

Program.cs

+            if (!aViewPort.GrabToImage(new Base_UTF16String(aIMG)))
+            {
+                Console.WriteLine("Failed to write the file " + aIMG);
+                return 1;
+            }

Command line arguments

If running the application directly from Visual Studio, the working path is bin/Debug subfolder of the project. In that case you can use the following paths as command line arguments:

• ../../../../data/models/Radial_Engine.jt
• ../../../../data/cdxfb/Radial_Engine/Radial_Engine1.cdxfb
• ../../../../data/thumbnails/Radial_Engine.jt.png

Displaying thumbnail on start page

Finally, we should also update the start page to display correct thumbnail and file name.

index.html

 <body>
   <div class="model-container">
     <a class="model-card" href="viewer.html">
-      <img class="card-image" src="data/thumbnails/Model.jt.png">
-      <h4 class="card-title">Model.jt</h4>
+      <img class="card-image" src="data/thumbnails/Radial_Engine.jt.png">
+      <h4 class="card-title">Radial_Engine.jt</h4>
     </a>
   </div>
 </body>

With that, we should see Radial_Engine.jt model name and thumbnail on the start page:

---

< Step 1 Step 3 >