Как правильно визуализировать вклад карты AO в A-Frame - PullRequest
Новая
       50

Как правильно визуализировать вклад карты AO в A-Frame

0 голосов
/ 06 марта 2019

Я создал модель комнаты в Blender и запек "Ambient Occlusion", используя специальный набор УФ.

Затем я создал новый материал с запеченным изображением АО в качестве текстуры и применил его ко всей модели. Визуализация в Blender верна.

Я хотел бы визуализировать мою модель, используя A-Frame с обеими диффузными текстурами (на TEXCOORD_0) и вкладом AO Map (на TEXCOORD_1).

Код, который я сейчас использую, таков: 

<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>

Он способен правильно загружать и визуализировать модель с диффузными текстурами, но AO не отображается. Что мне здесь не хватает?

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 06 марта 2019

Два варианта:

1 Вы можете включить карту AO при экспорте из Blender , что требует некоторой настройки, поскольку узел Principled BSDF Blender не выполняетиметь вход AO.

2 Если вы хотите добавить текстуру AO отдельно, компонент material не может изменять объекты, у которых уже есть материал, поэтому он не совместим сgltf-model компонент.Для этого вам понадобится небольшой пользовательский компонент.Примерно так: 

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>
...