2019年12月24日

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

目次

  1. はじめに
  2. afameとは
  3. 1. skyboxを使いこなす
  4. 2. 出現方法を工夫する
  5. 3. DRを応用する
  6. まとめ

はじめに

新しい技術にチャレンジし続ける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をしばいていきますよ!!!

DutYKEBXcAAQy8D.jpeg (190.0 kB)
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をグラデーションにすることで単色ではできない繊細な表現が可能になります。

20180902162704.png (87.1 kB)

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

2. 出現方法を工夫する

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

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


例えばこちらは著者の作成した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と呼ばれることもありますが、現実世界から何かを消したり引くという概念のことで、これを応用し現実世界から情報の引き算することで没入感を高めたり演出効果に生かすことができます。

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

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

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

こちらは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だからこそ良い、そんな表現を探求していきたいですね。

0

0

AUTHOR

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP