A-frameで透過画像を配置すると後ろの画像が消えてしまう

問題

A-frameでVR空間上に↓の猫の画像に、

↓のキラキラの透過画像が重なるように配置した。

このようにピンクのキラキラが重なる部分の画像が消えてしまった。

ソースコード

<a-scene background="color: #a9a9a9">
  <a-assets>
    <img id="pink" src="effect_pink.png">
    <img id="yellow" src="effect_yellow.png">
    <img id="neko" src="animal_smile_neko.png">
  </a-assets>      
  
<!--   items     -->
  <a-image position="-0.2 1.2 -2.5" scale="0.8 0.8 0.8"src="#pink" width="1" height="1" ></a-image>
  <a-image position="0 1 -3" src="#yellow" width="1" height="1"></a-image>
  <a-image position="0 1 -3" src="#neko" width="1" height="1"></a-image>
</a-scene>

解決策

A-frameのドキュメントに書いてありました。

To work around this issue, try changing the order of the entities in the HTML.

カメラに近い画像(手前の画像)を最後に書くようにした。

ソースコード

<!--   items     -->
  <a-image position="0 1 -3" src="#yellow" width="1" height="1"></a-image>
  <a-image position="0 1 -3" src="#neko" width="1" height="1"></a-image>
  <!--   ピンクの画像を一番最後に書く     -->
  <a-image position="-0.2 1.2 -2.5" scale="0.8 0.8 0.8"src="#pink" width="1" height="1"></a-image>

後ろの像が表示されるようになる。