# How to Import Resources

This section describes how to import resources using \[ Import Resources... \] from \[ Import \] on the menu bar.

<div drawio-diagram="6871"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-09/drawing-4-1727160599.png" alt=""/></div>

#### Import File Formats

The file formats to be imported when using this menu are as follows

- Image files (`*.bmp, *.jpg, *.jpeg, *.gif, *.tga, *.png, *.dds, *.ktx, *.hdr, *.exr`)
- Font files (`*.ttf, *.ttc,*.otf, *.fnt, *.fbm, *.*`)
- Shader files (`*.vert, *.frag`)
- SVG files (`*.svg`)
- FBX files (`*.fbx`)
- glTF files (`*.gltf, *.glb`)
- Icon files (`*.bmp, *.ico, *.jpg, *.png`)
- Script files (`*.lua`)

In addition to the above, Photoshop file (\*.psd), Adobe XD file (\*.xd), Axure RP file (\*.rp) and Sketch file (\*.sketch) can also be imported. For more information on these, please refer to <span style="color: rgb(230, 126, 35);">[Smart Importer](https://doc316en.candera.eu/books/import-of-resources/chapter/smart-importer "Smart Importer") <span style="color: rgb(0, 0, 0);">chapter</span></span>.

<p class="callout info">For Font files, by selecting **Font files** during file selection, they can be imported as fonts regardless of their extension. For more details, please refer to the explanation <span style="color: rgb(230, 126, 35);">[here](#bkmrk-image%2C-font%2C-shader%2C-1)</span>.</p>

<p class="callout info">With CGI 3.14 or later, <span style="color: rgb(230, 126, 35);">[skinning](https://doc316en.candera.eu/books/import-of-resources/page/skinning)</span> animations can be played back by importing skinning FBX or glTF files.</p>

<details id="bkmrk-gltf-file-format-sce"><summary>glTF file format</summary>

SceneComposer supports following glTF file formats when importing:

<div class="contents" id="bkmrk-gltf%3A-this-points-to"><div class="contents"><div class="textblock">- glTF: This points to external binary data (geometry, key frames, skins), and images.
- glTF-Embedded: This embeds base64-encoded binary data, and images inline using data URIs.
- glTF-Binary: In Binary glTF, a glTF asset (JSON, .bin, and images) can be stored in a binary blob.

</div></div></div><p class="callout info">For more detailed information on the file formats, please see <span style="color: rgb(230, 126, 35);">[the Khronos website: GLB File Format Specification](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#glb-file-format-specification).</span></p>

</details><details id="bkmrk-about-.ktx-file-form"><summary>About .ktx File Format</summary>

The following compressed image formats are supported:

<div class="contents" id="bkmrk-etc2compressedrgbfor"><div class="contents"><div class="textblock">- Etc2CompressedRgbFormat
- Etc2CompressedSrgbFormat
- Etc2Alpha1CompressedRgbaFormat
- Etc2Alpha1CompressedSrgbaFormat
- Etc2EacCompressedRgbaFormat
- Etc2EacCompressedSrgbaFormat

</div></div></div>To use this type of format, first of all it is necessary to convert an image with a different format (.tga, .gif, .psd, .bmp, .pgm, .png etc.) in a .ktx file. The next tools support generating KTX files:

<div class="contents" id="bkmrk-texgenpack-mali-text"><div class="contents"><div class="textblock">- Texgenpack
- Mali Texture Compression tool
- Ericcson Texture Compression Tool

</div></div></div>This tool compresses texture images to the Ericsson Texture Compression (ETC/ETC2) and Adaptive Scalable Texture Compression (ASTC). The available output file formats are .pkm - that can contain compressed textures - and .ktx – which allows the compression of a 2D texture with all its mipmap levels.

After the conversion is done, the .ktx resulted file can be imported in SceneComposer by following the same flow as in the case of other image formats.

<div class="contents" id="bkmrk-in-the-case-of-a-con"><div class="contents"><div class="textblock"><dl class="note"><dd><p class="callout info">In the case of a converted .ktx file which is imported in the SceneComposer application, the usage of the "DefaultBitmapConverter" property - available for any usual .bmp image - is not possible.</p>

</dd></dl></div></div></div></details><details id="bkmrk-about-bitmap-font-bi"><summary>About Bitmap Font</summary>

Bitmap fonts are supported by SceneComposer. In order to use bitmap fonts, the SCHost.dll must be compiled using BitmapFont font engine. Only one font engine can be active at a time in an SCHost.dll.

The user can import 2 types of files as bitmap fonts:

<div class="contents" id="bkmrk-.fnt-%28windows-font-f"><div class="contents"><div class="textblock">- .fnt (windows font files) - are converted to bitmap fonts
- .fbm - already converted bitmap font files

</div></div></div>When a font is imported, following specific property will be set:

<div class="contents"><div class="contents"><div class="contents"><div class="contents"><div class="textblock">- Source file names: specifies the name of the file which was imported - helps the user identify a font

</div></div></div></div></div><div drawio-diagram="5936"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170340.png" alt=""/></div>

</details><p class="callout warning">On OpenGL ES1.1 platforms, such as Traveo2, it is not possible to perform import operations on shader files, SVG files, FBX files, and glTF files.</p>

---

#### Import Operation

You can open the Import Dialog to proceed importing resources in one of the following three ways.

##### Menu Bar

Select \[Import\] &gt; \[Import Resources...\] from the menu bar.

<div drawio-diagram="6872"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-09/drawing-4-1727160619.png" alt=""/></div>

##### Context menu

Right-click on any folder in Solution Explorer and select \[Import\] &gt; \[Resource...\] from the context menu that appears.

<div drawio-diagram="5935"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170156.png" alt=""/></div>

##### Drag and Drop

Drag and drop the target file to be imported into any folder under **Solution** in Solution Explorer.

<div drawio-diagram="5938"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170521.png" alt=""/></div>

- - glTF file can also be imported by drag-and-drop to any folder under **Solution** in Solution Explorer.
    - Note that under OpenGLES1.1 environment, shader files (\*.vert, \*.frag), SVG files (\*.svg), FBX files, and glTF files cannot be imported by drag-and-drop operation.
    - When an image file format (\*.bmp, \*.jpg, \*.png) that can be imported as an icon is dragged and dropped into any folder under **Solution** in Solution Explorer, the dialog box will appear as shown below, allowing you to select whether to import it as an image or icon resource. You can choose whether to import it as an image or an icon.  
        <div drawio-diagram="4336"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-09/drawing-4-1695617424.png" alt=""/></div>

#### Import operations by file format

After selecting a file, operations will vary depending on the file format. Please refer to the following links for detailed operation procedures.

- <span style="color: rgb(230, 126, 35);">[Image, font, shader, FBX, and script file formats](#bkmrk-image%2C-font%2C-shader%2C)</span>
- <span style="color: rgb(230, 126, 35);">[FBX files with multiple animations](#bkmrk-fbx-files-with-multi-1)</span>
- <span style="color: rgb(230, 126, 35);">[Icon file format](#bkmrk-%C2%A0-2)</span>
- <span style="color: rgb(230, 126, 35);">[SVG file format](#bkmrk--21)</span>
- <span style="color: rgb(230, 126, 35);">[glTF file format](#bkmrk-images%2C-fonts%2C-shade)</span>

##### Image, font, shader, FBX, and script files

<p class="callout info">For importing FBX files contains skinning, see <span style="color: rgb(230, 126, 35);">[here](https://doc316en.candera.eu/books/import-of-resources/page/skinning)</span>.</p>

<p class="callout info">When an image file is imported, the original image file is retained along with the bitmap information file (\*.bin file) used on Scene Composer. See <span style="color: rgb(230, 126, 35);">[here](https://doc316en.candera.eu/link/74#bkmrk-original-image-file-)</span> for details.</p>

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
    
    <div drawio-diagram="5939"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170573.png" alt=""/></div>
2. After saving the solution, the Import Resources dialog is opened, where you can select one or more resource files to be imported. Select your files to import and press OK.
    
    
    - You can search for supported file formats by selecting them in the drop-down menu at the bottom right of the Import Resources dialog.
    - You can import multiple files at once as long as their file format belong to the same category, such as an Image file or a Font file.
    - By selecting **Font files** from the pull-down menu below, you can import any file as a font file, regardless of its extension.  
        <div drawio-diagram="8534"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-4-1756260098.png" alt=""/></div>
3. After choosing your files to import, an Import dialog will be displayed depending on the file types you are importing (Image, Font, FBX, Shader…).
    
    
    - See <span style="color: rgb(230, 126, 35);">[Import Dialog Options](https://doc316en.candera.eu/link/73#bkmrk-import-dialog "Import Dialog Options")</span> for a description of the settings on the dialog screen.
    - Select \[ <span style="color: rgb(230, 126, 35);">[Import as wireframe](https://doc316en.candera.eu/books/import-of-resources/page/import-dialog-options#bkmrk--01)</span> \] check box to import the wireframe vertex buffer when importing an FBX file.
        
        <div drawio-diagram="5940"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170648.png" alt=""/></div>
4. Configure import settings to your needs and click "OK" button.
    
    
    - The file will be imported as a resource in the Solution Explorer in the location corresponding to the settings on the dialog screen.
        
        <div drawio-diagram="5941"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170717.png" alt=""/></div>

<details id="bkmrk-wireframe-related-pr"><summary>Wireframe Related Properties</summary>

When importing an FBX file with the \[ <span style="color: rgb(230, 126, 35);">[Import as Wireframe](https://doc316en.candera.eu/books/import-of-resources/page/import-dialog-options#bkmrk--01)</span> \] option enabled, a \[ Line Width \] will be added to the property item ”mesh” of the target node. This specifies the line width of the mesh when it is rendered as wire.

- The actual line width is determined by rounding the specified width to the nearest integer.
- If the setting is less than “1”, it is always set to “1”.

<div drawio-diagram="6745"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-09/drawing-4-1725634285.png" alt=""/></div>

</details>##### FBX files with multiple animations

Scene Composer supports the import of FBX files that contain multiple animation tracks. The names of the imported animation tracks are automatically created from each animation track contained in the FBX file.

<div drawio-diagram="6963"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-4-1728536029.png" alt=""/></div>

The animations that can be imported from FBX files are as follows.

- Translation
- Rotation
- Scaling

##### Icon files

<p class="callout info">See <span style="color: rgb(230, 126, 35);">[Icon Picker](https://doc316en.candera.eu/books/solution-handling/page/icon-picker)</span> for information on how to use imported icon resources.</p>

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
    
    <div drawio-diagram="5942"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170728.png" alt=""/></div>
2. After saving the solution, the Import Resources dialog will open. Select the target file and press OK. If the selected file format is "\*.ico", the \[ Import Icons \] dialog will appear as shown below.
    
    
    - The path of the selected file is displayed in the \[ Selected files \] field. To re-select a file, press the \[ Select File... \] button.
    - In \[ Destination folder \], specify the location where the file will be imported as a resource.
    - As explained in the <span style="color: rgb(230, 126, 35);">[Drag and Drop section](#bkmrk-drag-and-drop)</span>, if you drag and drop an image file format that can be imported as an icon (\*.bmp, \*jpg, \*.png), the above dialog will appear and you can import it as an icon.  
        <div drawio-diagram="5943"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170817.png" alt=""/></div>
3. Click "OK" button to complete the import operation.

##### SVG files

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
    
    <div drawio-diagram="5944"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170829.png" alt=""/></div>
2. After saving the solution, the Import Resources dialog is opened, where you can select one or more SVG files to be imported. Select your files to import and press OK.
    
    
    - You can import multiple files at once.  
        <div drawio-diagram="4458"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-10/drawing-4-1696552970.png" alt=""/></div>
3. After choosing your files to import, an SVG Importer dialog will be displayed.
    
    
    - See <span style="color: rgb(230, 126, 35);">[SVG Importer Dialog](https://doc316en.candera.eu/link/73#bkmrk-%C2%A0-1 "Import Dialog Options")</span> for a description of the settings on the dialog screen.
        
        <div drawio-diagram="4361"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-09/drawing-4-1695790322.png" alt=""/></div>
4. Configure import settings to your needs and click "Import" button.
    
    
    - "ImportedScenes" and "Scenes" folders have been created at the destination folder chosen in "Solution Explorer". The former holds data imported as template scenes, while the latter holds data imported as actual scenes.
    - If multiple SVG files have been imported, the Scene Editor will display the actual scene for what was the topmost SVG file in the SVG Importer.
        
        
        - Transform &gt; Position &gt; X = 0, Y = 0 will be the item's initial position.
    - Copy group nodes within imported scenes into the desired scene and use them.
        
        <div drawio-diagram="7569"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-11/drawing-5-1732885221.png" alt=""/></div>

##### glTF files

<p class="callout warning">The CGI Studio glTF Importer does not support the following features:  
 - Morping  
 - Vertex Buffer Streams  
 - Sparse Accessors  
</p>

<p class="callout info">For additional details on handling glTF files—e.g., supported extensions, multiple UV sets, and limitations—please see the <span style="color: rgb(230, 126, 35);">[glTF file](https://doc316en.candera.eu/books/import-of-resources/page/gltf-files)</span> page.</p>

<p class="callout info">For importing glTF files contains skinning, see [here](https://doc316en.candera.eu/books/import-of-resources/page/skinning).</p>

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
    
    <div drawio-diagram="5945"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717170856.png" alt=""/></div>
2. After saving the solution, the Import Resources dialog is opened, where you can select one or more resource files to be imported. Select your files to import and press OK.
    
    
    - You can import multiple files at once.
3. After choosing your files to import, an Import dialog will be displayed.
    
    
    - Use the import dialog to configure Image-Based Lighting (IBL). You cannot change these settings after the import.
    - If you do not want to use IBL, clear the **Use Image Based Lighting (IBL)** checkbox.
    - During glTF import, the Engine automatically generates the IBL from a single HDR panorama (latlong) image, so you do not need to set the radiance, irradiance, or BRDF integration textures manually.
    - When necessary, set the **HDR panorama (latlong) image** and **IBL texture size** in the import dialog.
    - The default IBL texture size is **256**. On **ES2.0**, set at least 64 and use a power-of-two value. On **ES3.0**, the minimum size is **64**.
    - You can also set IBL in **Solution Options**. For details about these settings, see [**IBL HDR**](https://doc316en.candera.eu/books/solution-handling/page/ibl-hdr). <div drawio-diagram="8603"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-4-1759385229.png" alt=""/></div>
4. Then, "Import GLTF" dialog will be displayed. 
    - You can’t change IBL settings in the import dialog (red box below).
    - When you specify an HDR panorama image and run the import, the Engine automatically assigns the generated shared IBL textures to each mesh (orange box below).
    - The Engine generates the following textures: **LambertianTexture** (Diffuse/Irradiance), **GGXTexture** (Specular/Radiance), **GGXLutTexture** (BRDF 2D LUT), and **SkyBoxTexture** (Skybox).
    - For other settings on the dialog, please refer to <span style="color: rgb(230, 126, 35);">[Import Dialog Options](https://doc316en.candera.eu/link/73#bkmrk-import-dialog)</span>.  
        <div drawio-diagram="8604"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-4-1759385672.png" alt=""/></div>
5. Configure import settings to your needs and click "OK" button.
    
    
    - The file will be imported as a resource in the Solution Explorer in the location corresponding to the settings on the dialog screen.
        
        <div drawio-diagram="5948"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1717172418.png" alt=""/></div>

##### Shared IBL textures

When you import a glTF and generate IBL from an HDR panorama (lat/long), the importer automatically assigns the shared IBL textures (`LambertianTexture`/`GGXTexture`/`GGXLutTexture`/`SkyBoxTexture`) to each mesh. When you change a shared IBL texture, the importer propagates the change to all meshes that reference it.

In the example below, select LambertianTexture (Diffuse/Irradiance) in Solution Explorer and set **Magnification Filter** to **Nearest** in the Properties panel; the importer applies the same setting to every mesh/material that references LambertianTexture (irradiance/diffuse slot).

<div drawio-diagram="8605"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-4-1759818288.png" alt=""/></div>