Instructions for Loading glTF

---

Overview

In real projects, for certain cases, we may need to load 3D models with animations using SuperMap iClient3D for WebGL. The variety of 3D modeling software becomes a challenge because they produces models with different formats. Also the varied models with complex info including background, lighting, cameras, etc compromise the efficiency of loading and performance of displaying.

glTF™ 1.0 (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by WebGL, OpenGL ES, and OpenGL applications.

To import 3D models from a certain 3D modeling software to your SuperMap iClient3D for WebGL application, you will follow the three main steps:

1. Export as DAE Model
2. Convert DAE to GLTF
3. Load Model Data

Instructions

Here we demonstrate the steps by loading a .max model with animation.

Export as DAE Model

Introduction

In this step, you will use 3ds MAX software to export your *.max model to DAE format, which is a 3D exchange format.

When you export the model in 3ds MAX, remember to use ”OpenCOLLADA (*.DAE)” instead of “Autodesk Collada (*.DAE)“ because Autodesk Collada (*.DAE) might cause a failure in exporting model textures. You might need to download a DAE export plugin for 3ds MAX.

The plugin we use here in this sample is: “COLLADAMax.dle“.

Basic Steps

(1). Install the plugin: after you download the plugin, save it in the "plugins" folder of the 3ds MAX directory. In this sample, the path is: “C:\Program Files\Autodesk\3ds Max 2014\plugins”, as shown below.

(2). Restart 3ds MAX, open your 3D model and select “|Export”. Specify the path and name and the save type as “OpenCOLLADA(*.DAE)“, as shown below:

(3). Click "Save", and in the dialog box of “OpenCOLLADA Export”, select ”copy Images” and click OK.

Result

The DAE model exported will be saved in the specified path together with a folder titled "images" where the texture images are saved.

2. Convert DAE to GLTF

Introduction

In this step, we will use the conversion tool colladaTogltf.exe to convert the DAE model to glTF format. You can get the conversion tool colladaTogltf.exe here: https://github.com/KhronosGroup/glTF/wiki/Converter-builds

You don't need to install the conversion tool you download. Just following the steps below to operate:

Basic Steps

(1) Press Windows+R to open the Run dialog, and input "cmd" to open the command line dialog box.

(2) Input the command line to enter the folder where colladaTogltf.exe is: “cd %exePath%”.

(3) Enter the command line: collada2gltf.exe –f %daePath% -e

• %daePath% is the full path for the DAE model. Here in this sample, the path is: “ E:\models\models\diaota\diaota.DAE ”;
• "-e" means a gltf file will be converted to, with the model geometries and texture info.

(4) Press Enter to execute.

Result

The glTF model generated will be saved in the same path with the DAE model.

Note that the models of glTF format have smaller sizes and enhance the speed of data transmission over Web.

3. Load Model Data

Introduction

SuperMap iClient3D for WebGL uses a KML file to load *.gltf models. Here, the “KML_crane.html” sample loads the models from the path saved in the "crane.kml” file. This step shows how to modify the model path in the KML file.

Basic Steps

(1) Copy the glTF model data to the resource folder on the server. The path is: %SuperMap iServer_HOME%/webapps/%WebGL Package% /examples/SampleData/models

(2) In the path %SuperMap iServer_HOME%/webapps, in the folder “examples/SampleData”, open the “crane.kml“ file in Notepad. Modify the model path in the KML file.

(3) Open the "KML_crane.html" page in the browser by typing: http://localhost:8090/%WebGL Package%/examples/ KML_crane.htm

Result

Open the web page, and the camera will fly to the terrain data as shown bdlow: