Art Pipeline for glTF

Authoring content for a new file format can be exciting, liberating, and at the same time scary. To be the most efficient and avoid frustration, it helps to understand the format's requirements.  To help achieve that, I am going to walk through several paths for authoring content in the glTF format as well as outline specific settings to maximize your success. I will touch on both free and commercial software packages to ensure everyone has a path into glTF, but first let's outline a few important concepts.

Material Specifications

glTF will support Specular-Glossiness materials. With that in mind, my examples will use Metallic-Roughness materials to ensure the most flexible assets possible. If you are new to authoring textures for PBR materials, there is a comprehensive guide on the subject available from Allegorithmic that is a great place to start.

Mesh Considerations

Because glTF is designed for run-time delivery, meshes should be created with real-time rendering guidelines in mind.

• Optimize your triangle count budgets to perform well on the web and on mobile.
• Assign only one material per sub-mesh.
• Combine sub-meshes where possible to reduce draw calls.

Otherwise, you can create your model in any package you prefer. The tools that can export a model and textures into the glTF format at this point are 3ds Max, Blender, and Substance Painter with more exporters coming soon. If your model was not created in one of these packages (or you are using Substance Painter to export) you will need to save your model into an exchange format that can be imported into these packages such as COLLADA.

Authoring Tools vs. Command Line Converters

In this post I am touching on authoring tools such as 3ds Max, Blender, and Substance Painter even though there are several command line conversion tools available for glTF. There are two main reasons for this and the first one is speed. If I am already using an authoring tool, having a path to glTF right from the tool without needing to run it through a converter will speed my process. The other reason, which is the more important consideration, is to ensure that the mesh and textures I author are translated into the format correctly. Command line tools will need to make guesses at times if the asset doesn’t conform to expected guidelines and can result in assets that don’t render as intended. Keeping control over the export gives you more power to create assets that look exactly the way you want them to.

Texture Requirements

The glTF format supports the following textures for the Metallic-Roughness PBR model:

• Base Color
• Metallic
• Roughness
• Normal
• Ambient Occlusion
• Emission

The format does expect the textures in a specific format, however. The Base Color, Normal, and Emission textures are saved as individual files, preferably a PNG as the format is lossless. The Ambient Occlusion, Roughness, and Metallic textures are saved in a single channel-packed texture to reduce the number of texture loads. The textures need to be packed into the channels of your texture as follows:

• Red: Ambient Occlusion
• Green: Roughness
• Blue: Metallic

Going forward, I will refer to this channel-packed texture as the ORM texture for Occlusion, Roughness, and Metallic.

Creating the ORM Texture

There are several ways to create a channel-packed texture but I will touch on three packages, Adobe Photoshop, GIMP, and Substance Painter. Create your textures as you normally would, and then follow the instructions for your desired package below.

Adobe Photoshop

Create a document that contains each of your textures on separate layers. The image below shows my textures on separate layers but notice the channels all display the Occlusion texture since it is overriding the lower layers. I also named the layers with the appropriate map name, so it is easier to understand which layer needs to be packed into each channel.

Right-click on the layer name and choose Blending Options… from the top of the menu.

In the Layer Style window that opens, you will select the channel the layer will display in by checking the appropriate channel under Advanced Blending. Since I am setting the layer style for the occlusion map, I check the red channel and uncheck the green and blue channels.

Do this procedure for each layer and you will see that the channels reflect the layers exactly. You can even use multiple layers to make up a single texture, just be sure to set each layer style to the correct channel. You will also need to use an appropriate blend mode, such as multiply, for each layer contributing to a specific channel.

GIMP

Create each of your Occlusion, Roughness, and Metallic textures in GIMP as individual files and save them with names that explain which texture each is. Once you have each of the files created, open all three documents at once and change the mode to grayscale for each if they aren’t already set that way. To change the image mode, click on the Image menu, hover over the Mode menu item, and then click on Grayscale.

Once you have the three textures set as grayscale and open, we will combine them into one new document that uses Occlusion for the Red channel, Roughness for the Green channel, and Metallic for the Blue channel. To do this, click on the Colors menu, hover over the Components menu item and then click on Compose… with any of your textures as the active document.

This will bring up a window that asks you to choose which document is used for each of the channels in the new RGB file that is created. Leave Color model as RGB and use the drop-down menus to select the Occlusion texture for the Red channel, the Roughness texture for the Green channel and the Metallic texture for the Blue channel. I named each of my files with the map type (Occlusion, Roughness, and Metallic) to help me identify them in the window. GIMP will display only the file ID in the window if the textures haven’t been saved to disk which can make slotting the textures in the right channel more difficult.

When you click OK a new RGB document will be created with the correct textures in each channel as you can see in the Channels window below.

Substance Painter

While Photoshop and GIMP are images editors that can handle texture creation, Painter is a texture editor that was designed with texturing 3D assets as its primary function. As such, the tools available in Painter are more fully featured to handle a texturing pipeline.

Set up your document as normal but be sure to include Ambient Occlusion, Emissive, and Opacity channels in your TextureSet Settings. Do this by clicking on the + button and adding a Linear 8-bit (L8) Ambient Occlusion map, an sRGB 8-bit (sRGB8) Emissive map and a Linear 8-bit (L8) Opacity map. This will give you access to the ao, emissive, and op channels in the material properties per layer.

To streamline the process of exporting textures to this pipeline we will create an export configuration for glTF textures. To start, select Export Textures from the File menu and then set the destination for your textures on the Export Document window. Next, we will create a new preset on the Configuration tab by clicking the + button. Give this preset a descriptive name that lets you know the textures will be created to glTF specifications.

Notice that the Output Maps panel in the middle of the window is blank as we need to tell Painter how to export the maps. Create the following output maps:

• Click on the RGB+A button for the Base Color map and name it. Drag the Base Color Input Map over the RGB button and choose RGB Channels from the drop-down. Then drag Opacity onto the A channel and choose Gray Channel from the drop-down.

• Click on the R+G+B button for the ORM map and name it. Drag the Mixed AO Converted Map onto the R button and choose Gray Channel. Next, drag the Roughness Input Map onto the G button and choose Gray Channel. Finally, drag the Metallic Input Map onto the B button and choose Gray Channel.
• Click on the RGB button for the Normal map and name it. Drag the Normal OpenGL Converted Map onto the RGB button and chose RGB Channels from the drop-down.
• Click on the RGB button for the Emissive map and name it. Drag the Emissive Input Map onto the RGB button and chose RGB Channels from the drop-down. Your preset should now look like the one below.

Switch back to the Export tab and choose your preset from the Config drop-down and click the Export button to export your textures. Going forward, each time you want to create your texture set for a new asset, you only need to set your export path and choose your Config preset and click Export. This will do the channel packing for you and convert the textures into the color space that glTF expects.

Creating the glTF File

The best paths to export a glTF right now are Substance Painter, Blender, and Autodesk 3ds Max. Since we were just looking at creating textures for glTF in Substance Painter, we will start there.

Substance Painter

Painter offers the most painless export experience to glTF because Allegorithmic has created an export config for us to generate not only the textures set up for glTF but also creates the glTF file and the bin file for the mesh. Simply select Export Textures from the File menu and set your export path before choosing glTF PBR Metal Roughness from the Config drop-down. It will be near the top of the list of presets and is the only thing you need to export directly to a glTF. 

With this preset selected, click on the Export button and you are done. You can drag these files directly onto the Babylon.js sandbox page and view your glTF model. It’s important to note that the automatic exporter from Painter uses the mesh maps for export and may limit your control over the textures on the model so you may want to stick with creating textures as detailed before and using Blender or 3ds Max to create your glTF files.

Blender

Because Blender isn’t a texturing package you will need to start with textures correctly channel packed to the glTF specifications as shown above. To get started exporting a glTF from Blender, you will first need to install the needed extensions for Blender. You can find the complete instructions and files at the Khronos Group glTF-Blender-Exporter GitHub page. Once your installation is done, the process to export a glTF is simple.

First open or import you mesh in Blender and then you will need to link the PBR shader for glTF from the Khronos repository you cloned during installation. You want to link the following file:

• \glTF-Blender-Exporter\pbr_node\gltf2.blend\NodeTree\glTF Metallic Roughness

Note that we are using the Cycles Renderer as this node only works with that renderer. Next you will want to open the material you are using for your mesh in the Node Editor and delete the shader wired to your Material Output as we will replace it with the one we just linked. Under the Add menu, hover over Group and click on glTF Metallic Roughness to add the node to the editor. Wire the Shader output to the Surface input as shown below.

Wiring up the rest of the shader is simple. We need, at most, four Image Texture nodes (three if we don’t have an Emissive texture for our model) wired to the shader inputs. The important part of the Image Texture node is the setting in the color mode drop-down. For the Base Color and Emissive textures, set the node to Color and for the ORM and Normal textures, set the node to Non-Color Data. This sets the color space for each of the textures where Color nodes are sRGB files and Non-Color Data nodes are linear files. Wire the connections as shown below and note that the ORM texture is wired to both the MetallicRoughness input and the Occlusion input. The shader will pull from the correct channel automatically.

There is one critical thing to understand about this shader which informs why I presented creating the textures first. This shader pulls the original texture files assigned to the inputs and feeds them to the exporter. If it can’t find a texture file, it will use the default values for the input. This means that you can’t create your textures or modify the texture file with nodes in the shader tree as everything, but the original texture file is ignored. However, if you don’t have a specific texture like an Emissive map you can simply leave the input unconnected and the shader will use the default settings instead.

To export the file, click on the File menu, hover over the Export menu option, and click either glTF 2.0 (.glTF) or glTF 2.0 (.glb). The difference between the output is that a .glTF will export a glTF file, a binary file for the mesh, and all of the textures as individual files where the .glb will export only one binary file with everything contained. Once the export window opens, you will see some options for your glTF as shown below.

Most of the options are self-explanatory and the defaults produce good results, but you may want to do simple things like Export Selection Only or fill in copyright information.

Autodesk 3ds Max

3ds Max is the newest implementation of a glTF exporter and fills much the same role as Blender’s exporter, but allows you to stay with the Autodesk suite of applications if you are already creating in them. You will need to be using the 2017 release of 3ds Max to have access to Physical Materials that can take advantage of the PBR texturing methods above. To install the exporter, visit the Babylon.JS site and follow the instructions to add the plugin to your installation of 3ds Max.

As with Blender, you will need to have your PBR textures ready to assign to your material. There is one key difference in the textures you supply, however. You will not need to channel pack the ORM texture as you do for Blender. Instead you can simply export your Base Color, Normal, Metallic, Roughness, Emissive, and Occlusion textures as individual files.

With your mesh and textures ready, open the Slate Material Editor, create a new Physical Material, and drag the output of the material to your mesh to assign it.

We are only going to use a few of these inputs and you have access to some of the options attached to these inputs. You will want to drag a bitmap node into the workspace for each of the textures we will connect and wire them to the correct input. For example, you will connect the Base Color texture to the Base Color Map input. The only texture that isn’t self-explanatory is the Ambient Occlusion texture which is wired to the Diffuse Roughness input. The exporter will pull the reference to the texture from this input and encode it correctly in the glTF for you. You will also have a couple of options for these textures available to you as follows:

• If you need transparency in your materials, you will need a separate alpha texture to wire in as a bitmap to the Transparency Weight The texture needs to be the same size as your Base Color texture for the map to work correctly. You can also use the Transparency value in the Basic Parameters panel to set an overall transparency for your material.
• If you have a Glossiness texture instead of a Roughness texture, you can click the Inv button in the Base Color and Reflections section of the Basic Parameters panel to invert the texture.
• You can set overall Metallic, Roughness, and Emission values in the Basic Parameters panel if you don’t have, or don’t want to use, a texture for these properties.
• More information about the available PBR settings is available on the js site.

Once you have your material wired up, it should look like the one below. I named each of the Bitmap nodes so you can see which texture is wired to each input. I didn’t need an Emissive texture or Transparency on this material so those inputs are left blank.

To export the glTF file, look to the main menu bar, and you will see to the right of the Help menu a new Babylon menu. Click on this menu and select Babylon File Exporter… which will bring up the export window. This tool can be used to export your models to both the glTF format or directly to Babylon.JS. You can learn more about the process of exporting your whole scene for Babylon.JS at the Babylon.JS site. For now, enter a file name and path and choose your output format. You can export your model as a .glTF or a .glb depending on your needs. There are only a few export options to worry about but one of the most important is “Copy textures to output.” This copies all of your input textures into the same directory glTF and mesh binary files to ensure that all of the references in the glTF file stay accurate.

It’s That Simple

This is all you need to successfully export your models into the glTF format. While I showed several tools for each step, each tool has a simple workflow for its part in the pipeline. As the adoption of glTF grows, so will the options for tools and exporters. Even now, however, we have a great set of powerful tools to choose from for our art pipeline. As the format grows keep an eye on khronos.org, babylonjs.com and follow the progress of the Maya exporter for new demos, tools, and documentation.