Exporting to glTF 2.0

Omber supports exporting images to the glTF 3d file format. This is useful because it allows you to export 2d vector graphics for use in certain 3d game engines and 3d animation tools. For example, if you had a simple SVG picture that you wanted to use in a game, you could import it into Omber and then re-export it to glTF 2.0. Omber will automatically convert the SVG shapes into triangle meshes that can be handled by 3d graphics pipelines used in many game engines.

More detailed instructions for exporting vector art for use in specific programs is available:

When Omber exports vector art into a 3d file format like glTF 2.0, it will convert the drawing into a 3d triangle mesh. Each shape of the drawing will become its own flat triangle mesh. These meshes are then arranged with each shape's mesh having a different Z value so that shapes that are in front of other shapes will have a higher Z value than those other shapes. Because different shapes have different Z values, the exported drawings must be viewed directly from the front using orthogonal projection in order to be rendered correctly.

Omber can encode its exported glTF data in different ways depending on what you want to do with the data. Below is a description of some of the export settings.

  • Pixels per meter scale The glTF file format is generally used to store models of 3d objects, so it uses meters as its unit of measurement instead of pixels. Omber usually defaults to using 100 pixels per meter to ensure that drawings display at a reasonable size in 3d graphics programs.
  • Export as a .GLB file glTF files can either be stored as a single file known as a .glb file or be broken up into multiple files. Having multiple files is useful for some applications where you have many assets that share resources like textures or meshes, but usually, having a single .GLB file is easier to work with
  • Use embedded images Images and textures used in your drawing can be directly included in the glTF file, or they can be saved as separate image files
  • Include shape names When exporting using the mesh output setting of "Separate meshes," Omber will store the names of each shape and group in the exported file
  • Use floating-point colors This setting is generally not needed
  • Use double-sided shapes Vector art that is exported by Omber only look correct when viewed from the front, so Omber can configure shapes to disappear when viewed from the back. This can cause problems when working in some 3d programs though because the art will disappear if the camera is oriented the wrong way. In general, there aren't any performance or size penalties for using double-sided shapes that allow an Omber drawing to be viewed from both the back and the front
  • Mesh output Omber can preprocess the 3d meshes that it outputs to suit your needs. "Separate meshes" tries to preserve the groups and other structure of your vector drawing as much as possible. This results in many separate 3d meshes though, which can be difficult to work with in some 3d programs and slow to render without further optimization. "Merge meshes" combines everything into as few meshes as possible. Most 3d models are made up of a single mesh, so the tools in many 3d programs are easiest to use with a small number of meshes. Unfortunately, it's difficult to work with the different shapes and groups of a drawing after it has been combined into a single mesh. "Merge opaque meshes only" is useful when exporting vector graphics for use in a game engine. In order to efficiently display meshes with transparency, most game engines will display all the opaque parts of a drawing all at once at the beginning, and then draw each transparent shape separately. This setting will group all the opaque meshes together into a single mesh that can be displayed quickly.

Importing Omber glTF 2.0 files into the Unity game engine

Unity is a popular 3d game engine that can produce games for many platforms. Although it supports the creation of 2d games, these 2d games still use Unity's 3d graphics framework underneath.

When exporting vector art for use in Unity, it is suggested that you use the following settings:

Suggested glTF 2.0 export settings for use with Unity
  • Export as a .glb file
  • Use embedded images
  • Set mesh output to "Merge opaque meshes only"
  • Set the scale to an appropriate value for your game

Unity does not support importing .glb files by default. Omber has a special package for Unity 2017.3+ that extends Unity so it can import the .glb files created by Omber. The package contains more detailed instructions on how to use the exported glTF files in Unity.

Importing Omber glTF 2.0 files into Pixi.js

Pixi.js is a JavaScript graphics engine that is often used for HTML5 games. The graphics engine is used by game engines like Phaser or RPG Maker MV. Using Omber vector graphics in HTML5 games is particularly useful because it lets you have smaller, quicker downloads for high resolution graphics with transparency.

When exporting files for use with Pixi.js, it is suggested that you use the following settings:

Suggested glTF 2.0 export settings for use with Pixi.js
  • Use 1 pixel per meter scale so that one pixel in Omber will map to one pixel in Pixi.js
  • Export as a .glb file
  • Set mesh output to "Merge opaque meshes only"

Be sure to note where your drawing is relative to the origin point at x=0 and y=0. You can open Omber's Info panel to find out where it is. When displaying glTF files in Pixi, it will center the drawings around its original origin point.

There is an open source plugin for importing glTF files exported by Omber into Pixi.js. The plugin provides more detailed instructions on how to use the exported glTF files in a Pixi program.

Importing Omber glTF 2.0 files into Blender

Drawings without transparency can be imported into Blender. Below are the suggested settings for exporting drawings from Omber:

Suggested glTF 2.0 export settings for use with Blender
  • Use 100 pixels per meter scale
  • Export as a .glb file
  • Set mesh output to "Merge meshes"

Blender does not support importing glTF files by default, so you need to download and install a separate add-on for importing glTF files .

After importing the glTF file, the drawing will often be too big, so you might have to zoom out to actually see the full drawing. The drawing will also not have any colors. Omber encodes its colors using vertex coloring, and Blender does not use vertex coloring by default.

The quickest way to enable vertex coloring is to

At the top of the Blender window, switch to the Blender Render rendering engine
At the bottom of the Blender window, switch the shading mode to material shading
Select the imported object, and then open the Materials tab
Create a new material
Turn off the use of shader nodes
Enable shadeless and vertex coloring

Contents