How to fix missing materials and textures when exporting a Blender file to glTF

I recently had the urge to load a nice house model into a Babylon JS scene, but my glTF files were textureless in Babylon JS.

In short, if your glTF files exported from Blender don’t have textures, you may need to use the Principled BSDF material type.

Read on for details!

Quaternius, builder of houses

For this article, I’m using Quaternius’ great (and free!) house models from the Simple Buildings pack, which look like this:

Mmmmmm, houses.

The Simple Buildings Pack is a few years old, and while many of Quaternius’ later packs contain glTF files out-of-the-box, this pack doesn’t.

But! Quaternius provides Blender files, which we can open in Blender and export to glTF using Blender’s glTF add-on.

It was the perfect plan. Perfect. Maybe too perfect. And maybe too planny.

The problem: my exported glTF file doesn’t have a texture

When I drag-and-dropped the exported .glb file into the awesome Babylon JS Sandbox, the texture was missing!

Gasp!

Using the Babylon JS Sandbox’s Inspector to confirm the problem

Using the sandbox’s built-in inspector, I confirmed that the house had a material assigned, but the material had no Albedo texture assigned:

No Albedos here. No Bebedos either. I don’t know what Albedo means.

I manually fixed the problem by pressing Add Albedo texture and uploading the texture file:

Success! We now have Alan Bedo. Perhaps this is his house.

So we need to do that, but in the original .glb file.

Fixing the problem in the exported .glb file

As per the documentation for Blender’s glTF 2.0 add-on, if you want the add-on to export textures, the material must be a Principled BSDF material in Blender.

The .blend files from the Simple Buildings Pack, however, use the Diffuse BSDF material:

Down the bottom-right, where it says Surface: Diffuse BSDF.

We can click the Surface property’s value and change it to Principled BSDF, which looks like this:

When the BDSFs are Principled.

And then we assign the texture to the Base Colour property by clicking the little dot to the left of the property’s value and selecting Image Texture:

Selecting an Image Texture.

And finally selecting the image texture to use by clicking the dropdown in the details for Base Colour:

Selecting the texture file to use.

Finally, we can export a new .glb file and drag-and-drop it into the Babylon sandbox, and confirm that it now has the texture applied:

Success!

But it’s also shiny af, ugh.

Gotcha: we can’t control the F0 Factor from within a glTF file ;(

The shininess is due to the Babylon JS material having an F0 Factor value of 1, which can be confirmed by tweaking the value in the inspector.

At this stage, it does not look like this is something we can fix in the .glb file, because this piece of data isn’t imported from the file. I am currently investigating this further, and will do a follow-up article soon.

Instead, after we load the glTF into our Babylon JS scene, in our code, we need to manually set the material’s metallicF0Factor value to 0.

OK soooooo this took ages, gimme a TL;DR pls

So in the end, if you want your Blender models’ textures to be included in the exported glTF files, you need to make sure your models are using the Principled BSDF material type.

Or, in other words:

TL;DR: use the Principled BSDF material in Blender