glTF Workflow for a Saturday Night

手机数码 2017-04-11

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. Not to say this is the one way to work with glTF, but 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 prebuilds at . Note that glTF v2.0 is here! Khronos is urging everyone to migrate to v2.0 quickly as there is no backwards compatibility to 1.0. A 2.0 branch in collada2gltf for updating to glTF 2.0 is almost completed.

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

collada2gltf.exe -f .dae -o  -k

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

The -k parameter makes the glTF use standard materials (e.g., constant, lambert, phong) instead of translating them to GLSL shaders. This is important as right now since three.js has trouble loading glTF shaders. 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:


If you want a Constant material ("Shadeless" checkbox in blender material tab), I still didn't find a way of have it exported well. For now, the only way I know is to edit the .gltf file by hand. Replace something like this (this is a example with Phong, could be Lambert):

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": [
        "diffuse": "texture_asset",
        "emission": [
        "shininess": 50,
        "specular": [

with this:

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

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

Blender Tips

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

  • 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, give the image nodes the same name as the image file (without the extension)

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

Before: 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):

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 .

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 batch converter from . Take a look to the README for requirements and instructions. can also work from the command line so we could include it in a typical Webpack or 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 with 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 backup your files 😉

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

MozVR Blog

责编内容by:MozVR Blog (源链)。感谢您的支持!


Create a Web Service Documentation Workflow Like A... In 2002, Jeff Bezos famously mandated that all new applications at Amazon mu...
My presentation workflow and challenges I was asked to write about my presentation-creation process the other day on...
Node.js 开发 Alfred workflow 初体验 本文简单记录下如何用 Node.js 开发一个 Alfred workflow 的过程。 之前开发过自己用的小工具,这次打算开发 CDNSearch...
Mastering Advanced Sass & Workflow with Zurb F... Welcome back! In the previousarticle, we covered all the advanced topics that S...
Properly Getting Into Jail: Data Processing In this series of posts, I have talked a lot about the way data flows, the notio...