Known Issues, Fixes, and tricks for 3D Models in the Web

by | Oct 12, 2023

When exporting to the GLB format, you’ll need to follow some key practices to export a functional model with the right material settings. The points listed below are required to achieve the specific material function you want to export to GLB.

Key Points:

  • – The “Base Color” hex value, without a texture attached, must be set to white (#FFFFFF) if the material is to be adjusted later on by any app or platform in real-time. You may still have your textures attached, but make sure the Base Color socket value is 100% white.
  • – To add baked Ambient Occlusion to your exported model, a custom node group “glTF Settings”. with an “Occlusion” input must be connected to your AO texture.
  • – For Unlit materials (no lighting), a background shader must be used, unless with a texture (see below)
  • – Vertex Colors must be checked and adjusted (If Necessary) before export

Base Color

The Spiff Editor utilizes a canvas system, applying it as a texture to the 3D model’s base color channel to visualize customization in real-time. A quirk of the glTF/Babylon.js platform is that the base color value will tint any connected texture—so if exported with a blue base color, the texture will appear blue-tinted for example. To ensure accurate representation in editors, always set the base color to white when exporting (#FFFFFF). See below.

Screenshot 2023 10 12 at 10.14.42 am
Using Babylon.js Sandbox to demonstrate the tinting issue.
Screenshot 2023 10 12 at 10.15.44 am

Baked Ambient Occlusion

With no node input on the Principled BSDF node, we need to make our own for the GLB format to recognise on export. To do this, we will create a node group called glTF Settings with one input called “Occlusion

Screenshot 2023 10 12 at 11.53.43 am 1
Screenshot 2023 10 12 at 11.53.20 am

Unlit

To create an unlit material for your GLB, simply use a background shader node and connect it straight to the material output. Access the world shader node tree and copy it from there, paste it into your material node tree.

t6n6j

Vertex Colors

Exported GLB models will use the vertex colours you add directly, if you experience issues with your exported models being 100% black or another colour, try checking whether it has vertex colours in Blender.

Home » Documents » Content » Assets » 3D Models » Known Issues, Fixes, and tricks for 3D Models in the Web