※この度、8th WallのSky Effectsについて寄稿いただきました。
2022年12月にリリースされた8th WallのSky Effectsを使ってコンテンツを実装する中で、ハマったことや気づいたことなどを、備忘録的にまとめていきたいと思います(2022/12/19現在の情報です)。
Sky Effectsとは?
地面ではなく、空をキャンバスとして、色々なオブジェクトを配置してWebARを作成できる機能です。
これを使うことで、例えば、
・空自体を画像やビデオで置き換えて、天気や時間帯が変わっているように見せる

・空に3Dモデルを固定する

・天まで届く巨大なキャラクターを置く

などの表現をすることができるんですね(以上のgif画像は全て公式ページより抜粋)。
空画像作成のコツ
空を置き換える画像(以下、sky画像)作成には、いくつかコツがありました。
sky画像の下半分の透明度を上げる
sky画像は公式のサンプルに合わせて、大体2500*1250くらいのサイズで作成し、下半分は透明にしておきます。
下半分を透明にしなくとも設定可能なのですが、オクルージョンの影響で、基本的に下の方は見えなくなってしまいます。
特に、このように画像の下の方に行くに従って、透明度を上げるグラデーションをかけることで、風景との馴染みがよくなります。

グラデーションをかけたsky画像と、かけていないsky画像を設定した時の違いを比べてみましょう。
こちらが透明グラデーションをかける前、

こちらがかけた後です。

透明グラデーションをかけると、オクルージョンする部分の繋ぎ目がより自然に見えますね。
画像の明るさをやや上げる
レンダリングの影響なのか、sky画像は、実際に作成した画像よりやや暗めに表示される印象です。
そのため、あらかじめ画像の明るさを上げて準備しておくと良いです。
こちらが実際に撮影した様子の動画なのですが、上に貼ったsky画像に比べると、色味がやや強く出ていることがわかります。
AR体験について
体験の時間帯や天気と精度の関係
ケース1. 曇天の昼間
太陽が出ておらず、空が雲で真っ白に覆われているような状態でも、問題なく空が検知されました。

ケース2. 夕方、日が落ちてすぐ
日没直後くらいの、ある程度明るさが残っている状態(電灯なしでもぎりぎり本を読めるくらいの明るさ)であれば、きちんと空を認識できていました。
ケース3. 真っ暗な夜
日が落ち切って、すっかり真っ暗な状態でも、一応認識可能といえば可能でした。
しかし、どうしてもオクルージョンが不安定になり、空がうまく検知できない瞬間もありました。
やはり、明るい時間帯に体験するのが確実そうです。
古い端末での体験
iPhone8を使って見てみたのですが、空認識はスムーズに始まるものの、モデルがガタガタに表示されてしまいました。
演算が間に合っていないのかもしれません。

Sky Effectsを使いたい場合は、なるべく新しい端末機種で試すことをお勧めします。
まとめ
8th WallのSky Effectsを使うことで、空にプラネタリウムを表示したり、「進撃の巨人」のようなインパクトのある表現をしたり、色々なARを作ることができそうですね。
実装の際はぜひ、今回まとめたヒントを参考にしてみてください!
執筆者 影織(@kageori_ar)
ARと切り絵を組み合わせた作品を中心に、様々な制作をしています。
ポートフォリオ: https://kageori.pythonanywhere.com/