featured image
WebVR

glTF Workflow for A-Saturday-Night

   - 

In A-Saturday-Night, we used the glTF format for all of the 3D content. glTF (gl Transmission Format) is a new 3D file format positioning itself as "the JPEG of 3D" for the Web. glTF has features such as JSON descriptions of entire scenes included binary-encoded data (e.g., vertex positions, UVs, normals) that requires no intermediate processing when uploading to GPU.

glTF exporters and converters are fairly stable, but there are still some loose ends and things that work better than other (by the way, Khronos just hired somebody to improve the Blender exporter). In this post, I will explain which workflow was the most satisfactory for me while producing the assets for A-Saturday-Night. And I’ll share some tips and tricks along the way. That's not to say this is the one way to work with glTF; it’s just the way we’re using it today.

We use Blender for creating the assets and COLLADA as an intermediate format, and then converting them to glTF using collada2gltf. You can grab the collada2gltf binary pre-release builds at https://github.com/KhronosGroup/glTF/releases. == Note that glTF v2.0 is here! Khronos is urging everyone to migrate to v2.0 quickly as there is no backwards compatibility to v1.0. A v2.0 branch in collada2gltf for updating to glTF 2.0 is almost completed. ==

Diagram: export to COLLADA and then convert to glTF via

Once I have the COLLADA file, I can convert it to glTF with collada2gltf:

collada2gltf.exe -f <assetname>.dae -o <assetname> -k

This will generate two files: assetname.gltf and assetname.bin. Copy both of them to your assets folder.

The -k command-line flag defines the glTF output file to use standard materials (e.g., constant, lambert, phong) instead of translating them to GLSL shaders. This is important right now since three.js has trouble loading glTF shaders (for example, issue #8869, issue #10549, and issue #1110). It also does not make sense to use fragment and vertex shaders for standard Lambert or Phong materials.

Then in our A-Frame scene, we can import the glTF file:

<a-scene>
  <a-assets>
    <a-asset-item id="head" src="head.gltf"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#head"></a-entity>
</a-scene>

I couldn’t find a way to export Constant Materials from Blender, found as the "Shadeless" checkbox in Blender’s "Material" tab. For now, the only way I know is to edit the .gltf file by hand.

Replace the material's "technique". This example replaces "PHONG" with "CONSTANT", but we could overwrite Lambert materials as well. Replace this:

"KHR_materials_common": {
    "doubleSided": false,
    "jointCount": 0,
    "technique": "PHONG",
    "transparent": false,
    "values": {
        "ambient": [
            0,
            0,
            0,
            1
        ],
        "diffuse": "texture_asset",
        "emission": [
            0,
            0,
            0,
            1
        ],
        "shininess": 50,
        "specular": [
            0,
            0,
            0,
            1
        ]
    }
}

with this:

"KHR_materials_common": {
    "technique": "CONSTANT",
    "values": {
      "emission": "texture_asset"
    }
}

If our constant material does not have any texture, we can put define a color as an [r,g,b,a] value instead.

Blender Tips

Here are some steps we can do in Blender before exporting to COLLADA that help to get everything okay:

  • Keep models and their textures in the same folder (we can separate different assets or kinds of assets in different folders)
  • Use relative paths in our textures: //texture.jpg instead of path/to/myproject/texture.jpg
  • In textures, specify the image nodes with the same name as the image file (without the extension)

Blender: Texture options: "Image" name and "Source" filename options

To make sure our normals are exported okay and hard edges are preserved, in the "Object Data" tab, click on the "Add Custom Split Normals Data" button. Also make sure that the "Store Edge Crease" option is unchecked (as it is by default).

Before: Blender: "Geometry Data" settings: Before

After: Blender: "Geometry Data" settings: After

  • In case something fails, we can try exporting to OBJ and importing it back to Blender:
  1. Export the asset to OBJ
  2. Create a new clean scene in Blender and import the OBJ
  3. Export it to COLLADA
  • Below are my COLLADA exporter options, for simple assets (i.e., no animation, rigging nor hierarchies. Also, note that "Selection Only" is checked, uncheck it if you want to export the whole scene):

Blender: COLLADA Exporter options

Batch Convert with batchgltf

If we have a lot of models to convert, perhaps in different folders, calling collada2gltf for each one is inconvenient. So I made a tiny tool for batch converting .dae files to .gltf using collada2gltf.

Screenshot of  program: a COLLADA-to-glTF batch converter

The batch converter will scan all input folders for .dae files, convert them to .glTF, and save the result in the specified output folders. We can either have .glTFs all saved in the same folder or in separate folders.

You can download the batchgltf converter from https://github.com/feiss/batchgltf. Take a look at the README for requirements and instructions. batchgltf.py can also work from the command line, so we could include it in a typical Webpack/Gulp workflow.

I will try to have it updated with the latest collada2gltf version while adding additional 3D formats. If you have any problem or would like to collaborate on this little tool, feel free to post an issue or send a pull request! I cannot guarantee it is free of bugs; use with care and keep a backup of your files ;)

By the way, you can find all the A-Saturday-Night assets on GitHub, in both glTF and OBJ formats.

UPDATE May 24:

  • Make sure all objects in your scene have a material assigned in Blender, or collada2gltf will crash.