【aframe】WebAR / VRの表現力を上げる裏ワザ3選

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay24です！
Mery Christmas Eve🎅

昨日は『Expo Bare Workflow で Firebase Analytics を設定する』という記事でした。

Expo Bare Workflow で Firebase Analytics を設定する

本日は、初めて触ったプログラミング言語（？）はaframeという自称aframerの著者が
WebAR/VRの表現をひとつ上にするワザ3選をご紹介します！

内容はちょっとWebVRよりWebAR多めです。

aframeとは

aframeとはMozillaが提供するWebXRライブラリのこと。
htmlのタグで簡単にWebXRを実現できるため、プログラミング初心者にもゴリゴリの開発者にも優しい。

つい最近WebAR機能もリリースするなど、今後の発展も楽しみなライブラリです。

https://aframe.io/

さぁ今日もそんなaframeをしばいていきますよ！！！

aframeをシバくくま

1. skyboxを使いこなす

aframeには背景要素のというタグがありますが
実はこれも結構カスタマイズが効くのをご存知ですか？

このskyboxをカスタマイズすることで制約の多いWebXRでもいろんな表現を実現することができます。

skyboxの外に出る

See the Pen
world001 by Damien (@Damien_Ito)
on CodePen.

まずはskyboxの外に出る！

↑のサンプルWebVRは黒いskyboxの中からスタートしますが
少しずつカメラが後方に引いていきskyboxの外へ出てワールドの全体像を見られるというものになっています。

skyboxの中にシーンを作っておき、時間に応じてカメラを移動させ外の風景も見せることでシーンの変化を演出することができます。

ちなみにcameraの移動はalongpathというaframeコンポーネントを別途CDNで持ってきて使っています。

skyboxを変形させる

用意されたプロパティをいじることでskyboxを変形させることができるのをご存知でしょうか？

skboxのtheta-lengthやtheta-startを調整するとこのような表現も可能です。

See the Pen
skybox – theta by Damien (@Damien_Ito)
on CodePen.

ぜひシーンをドラッグでぐりぐり見回してみてください。

skyboxをグラデーションにする

こちらは外部のコンポーネントを使用しますが
skyをグラデーションにすることで単色ではできない繊細な表現が可能になります。

コンポーネントはこちら
https://github.com/zcanter/aframe-gradient-sky/blob/master/README.md

2. 出現方法を工夫する

これはWebARのお話ですが、マーカーWebARを作る場合、マーカーからシンプルにオブジェクトが出現するだけではあまり良い演出と言えませんよね…
なんというか、AR.jsのサンプルでよく見るやつ…

マーカーの認識をトリガーとして回転、移動などのアニメーションを組み合わせることで、オブジェクトの出現を綺麗に見せることができます。

会社の名刺
やっとWebAR実装しました

既にお渡ししてる方はぜひ見てみてください！ pic.twitter.com/rxoQ7oGIqH

— Damien / Arisa Ito (@saharu54) December 2, 2019

例えばこちらは著者の作成したWebAR名刺ですが
マーカーの中からオブジェクトや世界が広がるような演出になっています。

こちらはマーカー認識をトリガーとしてScaleが(0.1 0.1 0.1)から(1 1 1)に変化するアニメーションが設定されています。

マーカー認識を取得する方法はこちらの記事が参考になります。

▼『A-Frame＋AR.jsでマーカー検出と同時にアニメーションを再生する方法』
https://qiita.com/1pp0/items/059d5e5936ca5196f7e4

3. DRを応用する

こちらもWebAR向けの演出方法です。

AR / 拡張現実を扱う上で DR（Diminished Reality / 隠消現実感） という概念があります。
引き算のARと呼ばれることもありますが、現実世界から何かを消したり引くという概念のことで、これを応用し現実世界から情報の引き算することで没入感を高めたり演出効果に生かすことができます。

こちらを例をご覧ください。

「飛び出す絵本」が想像以上に飛び出す…🤔#1日1WebAR 2日目は本×ARを作ってみました！📕
ARなら、本の世界観がより豊かに表現できそうですよね！

もちろんWebなのでアプリ不要で手軽に楽しめます☺️#1day1WebARhttps://t.co/RortSOgcyi pic.twitter.com/3JIMf9Ik7K

— palanAR（パラナル） (@palanar_webar) December 2, 2019

上のWebARでは、マーカーを認識した時に現実世界である周りの風景がグッと暗くなる（背景の情報を引き算する）ことで現れた世界への没入感を高めています。

また、アプリARですが以下のような例もあります。

David Bowie isのARアプリが最高！😎

この場面は線描のオブジェクトが動いてるんですが、
現実世界にモノクロのフィルターをかけていて
その演出が見事にマッチしていて美しい。

AR表現するとき
現実を仮想に歩み寄らせるアプローチ、参考にしたい。 pic.twitter.com/3ZIWkb1S8O

— Damien / Arisa Ito (@saharu54) January 23, 2019

こちらはDavid Bowieの公式ARアプリですが、このシーンでは背景が完全にモノクロへ変化します。

前述したような没入感だけでなく、現実世界でさえもDavid Bowieの世界観に変えてしまう演出が見事です。

こちらのアプリは有料ですが、ARのUIや演出の参考になるためオススメです。
個人的にはipadなどの大きな画面の端末で楽しむことを推します。

▼『David Bowie is』
https://apps.apple.com/jp/app/david-bowie-is/id1447594485

まとめ

WebVR・ARの表現力を上げる裏ワザ3選をご紹介しました！

他にもCSSとの組み合わせで演出をリッチにしたり、その他の2D演出系のJSライブラリと組み合わせたり…
WebXRはWebである特徴を生かした様々な演出が可能です。

動作の重さの制約もありますが、しかし誰でも簡単にアクセスして楽しめるWebXRはまだまだ可能性があるはず…！

WebXRだからこそ良い、そんな表現を探求していきたいですね。