How to correctly visualize AO map contribution in A-Frame

Question

I created a room model in Blender and baked Ambient Occlusion using a dedicated UV set.

I then created a new material with the baked AO image as a texture and applied it to the whole model. Visualization in Blender is correct.

I would like to visualize my model using A-Frame with both the diffuse textures (on TEXCOORD_0) both the AO Map contribution (on TEXCOORD_1).

The code I currently use is this:

<a-scene stats>
    <a-assets>
        <a-asset-item id="roomLM-texture" src="models/AOMap.jpg"></a-asset-item>
        <a-asset-item id="room-model" src="models/edificio6.gltf"></a-asset-item>
    </a-assets>
    
    <a-sky color="#222"></a-sky>
    <a-entity id="room-instance" gltf-model="#room-model" material="ambientOcclusionMap:#roomLM-texture; color:#fff;"></a-entity>
</a-scene>

It is able to load and visualize correctly the model with the diffuse textures, but no AO is shown. What am I missing here?

Thanks for any help!

Answer 1

Two options:

1 You can include the AO map when exporting from Blender, which requires a bit of setup because Blender's Principled BSDF node doesn't have an AO input.

2 If you want to bring the AO texture in separately, the material component cannot modify objects that already have a material, so it isn't compatible with the gltf-model component. You'll need a small custom component to do that. Something like this:

AFRAME.registerComponent('ao-map', {
  schema: {
    src: {default: ''}
  },
  init: function () {
    var aoMap = new THREE.TextureLoader().load(this.data.src);
    aoMap.flipY = false;
    this.el.addEventListener('model-loaded', function(e) {
      e.detail.model.traverse((o) => {
        if (o.isMesh) {
          o.material.aoMap = aoMap;
          if (o.geometry.attributes.uv2 === undefined &&  
              o.geometry.attributes.uv !== undefined) {
            o.geometry.addAttribute( 'uv2', new THREE.BufferAttribute( o.geometry.attributes.uv.array, 2 ) );
          }
        }
      });
    });
  }
});

<a-entity gltf-model="..." ao-map="src: my-ao.png"></a-entity>