MOZ_lightmaps.md

MOZ_lightmaps workflow after you have your unlit .gltf, with UV2s, and one or more lightmap textures:

1. Move the lightmaps into the same directory as your gltf file.

2. Install VSCode: https://code.visualstudio.com/

3. Install the glTF Tools Extension: https://marketplace.visualstudio.com/items?itemName=cesium.gltf-vscode

4. Open up the .gltf file in VSCode

5. You should see the following line in the file "usesExtensions": ["KHR_materials_unlit"] If you don't, you'll need to follow the steps Jim posted above.

6. Change that line to: "usesExtensions": ["KHR_materials_unlit", "MOZ_lightmap"]

7. For each material you light baked you'll need to do the following:

a. Find the images array in the file, it should look like this:

"images": [
  {
    "name": "My Texture",
    "uri": "texturename.jpg"
  }
]

b. Add the lightmap image to the array, the uri property should be set to the relative path to your lightmap file, the name property can be anything.

"images": [
  {
    "name": "My Texture",
    "uri": "texturename.jpg"
  },
  {
    "name": "Lightmap",
    "uri": "lightmap.jpg"
  }
]

Note if your textures are stored in another folder you'll need to specify the folder, just make sure the uri points to the correct file:

"images": [
  {
    "name": "My Texture",
    "uri": "textures/texturename.jpg"
  },
  {
    "name": "Lightmap",
    "uri": "textures/lightmap.jpg"
  }
]

c. Find the textures array in the file, it should look like this:

"textures": [
  {
    "source": 0
  }
]

d. Add a new texture to the array, the value of the index property will be the index of the image we just added in the previous step. Note that indices start at 0:

"textures": [
  {
    "source": 0
  },
  {
    "source": 1
  }
]

e. Find the materials array in the file. It looks like this locate the lightmapped material in the array:

"materials": [
    {
      "emissiveFactor": [0, 0, 0],
      "name": "My Material",
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 0,
          "texCoord": 1
        },
        "metallicFactor": 0,
        "roughnessFactor": 1
      },
      "extensions": {
        "KHR_materials_unlit": {}
      }
    }
  ]

f. Make sure that the baseColorTexture has it's texCoord set to 0. This means it will use the first uv set.

"baseColorTexture": {
  "index": 0,
  "texCoord": 0
}

h. If you changed the texCoord from 1 to 0 you'll need to do this step otherwise skip it.

i. Find the meshes array in the file. It looks like this: "meshes": [ { "name": "My Mesh", "primitives": [ { "attributes": { "POSITION": 0, "NORMAL": 1, "TEXCOORD_0": 2, "TEXCOORD_1": 3 }, "indices": 4, "material": 0 } ] } ]

ii. For each mesh that uses your material, swap the values for TEXCOORD_0 and TEXCOORD_1

"meshes": [
  {
    "name": "My Mesh",
    "primitives": [
      {
        "attributes": {
          "POSITION": 0,
          "NORMAL": 1,
          "TEXCOORD_0": 3,
          "TEXCOORD_1": 2
        },
        "indices": 4,
        "material": 0
      }
    ]
  }
]

g. Add the MOZ_lightmap extension to the material, the index should be the index of the texture we added to the file:

"extensions": {
  "KHR_materials_unlit": {},
  "MOZ_lightmap": {
    "index": 1,
    "texCoord": 1
  }
}

h. Your material definition should now look something like this:

{
  "emissiveFactor": [0, 0, 0],
  "name": "My Material",
  "pbrMetallicRoughness": {
    "baseColorTexture": {
      "index": 0,
      "texCoord": 0
    },
    "metallicFactor": 0,
    "roughnessFactor": 1
  },
  "extensions": {
    "KHR_materials_unlit": {},
    "MOZ_lightmap": {
      "index": 1,
      "texCoord": 1
    }
  }
}

i. Repeat Step 7 if you have more lightmapped materials. Note that the indices will be different.

8. Press CMD/CTRL + Shift + P this will bring up the Visual Studio Code command menu.

9. Start typing glb and select the Export to GLB (Binary File) option.

10. Pick the folder for the glb to be output.

11. Use the glb in Spoke or Hubs!