【A-Frame】背景透過GIFを重ねても、下の背景が隠れて透過しない問題の対処法

結論

前面に重ねてある、透過させたいGIFに対して、material="transparent: false; alphaTest: 0.5;を追加する。


現象

A-frameでARを作ろうとして、aframe-gif-shaderを使ってGIFを入れていました。
が、透過GIFの表示がおかしくなっていました。

鳥の周辺の四角い部分が切り取られてしまい、うまく透過できなかったのです。

A-Frameで、背景透過Gifを重ねても、下の背景が隠れて透過しない
あれれ、背景隠れちゃった。


解決法

A-Frameの公式ページによると、

3Dグラフィックの描画の際、前に重ねた透明なマテリアルが、背景のマテリアルの上に正しく合成されないことがあるようです。

画像の一部が完全に透明で、残りの部分が完全に不透明である必要がある場合、透明度の問題を解決するために、transparent: false; と alphaTest: 0.5; のように設定してみてください、とのことだったので、設定しました。

A-Frameで、背景透過Gifを重ねて、下の背景がきちんと透過した
無事解決!