8th WallのSky Effectsを使用したアプリの作成・体験のコツ

※この度、8th WallのSky Effectsについて寄稿いただきました。

2022年12月にリリースされた8th WallのSky Effectsを使ってコンテンツを実装する中で、ハマったことや気づいたことなどを、備忘録的にまとめていきたいと思います(2022/12/19現在の情報です)。

Sky Effectsとは?

地面ではなく、空をキャンバスとして、色々なオブジェクトを配置してWebARを作成できる機能です。

これを使うことで、例えば、
・空自体を画像やビデオで置き換えて、天気や時間帯が変わっているように見せる

gif1.gif (3.1 MB)

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

gif2.gif (3.0 MB)

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

gif3.gif (4.5 MB)

などの表現をすることができるんですね(以上のgif画像は全て公式ページより抜粋)。

空画像作成のコツ

空を置き換える画像(以下、sky画像)作成には、いくつかコツがありました。

sky画像の下半分の透明度を上げる

sky画像は公式のサンプルに合わせて、大体2500*1250くらいのサイズで作成し、下半分は透明にしておきます。

下半分を透明にしなくとも設定可能なのですが、オクルージョンの影響で、基本的に下の方は見えなくなってしまいます

特に、このように画像の下の方に行くに従って、透明度を上げるグラデーションをかけることで、風景との馴染みがよくなります。

sky.png (3.6 MB)

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

こちらが透明グラデーションをかける前、

こちらがかけた後です。

透明グラデーションをかけると、オクルージョンする部分の繋ぎ目がより自然に見えますね。

画像の明るさをやや上げる

レンダリングの影響なのか、sky画像は、実際に作成した画像よりやや暗めに表示される印象です。

そのため、あらかじめ画像の明るさを上げて準備しておくと良いです。

こちらが実際に撮影した様子の動画なのですが、上に貼ったsky画像に比べると、色味がやや強く出ていることがわかります。

AR体験について

体験の時間帯や天気と精度の関係

ケース1. 曇天の昼間
太陽が出ておらず、空が雲で真っ白に覆われているような状態でも、問題なく空が検知されました。

ケース2. 夕方、日が落ちてすぐ
日没直後くらいの、ある程度明るさが残っている状態(電灯なしでもぎりぎり本を読めるくらいの明るさ)であれば、きちんと空を認識できていました。

ケース3. 真っ暗な夜
日が落ち切って、すっかり真っ暗な状態でも、一応認識可能といえば可能でした。
しかし、どうしてもオクルージョンが不安定になり、空がうまく検知できない瞬間もありました。
やはり、明るい時間帯に体験するのが確実そうです。

古い端末での体験

iPhone8を使って見てみたのですが、空認識はスムーズに始まるものの、モデルがガタガタに表示されてしまいました。
演算が間に合っていないのかもしれません。

Sky Effectsを使いたい場合は、なるべく新しい端末機種で試すことをお勧めします。

まとめ

8th WallのSky Effectsを使うことで、空にプラネタリウムを表示したり、「進撃の巨人」のようなインパクトのある表現をしたり、色々なARを作ることができそうですね。

実装の際はぜひ、今回まとめたヒントを参考にしてみてください!


執筆者 影織(@kageori_ar)
ARと切り絵を組み合わせた作品を中心に、様々な制作をしています。
ポートフォリオ: https://kageori.pythonanywhere.com/