DEV Community: HEAVEN ちゃん a.k.a いっこう

WebXR Device API が有効になっている Chrome 85 で Oculus 系の HMD が認識されない件とその解決方法が無い件について

HEAVEN ちゃん a.k.a いっこう — Mon, 14 Sep 2020 03:03:36 +0000

I'm sorry, this article is in Japanese only.

はじめに

本記事は『WebXR Device API が有効になっている Chrome 84 で Oculus 系の HMD が認識されない件とその解決方法について』の続編です。
Windows 版 Chrome を対象としています。
- Mac 版 Chrome も WebXR Device API をサポートしていますが、Oculus 系の HMD は Mac をサポートしていません。

TL;DR

Chrome 84 で使えた起動オプション --disable-features=XRSandbox --enable-features=oculus --force-webxr-runtime=oculus は Chrome 85 以降では使えない
Chrome 85 と Oculus 系 HMD の組み合わせで動作させる方法はない
Chrome ベータ版 v86.0.4240.22 と Chrome Canary 87.0.4257.0 は共にフラグの変更や起動オプションなしで正常に動作する

Ref. https://twitter.com/ikkou/status/1303199925702807552
Ref. https://twitter.com/ikkou/status/1303205860873703425
Ref. https://twitter.com/ikkou/status/1303206354383822848

Chrome 85 では Oculus 系 HMD が使えない

Chrome 84 は起動オプションで、Chrome ベータ版と Chrome Canary の挙動から推測するに Chrome 86 以降は起動オプション無しで、それぞれ動作しますが、その間にある Chrome 85 で Oculus 系 HMD で WebXR Device API を使ったコンテンツを楽しむ方法は無いようです。

ちなみに、Chrome 84 時点で起動オプションが示されていた『Chrome Hardware Support』から起動オプションの記述は既に消えています。

順当に行けば次の Chrome 86 で Chrome ベータ版と同じ、起動オプション無しで動作するようになると思われるので、Chrome 86 を待ちましょう。

また、Oculus 系 HMD の内、Oculus Quest ユーザーは、Oculus Link にこだわりがなければ WebXR Device API に対応している標準ブラウザアプリの Oculus Browser を使えば万事解決します:)

WebXR Device API が有効になっている Chrome 84 で Oculus 系の HMD が認識されない件とその解決方法について

HEAVEN ちゃん a.k.a いっこう — Tue, 25 Aug 2020 09:09:46 +0000

I'm sorry, this article is in Japanese only.

はじめに

本記事は『Chrome 79 から WebXR Device API が有効になるも Oculus 系の HMD が認識されない件とその解決方法について』の続編です。

事の発端

2019-12-20 JST 時点で Chrome v79 における解決方法を示しましたが、それから 8 ヶ月も経つと役に立たない記事になっているので、以降検索から着地した際に有意な情報を提供したいと考えています。

あれー？WebVRがChrome/Chrome Canaryで動かないな。フラグをオンにしても駄目になったのか？
Ref. https://twitter.com/shichi_14/status/1297838909208981512

その後の Update は追っていない且つ手前味噌ですが、ここに書いてある内容でも解決できない感じですか? ( 最新情報に Update しなくちゃ
Ref. https://twitter.com/ikkou/status/1298084628717215745

wakufactoryさんが書いている通り、WebXRに関するフラグの内容が変わっています。
なお、Firefox(v79.0)の場合はOculusLink、SteamVRでWebXR Sample PageもWebXR Exporterも動作しました。
Ref. https://twitter.com/shichi_14/status/1298107512097390600

解決方法

chrome://flags からそれらしい flag が消えてもうだめかと思いましたが、実は『Chrome Hardware Support - Immersive Web Developer Home』に解決方法が記載されています。

曰く、Chrome と Oculus 系 HMD の組み合わせの場合は --disable-features=XRSandbox --enable-features=oculus --force-webxr-runtime=oculus の起動オプション付きで Chrome を起動すれば OK です。

画像は Chrome の試験運用版にあたる Chrome Canary のものですが、ショートカットを右クリック→プロパティ→ショートカットのリンク先に上記の起動オプションを追加→適用して OK という手順を踏むことで解決できます。

なお、件のページにも記載されていますが、起動オプションは標準的な方法ではありません。今回のような Chrome と Oculus 系 HMD の組み合わせで WebXR Device API を用いた WebXR コンテンツを体験したいときのみ、この起動オプションを使い、普段使いはなるべく避けましょう。

というわけで 2020-08-25 JST 現在も、WebXR Device API に「真の標準対応」しているブラウザは Oculus Browser だけです!!

現場からは以上です。

VRoid Hub を使って “うちの子” を現実世界に重畳する

HEAVEN ちゃん a.k.a いっこう — Mon, 06 Jul 2020 10:06:48 +0000

I'm sorry, this article is in Japanese only.

TL;DR

ブラウザ版の VRoid Hub で AR を試したい人は ARCore supported devices に載っている Android スマートフォンを買うか、iPhone ユーザーの場合は App Store で WebXR Viewer をインストールすれば OK 、これで今すぐ “うちの子” に会える!!

はじめに

VRoid Hub に試験的機能として WebAR 表示機能が追加されました👏

Ref. https://twitter.com/vroid_pixiv/status/1277579662424588289

結果として “うちの子” を現実世界に連れてくることが可能になりました！

Ref. “うちの子” HEAVEN ちゃん

この記事では “うちの子” を現実世界に連れてくるための要件と、その技術的背景を(中の人ではないので推測して)紹介します。

動作要件

冒頭の繰り返しになりますが、“うちの子” を現実世界に連れてくるためには ARCore supported devices に掲載されている ARCore が動作する Android 7 以上 ( ※ARCore の最下限 OS バージョン ) のスマートフォンが必要です。

^ ARCore に対応した Pixel 3a の Google Chrome でアクセスすると AR 用のアイコンが表示される

有名どころでは Google による Android のリファレンス端末である Pixel シリーズの他、Galaxy S シリーズや一部の Xperia などが ARCore に対応しています。

参考までに、2020-07-06 JST 現在、最安で手に入れられる ARCore が動作する端末は、Rakuten Mobile 経由 ¥17,000 の Galaxy A7 です。

Ref. https://network.mobile.rakuten.co.jp/product/smartphone/galaxy-a7/

Ref. https://twitter.com/ikkou/status/1273908350904725509

^ iOS Safari でアクセスしても AR 用のアイコンは表示されない

対して iOS の Safari は ARCore に対応していないため、iPhone ユーザーは現実世界に連れてこれない、と思いがちですが、WebXR を強く推している Mozilla 謹製の WebXR Viewer を使うことで、iOS でも「擬似的に」 ARCore 相当の状態を作り出せるので、かろうじて “うちの子” を連れてこれます。

^ iOS でも XRViewer を使えば AR 用のアイコンが表示される

Ref. https://apps.apple.com/us/app/webxr-viewer/id1295998056

技術的背景

VRoid Hub で “うちの子” を現実世界に呼び出すための技術として Google 謹製の <model-viewer> が使われていることをソースコードから読み取れます。

この <model-viewer> は WebAR を実現するためのもので、Android であれば glTF/GLB ファイルを、iOS であれば USDZ ファイルを呼び出して現実世界に重畳できます。

Google 検索で犬や猫、最近では恐竜を検索すると AR で表示できるようになったことがニュースになりましたが、まさにそこで使われている技術です。

Ref. https://japan.googleblog.com/2020/07/travel-back-time-ar-dinosaurs-search.html

私はこの <model-viewer> を使い iOS/Android の両 OS に対応した「Keep Distance Ruler」を作ったりする程度にはこの <model-viewer> そして WebXR を推しています。

Ref. https://keep-distance-ruler.glitch.me/
Ref. https://www.watch.impress.co.jp/docs/series/nishida/1246569.html

閑話休題。

そういうわけで <model-viewer> を使えば iOS/Android の両 OS に対応させることは可能ですが、それを実現するには Android 用の glTF/GLB ファイルと iOS 用の USDZ ファイルが必要になります。

VRoid Hub で閲覧できる “うちの子” は、 VRM フォーマットのものです。この VRM フォーマットは glTF2.0 フォーマットを拡張したものになります。

Ref. https://vrm.dev/vrm_about/

そして Pixiv さんは VRM ファイルを Three.js で扱うためのライブラリ pixiv/three-vrm を提供しています。

Ref. https://www.pixiv.co.jp/news/press-release/article/7361/
Ref. https://github.com/pixiv/three-vrm/

この pixiv/three-vrm は GLTFLoader とあわせて使うものですが、この組み合わせによって VRM フォーマットの “うちの子” をウェブで取り扱い可能な glTF/GLB ファイル として扱えるようになり、結果として <model-viewer> を経由して現実世界に重畳できています。

iOS の Safari で “うちの子” を現実世界に重畳したい!!

XRViewr を使いたくない! 俺の Safari で見たいんだ! という強いこだわりをお持ちの場合、VRoid Hub では実現できませんが、Glitch 等で自前の環境を用意すれば iPhone の Safari でも現実世界に重畳できます。

手元に “うちの子” の VRM ファイル を用意します
うちの子.vrm を うちの子.glb にリネームして拡張子を変更
GLB ファイル を USDZ ファイル に変換する
- e.g. VECTARY に課金した上で import GLB ファイル then export USDZ ファイル
- e.g. usdzツール(※要ログイン) で import GLB ファイル then export USDZ ファイル
<model-viewer> を使って次の要領で USDZ ファイル を読み込ませる
- せっかくなので GLB ファイル も一緒に読み込んでいます

<!-- model-viewer に必要なコンポーネントを読み込む -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<!-- GLB ファイルと USDZ ファイルを読み込む -->
<model-viewer src="path/to/Uchinoko.glb"
              ios-src="path/to/Uchinoko.usdz"
              alt="うちの子"
              shadow-intensity="1"
              camera-controls
              interaction-prompt="auto"
              auto-rotate ar>
</model-viewer>

シェーダーの調整が必要なこともありますが、サクッと自前の環境で “うちの子” を呼び出せることが分かるかと思います。

なお、この場合 “うちの子” の 3D ファイルが一般公開状態になり、誰でもダウンロードもとい「誘拐」可能になります。そのあたりを気にする方は誰でも参照可能な状態で 3D ファイルを配置することはオススメしません。

現場からは以上です。

良き VRoid ライフを !!

Maps SDK for Unity を試してみた

HEAVEN ちゃん a.k.a いっこう — Fri, 19 Jun 2020 05:37:51 +0000

Hi, I'm @ikkou.

これはもう何番煎じかわからない「Maps SDK for Unity を試してみる」です。

Maps SDK for Unity とは

Maps SDK for Unity は Google マップの地形データを使った iOS/Android 向けのアプリケーションを開発できる Unity 向けの SDK です。

The Maps SDK for Unity is a set of development tools, services, and ready-made assets, that extend the Unity game development environment with features that allow you to create real-world mobile games—easily!

Reference: https://developers.google.com/maps/documentation/gaming/overview_musk

Google マップを使ったアプリケーションを開発する際にお世話になる Google Maps Platform の 1 カテゴリにあたります。

Reference: https://cloud.google.com/maps-platform/gaming

これまでは特定のゲーム開発企業向けにクローズドで展開されていましたが、2020/06/16 から一般公開されました。

簡単に言うと俺俺 Pokémon GO を作れるようになります。

後述しますが、小さな範囲でテストするだけなら無償、一定以上の DAU を集める場合は有償となります。

Maps SDK for Unity のはじめかた

わかりやすいチュートリアルが用意されているので、順を追って進めていきましょう。

下準備 GCP 編

Maps SDK for Unity を動かすには Semantic Tile API と Playable Locations API を有効化する必要があります。既に有効化済みの人は読み飛ばしてください。

To use Google Maps Platform gaming services, you must download the Maps SDK for Unity. The Semantic Tile API and the Playable Locations API will be enabled for you by default.

https://developers.google.com/maps/documentation/gaming/get_started_gaming

同 API が有効化されていない、あるいは GCP のアカウントを持っていない人は任意のプロジェクトを作成して有効化してください。無償枠の中で収めるつもりの人もクレジットカードの登録が必要です。大丈夫です。この時点では課金されません。

任意の Google アカウントでログインした状態で https://console.cloud.google.com/ にアクセスして有効化
任意のプロジェクトを作成
＋ APIとサービスを有効化 をクリック
API を有効化する
- Semantic Tile API を検索して 有効にする をクリック
- Playable Locations API を検索して 有効にする をクリック
認証情報を作成する
- APIとサービス > 認証情報 で ＋認証情報を作成 をクリックして APIキー を選択する
- 作成された 自分のAPIキー を控える
そのまま キーを制限 をクリックする
API キーの制限と名前変更 で名前をわかりやすいものに変更する ( 任意 )
API の制限 で キーを制限 をクリックして Semantic Tile API と Playable Locations API を選択して保存する

GCP の下準備は以上です。

ちなみに API キーが漏れると、悪用されるなどして高額な請求が届くことがあります。間違ってもスクショを Tweet したり GitHub にそのままあげるなどという暴挙に出ないでください。

下準備 Unity 編

Unity 2018.4 以降を用意する。
- 今回は 2019.2.21f1 で進めます。
Unity 2018 系にはここから、Unity 2019 系にはここからそれぞれ SDK をダウンロードして解凍する
- なぜか日本語のリファレンスページからこのリンクが記載されているページに着地できないので、英語が不慣れな人は英語ページを日本語翻訳した方が良い
Assets → Import Package →　Custom Package からダウンロードした GoogleMaps.unitypackage をインポートする

サンプルシーンを試してみる

下準備ができたら早速サンプルシーンを開いてください。

Assets > GoogleMaps > Examples > 01_GettingStarted > HelloWorld を開く
Basic Examples Script の Inspector にある Maps Services (Script) の Api Key に GCP の API キーを入れる
初期状態で Play をクリックすると「自由の女神像」が表示される
WASD キーで前後左右に、Q キーで垂直下降、E キーで垂直上昇する

用意されているサンプルシーン

MapsSDK for Unity には以下のサンプルシーンが用意されています。
具体的にどんなことができるのか、イメージを膨らませやすいです。

01_GettingStarted > HelloWorld
02_Fundamentals > MapService101
03_MapsStyling > StylingMaps101
04_Advanced >
- EditTimePreview
- Fencing (好き)
- Miscellaneous >
  - AddingComponent
  - DayAndNight (好き)
  - LocationFollower
  - Minimap (好き)
  - PrivateRoads
- MixedZoom
- MoreStyling >
  - BuildingBorders
  - BuildingSquashing (好き)
  - NineSlicing
  - Parapets
  - PrefabReplacement

すべてのサンプルシーンが説明されているわけではありませんが、各シーンの概要は Maps SDK for Unity Example Scenes を参照してください。

試すときは Scene ごとに API キーを設定してください。

浅草に行ってみる

各シーンにアタッチされているコンポーネントの Lat lng に任意の緯度と経度を指定して再生すれば、好きな場所を表示できます。

緯度と経度は、例えば Geocoding.jp で検索する方法や、Google マップで検索する方法があります。

緯度経度をコピペするにはGoogleMapで右クリック、「この場所について」
したに緯度経度出るけどコピペできない。クリック
左側に出るよ！

Reference: Google Maps SDK for Unity使ってみた！ - トマシープが学ぶ - おまけ：緯度経度をコピペする

今回、n 番煎じということもあり、東京タワーあたりは普通すぎるので、例えば観光名所として有名な浅草の雷門を指定しました。Lat lng は 35.711256, 139.796772 です。

実行すると、雷門、そして浅草寺に抜ける仲見世通りが再現されていることが分かります。

Android 実機で動かしてみる

Build Setting に Scene を追加するなど、Unity から Android 実機にデプロイするお作法に則って、Build And Run することで、繋いだ Android 実機で該当シーンを動かせるようになります。

今回は Pixel 3a にデプロイしてみました。

スマートフォンには移動に使う WASD キーと上昇下降に使う QE キーがありませんが、WASD キーの代わりに前後左右の動きと回転を担うコントローラーが、QE キーの代わりに上昇下降を担うコントローラーが用意されています。

Examples として用意しているものは Lat lng に緯度と経度を直接打ち込んでいるので、それこそ Pokémon GO のように「現在地」の地形データは表示できません。

お値段について

Maps SDK for Unity を使えば Google マップを使った位置情報連動型のアプリが作れることはわかりました。でもお高いんでしょ?

結論から言うと、始めるだけ「無償」です。個人用途/商用関係なく、一定以上の DAU を集めるなら「有償」です。

Reference: https://developers.google.com/maps/documentation/gaming/usage_billing

要点は以下の通りです。

従量課金制
毎月 $200 分のクレジットが付与されるので、その範囲に収まる限りは無償、超えた分が有償
- 無償クレジットは翌月以降に繰り越されない
課金形態はゲーム業界には馴染み深い DAU ( Daily Active User: 1ユーザーが1日に何回アクセスしてもDAU は 1 とカウントされる ) 基準
- ただし 1 ユーザーが異なる 2 デバイスからアクセスした場合の DAU は 2 とカウントされる
- ユーザー A がアプリのキャッシュを削除するとユーザー B として扱われ DAU は 2 とカウントされる
  - つまりリセマラ分がカウントされる ( と認識しています )
- DAU は PST ( 太平洋時間 ) の 0 時が基準となる
上記の条件より一般的な DAU とは異なる数字になる可能性がある
請求額は月間 DAU で決まる
- ユーザー A が 1 ヶ月間 30 日毎日アクセスした場合の月間 DAU は 30
- 月間 1,500,000 DAU までは 1,000 DAU あたり $10
- 月間 1,500,000 ~ 7,500,000 DAU はボリュームディスカウントで 1,000 DAU あたり $8
- 月間 7,500,000 DAU 以降は要問い合わせ

具体的な例は前述のページの Usage and billing examples に記されています。

月間の平均 DAU が 500 以下の場合は無償枠に収まる
- 無償枠に収まる月間 DAU は 20,000
  - 月間の平均 DAU が 640 以下 ( 640*31=19840 ) が無償枠に収まる閾値
- 今回のような「試してみた」程度や、小さなサービスであれば必要十分
  - 何らかのきっかけでバズると超える可能性がある
- 計算式は DAU 500 * 30 日間 = 15,000 月間 DAU
月間の平均 DAU が 1,000 の場合は有償枠になる
- 計算式は DAU 1,000 * 30 日間 = 30,000 月間 DAU
- 1,000 DAU あたり $10 なので請求額は $300
- 毎月 $200 分の無償クレジットを超えた $100 が実際の請求額になる
月間の平均 DAU が 75,000 の場合はボリュームディスカウントが発生した有償枠になる
- 計算式は DAU 75,000 * 30 日間 = 2,250,000 月間 DAU
- 月間 1,500,000 DAU までが 1,000 DAU あたり $10 で $15,000
- 月間 1,500,000 DAU 以降は 1,000 DAU あたり $8 で $6,000
  - 計算式は 2,250,000 - 1,500,000 = 750,000/1000 * $8
- 毎月 $200 分の無償クレジットを超えた $20,800 が実際の請求額になる
  - 計算式は $15,000 + $6,000 - $200

使用量は GCP の管理画面から確認できます。

まとめ

Maps SDK for Unity の概要、使い方、料金体系を紹介しました。

「試してみる」まではこの記事で実現できますが、例えば「俺俺 Pokémon GO を作る」は実現できません。用意されている Examples とドキュメントを参考にして適宜調べてください。

おまけ

原理を考えれば当たり前っぽいけれど Maps SDK for Unity を Cluster Creator Kit でそのまま使うのは無理でした。

Maps SDK for Unity と Cluster Creator Kit を組み合わせて動かせた
そしてこのままワールドアップロードしても生成された世界は反映されませんでした

https://twitter.com/ikkou/status/1273589839779094528

現場からは以上です。
良き Maps SDK for Unity ライフを！

iOS 9のMobile Safariで消えた2つの機能

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 16:39:24 +0000

この記事は 2015-09-25 JST 付で Qiita に投稿したものです。

日本時間の9月17日深夜2時、ついにiOS9がリリースされました!!
こんな投稿もあるように、地味ながら色々と便利なアップデートが加えられたiOS9のMobile Safariですが、実はひっそりと消えてしまった機能もあります。

2016/03/22 追記
本日、03/22にiOS 9.3正式版が公開されました。
早速アップデートして試したところ、iOS 9.2同様にapple-mobile-web-app-status-bar-styleは動作するがapple-touch-startup-imageは動作しないという挙動に変更はありませんでした。

2015/12/09 追記
本日、12/09にiOS 9.2正式版が公開されました。
早速アップデートして試したところ、前評判通りapple-mobile-web-app-status-bar-styleは再び動作するようになりましたが、残念ながらapple-touch-startup-imageは引き続き動作しませんでした。

2015/10/30 追記
先日、10/28にiOS 9.2 betaが開発者向けに公開されました。
まだbeta版ですが、apple-mobile-web-app-status-bar-styleが使えなくなった問題が修正される見込みです。仕様変更ではなくバグだったのでしょうか……。
この問題にぶつかった人は、同様にiOS 9で消えたapple-touch-startup-imageも一緒に修正されていることを期待しながら、全ユーザー向けの公開を待ちましょう。

TL;DR

iOS 9でapple-mobile-web-app-status-bar-styleが死んだ!
iOS 9でapple-touch-startup-imageが死んだ!
iOS 9.0.1時点では対処方法がなさそう

apple-mobile-web-app-status-bar-style is dead 💀

apple-mobile-web-app-status-bar-styleとは

apple-mobile-web-app-status-bar-styleはmeta要素の指定のひとつで、Webサイトをフルスクリーンモードにしてネイティブアプリのように見せるapple-mobile-web-app-capableと併用することで、Mobile Safariのステータスバーをアレするやつです。

This meta tag has no effect unless you first specify full-screen mode as described in apple-apple-mobile-web-app-capable.
Safari HTML Referenceより

使い方

前述の通り、apple-mobile-web-app-capableの指定が前提となります。

<meta name="apple-mobile-web-app-capable" content="yes">

その上で、apple-mobile-web-app-status-bar-styleの指定を行ないます。

この時、このmeta要素を記述しない、あるいはcontentにdefaultを指定すると、ステータスバーの見た目は普段通りと変わりません。

blackを指定するとアドレスバーが消え、不透過の黒背景になります。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

black-translucentを指定すると、不透過ではなく透過の黒背景となり、ステータスバーが別レイヤーとなり、表示領域がステータスバーの下に潜り込むようになります。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

iOS 9でどう変わったか

ネイティブアプリのように振る舞うapple-mobile-web-app-capableは今まで通り動作しますが、apple-mobile-web-app-status-bar-styleの指定が効かなくなりました。

blackを指定しても、black-translucentを指定しても、defaultを指定した状態、つまり何も変化しなくなりました。

思い返せば、apple-mobile-web-app-status-bar-styleはOSのアップデートによる仕様変更の多い指定でした。

Safari HTML ReferenceのSupported Meta Tagsにはまだ掲載されているので、一時的なバグなのかもしれませんが、初期ベータの頃から始まり、先日アップデートされたiOS 9.0.1でも変わらず動作しないので、バグではなく、仕様変更なのかもしれません。

apple-touch-startup-image is dead 💀

apple-touch-startup-imageとは

apple-touch-startup-imageもapple-mobile-web-app-status-bar-style同様に、link要素の指定のひとつで、適切な画像を指定することで、ネイティブアプリのようなスプラッシュ画面を表示することが出来ます。

On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline.
Safari HTML Referenceより

使い方

この指定もやはりapple-mobile-web-app-capableと併用して使います。

<meta name="apple-mobile-web-app-capable" content="yes">

その上で、メディアクエリを活用して、デバイス別、縦横別にスプラッシュ画面で表示する画像を指定します。

例えば、Google DevelopersのWeb Fundamentalsでは、tfausak’s gistで示された指定が例として挙げられています。

Apple のドキュメントではこのトピックはほとんど取り上げられませんが、開発者コミュニティは、高度なメディアクエリを使用して、すべての端末を対象にする方法を考え出しました。これによって適切なデバイスを選択し、正しいイメージを指定することができます。 [tfausak’s gist] の好意により、ここに具体的な解決策を示します(//gist.github.com/tfausak/2222823):

<!-- iPad retina portrait startup image -->
<link href="https://placehold.it/1536x2008"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 2)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">

<!-- iPad retina landscape startup image -->
<link href="https://placehold.it/1496x2048"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 2)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">

<!-- iPad non-retina portrait startup image -->
<link href="https://placehold.it/768x1004"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 1)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">

<!-- iPad non-retina landscape startup image -->
<link href="https://placehold.it/748x1024"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 1)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">

<!-- iPhone 6 Plus portrait startup image -->
<link href="https://placehold.it/1242x2148"
      media="(device-width: 414px) and (device-height: 736px)
             and (-webkit-device-pixel-ratio: 3)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">

<!-- iPhone 6 Plus landscape startup image -->
<link href="https://placehold.it/1182x2208"
      media="(device-width: 414px) and (device-height: 736px)
             and (-webkit-device-pixel-ratio: 3)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">

<!-- iPhone 6 startup image -->
<link href="https://placehold.it/750x1294"
      media="(device-width: 375px) and (device-height: 667px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone 5 startup image -->
<link href="https://placehold.it/640x1096"
      media="(device-width: 320px) and (device-height: 568px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone < 5 retina startup image -->
<link href="https://placehold.it/640x920"
      media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone < 5 non-retina startup image -->
<link href="https://placehold.it/320x460"
      media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

ちなみに、Web Fundamentalsでは、iPhone 6/6 Plus発売以前のものが例として提示されていますが、最新のtfausak’s gistでは、iPhone 6/6 Plusのdevice-pixel-ratio: 3に対応したものにアップデートされています。

iOS 9でどう変わったか

せっかくデバイスごと、縦横ごとに適切なスプラッシュ画面を必要な枚数だけ用意したとしても、iOS 9から動作しなくなりました。

どうすれば良いのか?

対応方法

9月25日現在、最新のiOS 9.0.1では真っ当な対応方法が見つかっていません。

ちなみに、Apple Press Infoにリリースが出ている通り、iOS 9への移行率は、iOS 9のリリースから数日で50%を超えています。

Appleはまた、新しいiOSへの移行が過去最速となり、すでに50パーセント以上のデバイスがiOS 9となっていることも併せて発表しました。
http://www.apple.com/jp/pr/library/2015/09/21iPhone-6s-iPhone-6s-Plus-Arrive-on-Friday-September-25.html

本日、9月25日にはiOS 9がデフォルトとなっているiPhone 6sとiPhone 6s Plusが発売され、iOS 9の比率はさらに上がることが予想されます。

このまま仕様変更となるのか、あるいは修正されるのか、こればかりは予想出来ませんが、特にapple-touch-startup-imageは適切に指定すれば素敵なWebアプリに仕立てあげられるので、復活すると嬉しいなーと思っています。

リファレンス

WebAR の現状確認 2019 Winter

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 16:38:06 +0000

この記事は 2019-12-20 JST 付で Qiita に投稿したものです。

この記事は ZOZOテクノロジーズ #2 Advent Calendar 2019 20日目の記事です。
昨日は @mitanih さんによる「【WEB版 WEAR】position: sticky で似ているアイテム検索の使いやすい UI/UX を実現する」でした。

はじめに

2019/11/01 より ZOZO Technologies, Inc. に参画した AR, VR, MR な xR あるいは XR 領域やっていきの ikkou です。お仕事では XR × Fashion Tech を軸としてアレコレやっていく感じになりますが、個人の活動としては注目すべきウェブ技術のひとつである WebXR を特に推しています。

本記事では 2019/12/12 に XR-Hub Cafe で催された WebAR TOKYO #01 のオープニング・セッションで喋った「The past and future of WebAR - The WebXR Device API was shipped in Chrome 79」のアフターフォローとして 2019/12/20 現在の、特にモバイルにおける WebAR の動向を具体的な開発手法も交えながら説明します。

難易度は控えめ。初学者向けです。

はじめて WebAR という言葉を聞いた方へ

今まで WebAR に触れたことがない場合、取り急ぎ iPhone ユーザーであれば Safari で、Android ユーザーであれば ARCore 対応端末の Chrome で、Google 検索で「猫」と検索してみてください。

検索結果を少しスクロールすると出てくる「3D 表示」というボタンをタップして、表示される指示に従うと、可愛い猫が現実世界に現れます。このように『ブラウザをきっかけとした AR 表現』を本記事では WebAR と定義しています。

Web AR だったり webAR だったり、小文字・大文字の違い、半角スペースの有無の違いはありますが、個人的な見解として『ブラウザをきっかけとした AR 表現』は総じて WebAR であると考えています。少なくとも技術に対する名称であって商品名ではない認識です。

後述しますが、『ブラウザをきっかけとした VR 表現』を WebVR と言い、それらをひっくるめたものを WebXR と言います。

もっと知られて欲しい WebXR Device API の話

WebAR に触れる前に、まずは WebXR Device API について説明します。

The WebXR Device API was shipped in Chrome 79

US 時間で 2019/12/10 より Chrome 79.0.3945.79 が正式公開されました 🎉
2019/12/20 現在で Chrome のバージョンが 79 になっていない人は今すぐアップデートして Chrome を再起動してください。

Chrome 79 に含まれるアップデートは次の YouTube 動画で確認可能です。
https://www.youtube.com/watch?v=L0OB0_bO5I0&feature=youtu.be&t=59

様々なアップデートが入っていますが、Chrome 79 から WebXR Device API に正式対応しました。Chrome 78 以前であれば chrome://flags から明示的に ON にしなければならなかった WebXR Device API が標準で使える状態になった、記念すべきアップデートです。

WebXR Device API とは何か

WebXR Device API を一言で説明すると「ブラウザ経由で (VR|AR|MR) HMD を扱いたいときに使う API」です。(VR|AR|MR) HMD の向きや加速度、コントローラーの位置を取得できます。

もともとは Oculus Rift や HTC VIVE などの VR HMD のみを対象としていた WebVR API が存在していて、時代の流れとともに AR HMD や MR HMD が登場し、その対象範囲は VR だけに留まるものではないという思いから WebXR Device API が生まれました。

2017/12/12 をもって WebXR Device API に置き換わり、最終バージョンを v1.1 として API の更新は停止しました。

Development of the WebVR API has halted in favor of being replaced the WebXR Device API. Several browsers will continue to support this version of the API in the meantime.

WebVR Editor’s Draft, 12 December 2017
https://immersive-web.github.io/webvr/spec/1.1/

Spec of WebXR Device API

ご存知の通り Web の Spec つまり仕様は W3C によって策定されていて、例に漏れず WebXR Device API もその対象に含まれています。

状況としては W3C の正式な策定フェーズのひとつである Working Draft のものと、そこに至る前段階である Editor’s Draft それぞれの仕様が存在しています。

WebXR Device API, W3C Working Draft, 10 October 2019 https://www.w3.org/TR/webxr/
WebXR Device API, Editor’s Draft, 11 December 2019 https://immersive-web.github.io/webxr/

各ブラウザの実装状況はお馴染みの Can I use... Support tables for HTML5, CSS3, etc に掲載されている通り、Chrome は 79 から 条件付き で実装、他ブラウザに関しては未対応という状況です。

条件付きというのは、一例として、前述の通り WebXR Device API 自体は Chrome に対して正式公開されていますが、その拡張モジュールにあたる WebXR Augmented Reality Module はまだ特定の状況下でフラグを立てないければ利用できないためです。

WebXR Augmented Reality Module - Level 1, W3C First Public Working Draft, 10 October 2019
https://www.w3.org/TR/webxr-ar-module-1/

WebAR に WebXR Device API は必要か?

個人的な見解としては「必ずしも必要ではない」が回答になります。

本記事では、前述の通り WebAR の定義を「ブラウザをきっかけとした AR 表現」としていますが、これを実現するために必ずしも WebXR Device API の利用有無は問いません。

さらに言えば、この後に出てくる事例の多くは WebXR Device API を必要としないものばかりです。とはいえ W3C が策定する Spec のひとつに WebXR Device API があることは、ぜひ覚えておいてください。

もっと知られて欲しい AR の話

WebAR に至る過程として WebXR Device API に触れましたが、そもそも「ARとは何か」についても触れておきましょう。

AR とは何か

AR は Augmented Reality、読み方は「オーグメンテッドリアリティ」の略称で、学術的な日本訳は「拡張現実感」です。現実世界に対してコンピュータによる情報を付加、つまり現実を拡張する技術を指します。現実を拡張して情報を付加することを「重畳する」と表すこともあります。

AR の世界観を説明する際に、リファレンスとしてよく用いられる事例として「電脳コイル」、「劇場版ソードアート・オンライン -オーディナルスケール-」、「虐殺器官」などが挙げられます。最近では「Pokémon GO」のほうがしっくりくるかもしれません。

WebAR の話からは離れますが、もしも AR そのものについてより深く知りたい場合は「ARの教科書」がおすすめです。

2 分類 3 パターンに大別できる AR

AR は次の 2 分類 3 パターンに大別できます。

位置情報に連動する Location based AR
Vision based AR
1. 二次元バーコード、いわゆる QR コード等のマーカーを認識する マーカー型
2. マーカーではなく空間/物体認識による マーカーレス型

Location based AR

主として GPS あるいは方位磁石による向きを軸としたものを指します。
WebAR ではないですが、分かりやすい事例として、懐かしいところでは「セカイカメラ」、誰もが知っているところでは初期の「Pokémon GO」が挙げられます。

例えば AR.js を利用することで開発可能です。

マーカー型 Vision based AR

最近では観光地で見かける機会も増えた、二次元バーコードを始めとする「マーカー」にカメラをかざすと何かが出てくるものは、このマーカー型が該当します。

これも AR.js を利用することで開発可能です。

マーカーレス型 Vision based AR

Location based AR の事例として挙げた「Pokémon GO」の「AR+」はこのマーカーレス型 Vision based AR も兼ねていると言えます。

表示するだけであれば AR.js で開発可能です。

あるいは平面を認識してオブジェクトを重畳するだけであれば、Android は ARCore on Chrome である <model-viewer> で、iOS は Android 同様に <model-viewer> あるいは ARKit on Safari である AR Quick Look で開発可能です。

冒頭で事例として挙げた「猫」はまさにこちらです。

WebAR の利用事例

WebAR は今や誰もが使える技術になっています。具体的な開発の話に移る前にいくつかの「サンプルではない商用の利用事例」を実際に試してみましょう。

ここで挙げる利用事例は iOS/iPadOS あるいは Android 端末からアクセスしてください。
また、取り上げる事例は本記事の筆者と何かしらの利害関係があるわけではありません。

0. Google の検索結果

本記事の冒頭で挙げている「猫」の事例です。

2019/10 時点では 29 種類の動物を呼び出せるそうです。
source: 「Google検索で動物のAR」登場するのは全部で29、その種類をよく見たら

1. 自転車販売サイト Pure Cycles

Pure Cycles
https://www.purecycles.com/products/urban-commuter-bike?variant=36496640138

Apple の Quick Lookギャラリーからもリンクされている iOS/iPadOS 向けの AR Quick Look 公式の利用事例です。

2. CITIZEN AR try

ARリストバンドを腕につけてスマートフォンをかざすとリアルなサイズ、質感の時計を試着できるサービスです。
https://ar-try.citizen.jp/

スニーカーを試着できる WANNABY の ‎Wanna Kicks をはじめとして AR と試着は相性が良いのですが、それを WebAR としてプロダクションレベルで実現するのはやや難しい状況にありました。

手っ取り早く実現できる <model-viewer> あるいは AR Quick Look は平面に対してのみ重畳可能で、マーカーレス型は 8th Wall という選択肢はあれどややお高い、となるとマーカー型を選択することになるが腕時計でそれをやるには手首にマーカーを巻く必要がある…ということをプロダクションレベルでやってのけた事例です。

CITIZEN AR try では、店頭で配布している、あるいはウェブサイトでダウンロードできる AR リストバンドを印刷して切ってテープで腕に巻くことで、Men's であれば ATTESA または PROMASTER を、Ladies's であればXC、CITIZEN L、wicca シリーズの時計を試着できる WebAR コンテンツです。

3. ティフォニウム・チョコレート

ティフォニウム・チョコレートは、MR シアター TYFFONIUM を展開するティフォン株式会社が、渋谷 PARCO B1F にある Tyffonium Cafe とティフォニウムお台場で販売しているお土産のチョコレートです。

source: https://www.youtube.com/watch?v=UPQ9bGR98qg

チョコレートに描かれたイラストの部分をスマホで読み取ると、かわいいキャラクターたちが飛び出し、あなたの代わりにメッセージを伝えてくれます。出てくるメッセージは全部で４種類。食べて「おいしい」、見て「楽しい」。誰かに想いを伝える時に、こんなギフトはいかがでしょう。
https://www.tyffonium.com/location/cafe-shibuya/gift.html

Tyffonium Cafe ではネイティブアプリベースの「AR（拡張現実）とスイーツを組み合わせた新体験スイーツ『魔法パフェ®』」が有名ですが、このお土産のチョコレートはネイティブアプリを必要としない WebAR コンテンツとなっています。

YouTube 動画を見ると WebAR を試す画面まではアクセスできますが、肝心のマーカーは動画には映っていないので、試したい方は実際に手にとってみてください:)

4. Amazon バーチャルメイクライブモード

AR の活用事例として ‎Wanna Kicks のようなシューズの試着系と同じくらい多いのが、メイク系です。
その多くは iOS/iPadOS・Android アプリで動作しますが、Amazon バーチャルメイクライブモードは、顔認識に関して強みを持つ ModiFace 社の技術を用いた、マーカーレス型 Vision based の WebAR コンテンツです。

これもまた実際に試してみるのが早いので、下記の「バーチャルメイク対象商品」ページにアクセスし、最初に表示されるリップを選択して、『メイクしてみる「試す」』ボタンをタップし、WebAR によるメイクアップを体験してみてください。

バーチャルメイク対象商品
https://www.amazon.co.jp/b?node=6453577051

もちろん WebAR なので Amazon の iOS/iPadOS・Android アプリではなく、ブラウザからアクセスしてください。

同じような仕組みは、イヴ・サンローラン公式オンラインブティックでも取り入れられています。

余談ですが、Amazon バーチャルメイクの取り組みについて興味深い note 記事を見つけたので貼っておきます。
ref. AmazonがARバーチャルメイク導入、ライブモードも。美容に注力する理由を聞く
https://beautytech.jp/n/nf92a572f12b4

5. AWE Portal Hunt

個人的に今まで体験してきた WebAR コンテンツでもっとも必然性を感じられ、楽しめたのは WebAR のソリューションを提供する 8th Wall プレゼンツの「AWE Portal Hunt」です。

The AWE Portal Hunt commemorates 10 years of AWE with 10 unique Web AR experiences. Attendees used their smartphones to unlock the relics’ secret portals, which released content from another dimension. If you missed out, here are a few highlights:
https://medium.com/8th-wall/awe-2019-portal-hunt-web-ar-experience-a66727bb7e01

これは、AWE という AR 関連において世界でもっと大規模と言われているカンファレンスの「本拠地」である AWE USA 2019 で企画の一環として投入された事例です。

一言で表現するなら「WebAR を使った AR スタンプラリー」ですが、よく有りがちな「スタンプラリーのスタンプ部分を AR にしてみました！」みたいなものではなく、WebAR の特性を生かし、且つ裏側を WebSocket で繋いで複数人以上が同時に体験することで成立する WebAR コンテンツとなっていました。

先の Medium 記事にも実際の模様が残されていますが、現地での動画ツイートを残してあるので興味のある方は見てください。

Ref. https://twitter.com/ikkou/status/1133774874713837568

6. NIGHT SYNC YOKOHAMA (期間限定 ~12/27)

本記事の公開日である 2019/12/20 の 1 週間後である 2019/12/27 までの期間限定ですが、横浜で開催中のナイトアートプログラム NIGHT SYNC YOKOHAMA」で WebAR の特別演出を体験可能です！

特別演出では、スマートフォンのカメラに映る実際の風景に、デジタル画像を重ね、目の前の世界を拡張する「Web AR」の技術を活用します。
スマートフォン上のAR空間と、新港中央広場のメインステージのプロジェクションや広場の樹木、広場周辺の建物が一体となったダイナミックな演出とともに、インタラクティブなAR体験をお楽しみください。
https://night-sync.yokohama/special-contents/

裏側の仕組みは後述する、個人として使うにはちょっとお高い 8th Wall をプロダクションレベルで使用しています。これはなかなか貴重な機会だと考えられるので、都合を合あわせられる方は全力で行くと良いのではないでしょうか！

WebAR コンテンツの開発

ここまで様々な角度から WebAR を構成するものに触れてきました。ここから先は具体的な開発方法をいくつか紹介します。

iOS における WebAR の歴史

2019/12/20 現在では特別な憂いもなく iOS/iPadOS・Android で WebAR を開発・体験できますが、ここに至るまでにいくつかの物語がありました。特に iOS 12.2 を巡る物語は、渦中にいた人にとっては胃がキリキリするものでした。
本記事では深く触れませんが、当時の経緯は別途 Qiita に残してあるので興味のある方は覗いてみてください。

WebAR コンテンツを開発するための前提知識

前述の通り、本記事では「ブラウザをきっかけとした AR 表現」を WebAR としています。つまり、開発には少なからずウェブを構成する最小要素である HTML, CSS, JavaScript に対する最低限の理解が必要となります!

取っ掛かりだけであればコピペで動かせるので、先ずは気負わずにトライしてみてください！

WebAR コンテンツをデプロイするための要件

WebAR を実現する重要な要素のひとつとして「ブラウザからカメラを呼び出す」というのがあります。これは WebRTC で MediaDevices.getUserMedia() を呼び出す形となりますが、実現には HTTPS 環境 が必要です。

常時 SSL がデファクトスタンダードになりつつウェブ業界ですが、開発環境で HTTPS 環境 を必要とするのはやや手間かもしれません。その場合は無償で HTTPS 環境 を用意できる Let's Encrypt や、使い方によっては GitHub Pages や Glitch を用いるのも有りかもしれません。

また、WebAR として現実世界に重畳する 3D モデル ( .usdz ファイルまたは .glb ファイル ) も必要になりますが、本記事では 3D モデルの具体的な作成方法には触れません。

商業利用は別として、個人利用の範疇で試すだけであれば、例えば Google Poly あたりでダウンロード可能な 3D モデルを入手するのが良いかもしれません。

source: Google Poly でダウンロード可能な 3D モデルの例

WebAR コンテンツの開発手法

いくつか方法がありますが、本記事では 2019/12/20 現在で「現実的」且つ「代表的」な例を挙げます。

Google の検索結果のような、現実世界に重畳するだけであれば <model-viewer> あるいは AR Quick Look を利用する
二次元バーコードを読み込んで何かをしたい場合は AR.js を利用する
「Pokémon GO」のような位置情報ベースの何かをしたい場合も AR.js を利用する
二次元バーコード以外のマーカー型で何かをしたい場合は 8th Wall を利用する

1. `<model-viewer>` あるいは `AR Quick Look` を利用する

Google の検索結果のような、現実世界に重畳するだけであれば <model-viewer> あるいは AR Quick Look を利用するのが手っ取り早いです。
3D モデルが必要という課題はありますが、E コマースとの相性も抜群です。

1.1 `<model-viewer>` の利用

<model-viewer> は Google 謹製の WebAR を簡単に始められる Web Components のひとつです。

<model-viewer> is a web component that makes rendering interactive 3D models - optionally in AR - easy to do, on as many browsers and devices as possible. strives to give you great defaults for rendering quality and performance.
https://github.com/GoogleWebComponents/model-viewer

「百聞は一体験にしかず」なので、先ずは <model-viewer> のサンプルを見てください。
https://model-viewer.glitch.me/

1.2 `<model-viewer>` の適用範囲

WebAR における <model-viewer> の適用範囲は iOS/iPadOS 12 以降と ARCore 適用の Android、そして Magic Leap 1 のブラウザである Helio です。
※ 1.1 のサンプルは Helio 向けの記述がないので、Magic Leap 1 では動作しません。

1.3 `<model-viewer>` の最小構成

ARCore 適用の Android と Helio 向けには GLB ファイルを、iOS/iPadOS 12 以降向けには USDZ ファイルを表示させる最小構成です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Deomo: model-viewer</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
  </head>
  <body>
    <model-viewer
      src="path/to/modelName.glb"
      ios-src="path/to/modelName.usdz"
      ar magic-leap>
    </model-viewer>
  </body>
</html>

<model-viewer> で WebAR 向けに指定する必須項目は src と ar だけです。
オプションとして iOS/iPadOS 向けにも適用させたい場合は ios-src を、Helio 向けにも適用させたい場合は magic-leap を記述してください。

1.4 `AR Quick Look` の利用

AR Quick Look は Apple 謹製の WebAR を簡単に始められる仕組みです。

Safari、メッセージ、メール、News、メモなどの内蔵のiOS Appは、Quick Lookを使ってバーチャルオブジェクトのUSDZファイルを3DやARで表示します。Quick LookビューをAppやWebサイトに埋め込むことで、キラキラしたバーチャルオブジェクトに現実世界の周囲の景色が映り込むなど、極めて詳細にレンダリングされたオブジェクトがユーザーに表示されます。
https://developer.apple.com/jp/augmented-reality/quick-look/

前述している Pure Cycles の事例もそうですが、サンプルを含む事例は公式が参考になります。

ref. Quick Lookギャラリー - 拡張現実 - Apple Developer
https://developer.apple.com/jp/augmented-reality/quick-look/

1.5 `AR Quick Look` の適用範囲

モバイル向け OS をまたいで利用可能な <model-viewer> に対して AR Quick Look は iOS/iPad のみにしか適用できません。

ただし <model-viewer> と違い、iOS/Android の標準昨日である ARKit を利用するため、外部 JavaScript を必要としないことが特長です。

1.6 `AR Quick Look` の最小構成

iOS/iPadOS 12 以降向けに USDZ ファイルを表示させる最小構成です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Deomo: AR Quick Look</title>
  </head>
  <body>
    <a rel="ar" href="path/to/modelName.usdz">
      <img src="path/to/modelName.png">
    </a>
  </body>
</html>

<model-viewer> と違い外部 JavaScript を読み込む必要性はありませんが、3D モデルの画像を用意し、<a> タグで括って .usdz ファイルを読み込ませる形になります。

環境によっては MIME Type の追加が必要になるので、もし動かない場合は MIME Type の追加も試してみてください。

AddType model/vnd.pixar.usd .usdz
AddType model/usd usdz

2. 二次元バーコードを読み込んで何かをしたい場合は AR.js を利用する

<model-viewer> と AR Quick Look は現実世界の平面に重畳することを目的としていましたが、例えば二次元バーコードをはじめとする何かしらのマーカーを基準として表示したい場合は、「マーカー型 Vision based AR」を実現する AR.js を使うのが手っ取り早いです。

2.1 `AR.js` の利用

「AR 年賀状」や「AR 名刺」でお馴染みの AR.js は WebAR のための軽量 JavaScript ライブラリです。

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Marker based and Location based AR.
https://github.com/jeromeetienne/AR.js

昨今の WebAR コンテンツの多くは、この AR.js によって成り立っています。

2017/02/17 に v0.9.0 でリリースされたのを皮切りに、精力的にアップデートが加えられ 2019/10/09 にリリースされた v2.0.0 から、後述する Location Based AR が可能になりました。

これまた「百聞は一体験にしかず」なので、公式サンプルである hiro marker image を PC などで表示し、スマートフォンから augmented reality webapps にアクセスし、AR.js による WebAR を体験してみてください。

このサンプルでは hiro marker image の上に黄色のボックスが表示されます。
source: https://codepen.io/nicolocarpignoli/full/vMBgob

2.2 `AR.js` の背景

WebAR コンテンツの開発には直接関係のない余談ですが、AR.js は内部的には ARToolKit の仕組みを利用しています。

ARToolKit そのものは C 向けに書かれ、そこから Java, Processing, C# 向けの NyARToolkit5 が生まれ、さらにそこから AS3 向けの FLARToolKit が生まれ、さらにさらにそこから JavaScript 向けの JSARToolkit が生まれました。

AR.js は ARToolKit を Emscripten で直接 JavaScript 化した JSARToolKit v5 を利用、さらに WebXR の実現を容易にする、最近ついに v1.0.0 のリリースを迎えた JavaScript フレームワーク A-Frame と、ウェブにおける 3D 描画のデファクトスタンダードである JavaScript ライブラリ three.js によって、とても使いやすい JavaScript ライブラリとなっています。

2.3 `AR.js` を使ったマーカー型 `Vision Based AR` の最小構成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Deomo: Vision Based AR using AR.js</title>
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene vr-mode-ui="enabled: false" embedded arjs>
      <a-marker preset="hiro">
          <a-box position='0 0.5 0' material='color: yellow;'></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

source: https://codepen.io/nicolocarpignoli/pen/vMBgob

AR.js は A-Frame と組み合わせて利用します。はじめに A-Frame を読み込み、その後で AR.js を読み込みます。原則として WebAR に関連する HTML の記述は A-Frame 固有の <a-*> タグで構成されます。

肝となるのは、<a-marker> でマーカーを指定し、重畳させたいものを括ることです。

マーカーのプリセットは ARToolKit の生みの親である加藤博一先生の名前からとった hiro と、漢字の「人」を模した kanji の他、例えば AR.js Marker Training で独自のマーカーを作って指定することも可能です。

<!-- preser="hiro" -->
<a-marker preset="hiro">

<!-- preser="kanji" -->
<a-marker preset="kanji">

<!-- preset="pattern" で .patt ファイルを指定 -->
<a-marker type="pattern" url="path/to/pattern-marker.patt">

独自のマーカーを指定する場合は、preset を pattern として、url で .patt ファイルまでのパスを指定します。

3. 「Pokémon GO」のような位置情報ベースの何かをしたい場合も `AR.js` を利用する

AR.js は v2.0.0 から GeoAR.js が統合され、Location Based AR を実現できるようになりました。

AR.js, on its aframe implementation, comes with few custom components that make possible to integrate data from GPS sensors.
https://github.com/jeromeetienne/AR.js#what-location-based-means

WebAR における Location Based AR とは何かを示す note 記事が公式からリンクされているので、WebAR で「Pokémon GO」のような Location Based AR を実現したい方は参照してみてください。

ref. Location Based (GPS) Augmented Reality on the Web
https://medium.com/chialab-open-source/location-based-gps-augmented-reality-on-the-web-7a540c515b3c
ref. Build your Location-Based Augmented Reality Web App
https://medium.com/chialab-open-source/build-your-location-based-augmented-reality-web-app-c2442e716564

3.1 `AR.js` を使った `Location Based AR` の最小構成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Deomo: Vision Based AR using AR.js</title>
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene vr-mode-ui="enabled: false" embedded arjs>
      <a-entity gltf-model="https://modelviewer.dev/examples/assets/Astronaut.glb"
                gps-entity-place="latitude: 35.665251; longitude: 139.712092;"/>
      <a-camera gps-camera rotation-reader></a-camera>
    </a-scene>
  </body>
</html>

3度目の「百聞は一体験にしかず」として、「表参道」交差点に 3D モデルが表示される ( はずの ) サンプルを試してみてください。
e.g. https://clean-enigmosaurus.glitch.me

マーカー型 Vision Based AR との大きな違いは、gps-entity-place で現実世界に重畳する座標となる緯度 latitude と経度 longitude を指定することと、a-camera 要素に gps-camera 属性と rotation-reader 属性を追加することです。

指定する緯度と経度は、住所から割り出す Geocoding などで検索できます。ちなみに、このサンプルコードの座標は「表参道」交差点付近を指しています。

この最小のサンプルでは、ハードコーディングされた座標に指定の何かを重畳するだけですが、位置情報サービス系の API と繋ぐことで、Location Based AR の真価を発揮できるようになります。あるいは WebAR で街ナカ AR 謎解きゲームを作ることすら可能です。ドキュメントを含めて、まだ多くの実例がないので、今後増えてくることを期待しています。

4. 二次元バーコード以外のマーカー型で何かをしたい場合は 8th Wall を利用する

気軽に実現できる <scene-viewer> や AR Quick Look、そして WebAR を実現するためにお世話になることの多い AR.js を使った方法を紹介してきましたが、2019/12/20 現在、それらを使っても実現できないのが、例えば何らかの「イラスト」や「写真」をきっかけにして発動する「二次元バーコード以外のマーカー型 AR」です。

この「二次元バーコード以外のマーカー型 AR」を WebAR で実現するのが 8th Wall です。他と異なり、プロダクション利用はもちろんのこと、デプロイしての実機確認から「有償」となります。

例によって公式のサンプルを覗いてみてください。
https://apps.8thwall.com/8w/jini/

「有償」なだけあって出来ることは多く、平面検出たる World Tracking はもちろんのこと、本記事で取り上げている他の手段では実現できない画像認識たる Image Targets が使えます。先行事例として LEGO や addidas といった大企業のものもあります。また、2019/12/20 現在は見れなくなっていますが、映画「Spider-man: Into the Spider-verse」に合わせた WebAR 施策をこの 8th Wall を使っていたことで、一部の界隈では話題になりました。

「Spider-man: Into the Spider-verse」施策は公式のサンプル動画が残っています。

Ref: https://www.youtube.com/watch?v=B7qj4qPRIj8

4.1 8th Wall を使ったマーカー型 Vision Based AR の最小構成

8th Wall は Image Targets 用の画像登録をはじめとしてウェブ上で完結するようになっています。コードが記録される Web Editor も用意されていますが、後述する通り、課金が必要となります。

4.2 8th Wall を利用するために必要なお金

Plans and Pricing に掲載されています。

source: https://www.8thwall.com/pricing

大前提として、Publish してウェブ上で誰でも見れる状態にするには、1 ヶ月 $99 の Agency Plan に課金しなければなりません。且つプロダクションレベルで使うのであれば、トラフィック量に応じて料金の異なる Commercial License を追加する必要があります。

主に開発中やテスト中など、ウェブ上で誰でも見れる状態が必要ない、つまり localhost からのみアクセスできる状態であればお金はかかりませんが、1,000 View を超える場合は少なくとも Agency Plan に課金する必要があります。

source: https://www.8thwall.com/ ログイン後の管理画面

4.3 8th Wall は課金すべき?

個人で「遊ぶ」ために Adobe CC Plan を超える $99 を毎月課金するのはなかなかお高い感もありますが、WebAR だけでなく WebVR まで対応し始めたので、ちょっと本気で WebXR やってみようかな、という気持ちがあるのであれば、意外と元が取れるかもしれませんし、そうでないかもしれません。むしろ無課金で「遊ぶ」のは機能面でもなかなか厳しいものがあるので、とりあえず 1 ヶ月程度課金してみるのが良いのではないでしょうか。

もちろん、プロダクションレベルで使うなら迷わず課金しましょう。

ref. If You Can WebAR, You Can WebVR
https://medium.com/8th-wall/if-you-can-webar-you-can-webvr-dbd658831f8c

まとめ

WebAR に触れる前段として WebXR Device API について、そして AR について説明した上で、今日現在の WebAR の利用事例を紹介し、具体的な開発方法の概要と触りの部分を説明しました。

本記事を読んだだけでは、インタラクションがバリバリのかっこいい WebAR コンテンツは作れませんし、そもそも 3D モデルの作成方法に触れていないので、自分の好きなキャラクターを WebAR でバーンみたいなことはできません。

Qiita にもいくつか関連記事がありますが、サンプル以上のことを本腰を入れてやるには、A-Frame や three.js の取り扱いはもちろん、当然ピュアな JavaScript とりわけ WebGL 周辺の知識も必要になりますし、Blender のような 3DCG を扱うソフトに対する知識も必要になってきます。

プロダクションレベルで利用するにはパフォーマンスとの戦いがあったり、色々とつらいこともたくさんありますが、それでもなにかのきっかけとなって、ちょっと WebAR やってみようかな、という人が増えれば幸いです！良き WebAR ライフを！

おわりに

この記事を書き始めて公開までの短い間に、Chrome 79 の公開とともに WebXR Device API がデフォルト機能になり、WebVR な A-Frame は正式公開版にあたる v1.0.0 を迎え、2D VTuber さん御用達の Live2D は突然 WebAR 対応を実現する Cubism WebAR を公開し、そして WebAR な 8th WAll は WebVR への対応を発表しました。これはもう WebVR と WebAR をひっくるめた WebXR のムーブメントがきているとしか思えないので、みんなみんなやっていこうな！

明日は @shimajiro1111 さんです！お楽しみに！

iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 16:23:11 +0000

この記事は 2019-09-20 JST 付で Qiita に投稿したものです。

TL;DR

2019-09-20 JSTにiOS 13のアップデートが開始されました。
この文章は「iOS 12.2でWebVRとWebARが半ば終わった件について」の続報にあたります。
やや煽り気味のタイトルですが、経緯を知らない方は先に目を通しておくと捗ります。

Ref. https://twitter.com/ikkou/status/1174869256833421312

iOS 12.2でなにが起きたのか3行で

iOS 12.2からデフォルトでSafariのモーションデータを取得出来なくなった
モーションデータを取得出来ないと動かなくなるWebVRとWebARコンテンツがある
ユーザーにSafariの設定を変更してもらうことで動くようになる

iOS 13でどうなったのか3行で

iOS 13でもデフォルトでモーションデータを取得できない
ユーザーに変更してもらうSafariの設定項目がなくなった
新APIの DeviceMotionEvent と DeviecOrientationEvent を叩く必要がある

改めて、これから`WebVR`を使ったウェブマーケティング施策はどうなるのか

例えば 2019-09-20 現在では期待する動作をしないA-Frameを用いたWebVR施策を継続する場合、A-Frameそのものに手を入れる必要があります。

現実問題として、iOS 12.2がリリースされたタイミングで関連するIssueは起票されていますが、まだ対応されていません。

Sensor access disabled by default in Safari from iOS 12.2+
https://github.com/aframevr/aframe/issues/3976

Issueを読み進めていくと7月3日時点で、iOS 13がリリースされれば今まで通りに戻る(超意訳)というコメントがあるものの……。

Once iOS 13 ships things will be back to normal. A-Frame will be able to
request access to devicemotion API without any manual steps. https will be
required though
https://github.com/aframevr/aframe/issues/3976#issuecomment-508110150

A-FrameはGitHub上で開発が進められているオープンソースなので、やる気がある人はぜひPull Requestを送ってください。

改めて、これから`WebAR`を使ったウェブマーケティング施策はどうなるのか

WebVRコンテンツを開発するための定番がA-Frameであるように、WebARコンテンツを開発するための定番は8th Wallだと感じています。

そしてこの8th WallをWebで扱うためのライブラリとして8th Wall Webがありますが、実はiOS 13 Betaの時点から対応を加えていました。

Ref. https://twitter.com/ikkou/status/1174872983241777152

奇しくも8th Wall WEbはiOS 13のリリースと同じタイミングで1周年を迎えました。

A Year in WebAR: Celebrating the First Anniversary of 8th Wall Web
https://medium.com/8th-wall/a-year-in-webar-celebrating-the-first-anniversary-of-8th-wall-web-d0bae7a6a02a

ページを読み進めると分かりますが、COACHやAdidasなどの有名ブランドのWebAR施策に使われているようです。少なくとも現時点でWeb ARを用いた施策を実施したいのであれば、8th Wall Webを使うのが最善策かもしれません。

で、iOS 13で動かなくなったWebVR/WebARはどうすれば良いのか?

よっしゃiOS 13がリリースされたから書くぞ！と思っていたら株式会社palanさんのメディアに先を越されたので引用します:D

Ref. https://twitter.com/kinnikujst/status/1174915017717637121

ポイントはiOS 13から追加されたDeviceMotionEventとDeviceOrientationEventのpermission APIを叩くことです。

$('.request_permission').on('click', function() {
  if (
    DeviceMotionEvent &&
    DeviceMotionEvent.requestPermission &&
    typeof DeviceMotionEvent.requestPermission === 'function'
  ) {
    DeviceMotionEvent.requestPermission();
  }
  if (
    DeviceOrientationEvent &&
    DeviceOrientationEvent.requestPermission &&
    typeof DeviceOrientationEvent.requestPermission === 'function'
  ) {
    DeviceOrientationEvent.requestPermission();
  }
})

引用元: iOS13でWebARとWebVRのデバイスモーション設定が改善しました！

注意点としては、まずHTTPS通信であることが求められます。常時HTTPS化の進んだ現在の世界線では苦もなく実現可能かもしれませんが、ローカル環境での開発時には注意が必要です。

そしてpermission APIを叩くには、ユーザーによる何らかのアクションが必要です。前述の8th Wall Webでは「ARにはセンサーが必要だからContinueをタップしてね」というポップアップを出した上で、ユーザーによるContinueボタンのタップによってonClickを発火させています。

ref. https://apps.8thwall.com/8w/jini/ にスマホでアクセスすると表示されるポップアップ

8th Wall Webの場合はContinueをタップ後にアクセスを求めるダイアログが表示されます。

ref. https://apps.8thwall.com/8w/jini/ でContinueタップ後に表示されるダイアログ(※言語設定が日本語の場合)

これで万事解決なのか?

iOS 13からDeviceMotionEventとDeviceOrientationEventが使えるようになり、万事解決かと思いきや、実はそうとも言い切れません。

アクセスを求めるダイアログで、意図的であろうと偶然だろうと「キャンセル」を選択してしまうと、当然ながらDeniedされてしまうため、期待する挙動になりません。

そればかりか『誤って「キャンセル」してしまったのでもう一度やり直そう』とページをリロードをしてもDeniedされたままとなります。これは何度リロードしても状況は変わりません。

ref. https://apps.8thwall.com/8w/jini/ で許可を求められた際に「キャンセル」を選択してしまった後の画面

少なくとも 2019-09-20 現在では8th Wall Webですら、この問題をソフトウェア的に解決できない状態にあります。8th Wallのトップページに戻り、ゼロからWEB AR DEMOに入り直しても継続的にDeniedされた状態となっていますが、一度タブを閉じて、もう一度開き直すことで再びポップアップが表示されるようになります。

一般的なユーザーの導線を考えると、誤って、あるいはよく分からず「キャンセル」を選択してしまうことは往々にして起こりえます。少なくとも8th Wall WebのようにDeniedされていることを示せればまだマシですが、何も考慮していないと「ユーザーは選択したにも関わらず動作しない」という状況が発生してしまいます。

かといって「動作しない場合は一度タブを閉じて開き直してください」とお願いするのもスマートではなく、なかなか難しいと感じています。

さいごに

iOS 12.2がリリースされた時点ではわりと本気でWebVRもWebARも終わったのではないかと思いましたが、iOS 13の世界線はまだ課題はありそうなものの、未来はあるように感じました。

そもそもWebARの文脈で言えばiOSのAR Quick LookもAndroidのScene Viewerも影響を受けていません。iOS 12.2がリリースされようと問題なく動作していますし、後者のScene Viewerに関してはiOSでもAndroidでも、さらに言えばMagic Leap Oneでも動作するようになっています。

ウェブの進化とともにデバイスも進化しています。パワーアップした端末によってSafariで出来ることもきっと増えることでしょう。というわけで今後もWebVRとWebAR、そしてWebXRを応援しています:D

iOS 12.2でWebVRとWebARが半ば終わった件について

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 16:18:03 +0000

この記事は 2019-04-16 JST 付で Qiita に投稿したものです。

TL;DR

Ref. https://twitter.com/ikkou/status/1117201610348716032

更新履歴

2019/04/17 8th Wallの事例に見る対応方法を追記しました
2019/09/04 パブリックベータを見る限り iOS 13 でどのような状態になるか既にわかっていますが、例によって NDA の絡みがあるのでまだ具体的なことを Qiita に書けません。近々に控えているであろう iOS 13 公開後に掲載します。答えは Safari 13 Beta 6 Release Notes に記載されています。
2019/09/20 続報として「iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか」を書きました。

iOS 12.2で何が起きたのか

2019/03/26 JSTにiOS 12.2のアップデートが開始されました。

iOS 12.2 Release Notes
https://developer.apple.com/documentation/ios_release_notes/ios_12_2_release_notes

このアップデートによって、予想されていた通り、デフォルトで、つまりiOS 12.2にアップデートした後に後述する設定を変えていない状態で、モーションデータの取得が出来なくなりました。

ARやVRのコンテンツを作っている人には、少々厄介な事態が起きるかもしれません。iOS 12.2のSafari（12.1）では、デフォルトでモーションデータの取得が不可になり、これによりiPhoneやiPadのWebベースのARやVR（WebAR／WebVR）が、正常に動作しなくなる可能性があります。

https://www.gizmodo.jp/2019/02/safari-motion-data.html より引用

モーションデータの取得が出来ないと何が起きるのか

論より証拠。実際にWebVRを試してみましょう。まずはiOS 12.2にアップデート済みのiOS端末で、WebVRのためのJavaScriptフレームワークの1つであるA-Frameのウェブサイト https://aframe.io/ にアクセスしてください。アクセスすると画面右側中央付近にメガネの形をしたアイコンがあります。これをタップしてください。

ポートレートモード（縦持ち）のときはInsert phone into Cardboard holder.という文字列とともにランドスケープモード（横持ち）にしてね、という図が表示されるので指示に従ってランドスケープモードに切り替えてください。Cardboard holderはいわゆるVRゴーグルのことを指しますが、入れなくてもOKです。

ランドスケープモードにすると見ていた画面が2画面に分かれます。この状態をVRゴーグルで見ると二眼立体視で立体的に見え、iOS端末を持ったままぐるっと動かすとこの画面もぐるっと回る…はずでした。

iOS 12.2のMobile Safariで見ると上の画像のように表示され、iOS端末をぐるぐる動かしても何も変化しません。ここで画面が動く人はiOSのバージョンがiOS 12.1以前の端末を使っているか、後述する「設定」を変更しているかのどちらかです。

なぜモーションデータの取得ができなくなったのか

この大きな変更はセキュリティリスク、いわゆる脆弱性（ぜいじゃくせい）に対応したものになります。これはアップル公式の「iOS 12.2 のセキュリティコンテンツについて」というページで説明されています。

対象となるデバイス：iPhone 5s 以降、iPad Air 以降、iPod touch (第 6 世代)
影響：Web サイトがユーザの同意なくセンサー情報にアクセスできる可能性がある。
説明：モーションや方向のデータの処理に、アクセス権の問題がありました。この問題は、制限を強化することで解決されました。
CVE-2019-8554：匿名の研究者

https://support.apple.com/ja-jp/HT209599 より引用

モーションや方向のデータの処理に潜んでいたアクセス権の問題とはなにか

冒頭で引用したGIZMODEの記事でも言及している記事が詳しいです。

WHEN APPS WANTS to access data from your smartphone's motion or light sensors, they often make that capability clear. That keeps a fitness app, say, from counting your steps without your knowledge. But a team of researchers has discovered that the rules don't apply to websites loaded in mobile browsers, which can often often access an array of device sensors without any notifications or permissions whatsoever.

https://www.wired.com/story/mobile-websites-can-tap-into-your-phones-sensors-without-asking/ より引用

読み進めると書いてある通り、例えばGoogle マップを始めとする地図アプリは「位置情報」にアクセスするとき、明示的なポップアップを表示して許可を求めているが、それら以外のiOS端末から得られる下記の情報はユーザーの許可なしで取得、そして利用できていたとのことです。

motion（動き）
orientation（方向）
proximity（近接）
light（照明）

特にmotionとorientationはWebVRとWebARにおいて大事な要素なのですが、これらの“穴”を塞ぐため、デフォルトでオフとなったようです。

この“穴”によってどんな問題が起きるのか

Ref. https://twitter.com/ikkou/status/1117675491480104960

個人的には“穴”は“穴”でも直ちに問題のある“穴”ではないという認識ですが、個人情報保護が叫ばれるご時世なので、なにかクリティカルなことが起きる前に、あるいは発覚する前に、その“穴”を塞いだのではないかと考えています。あくまで個人の感想です。

とはいえセキュリティの専門家が指摘し、アップルもそれをセキュリティの課題と感じたからこそ新たな設定を設け、デフォルトでオフにしているので、不用意にオンにすること、少なくともオンにしたままにするのは避けたほうが良いのかもしれません。

どうすればモーションデータを取得できるのか

iOSの設定→Safari→「プライバシーとセキュリティ」の項目にある赤枠で囲った「モーションと向きのアクセス（Motion and Orientation Access）」をオン（緑色の状態）にすることでモーションデータの取得が可能となります。

前述の通りアップル曰くセキュリティリスクが潜んでいるものを強制的に無視している状態になるので、気になる人はWebVRとWebARを試した後にはオフにしておくと良いかもしれません。

これからWebVRとWebARを使ったウェブマーケティング施策はどうなるのか

例えば2018年2月にペプシがウェブマーケティングとして公開した「Pepsi Go Back」というウェブサイトがあります。Googleも開発に協力したということで一時期ちょっと話題になったウェブサイトです。

Pepsi Go Back
https://www.pepsigoback.com/

このウェブサイトはスマートフォンからアクセスすると360° ViewモードとVRゴーグルを用いるVIRTUAL REALITYモードの2種類を選択できますが、設定がオフになっているiOS 12.2ユーザーはどちらを選んでも正常に動作しません。

そして正常に動作させるにはiOSの設定画面からセキュリティの項目を開き、オフになっているものをオンにする必要があります。作り手側の立場から言えば、ユーザーにオンに“してもらう”必要があります。

しかしWebVRとWebARの良さはアプリのインストールを必要とせず、試したいときに直ぐに試せるところにあります。ユーザーはわざわざ設定画面を開き、設定を変更してまで試してくれるでしょうか。そもそもユーザーが該当ページにたどり着いたとき、そこにあるのは正常に動作しないWebVRあるいはWebARコンテンツです。一般的なユーザーはモーションデータの取得に絡む設定のことを知っているわけがありません。なんだ? 動かないぞ？壊れているのか? こんな反応が返ってくることが目に見えています。

そしてこれが例えば広告代理店等々を挟んだ上での提案だったとしましょう。既にウェブマーケティング施策のひとつとしてWebVR然りWebARが取り入れられていることから、可能性があることは認められている状態です。しかし、アクセスしても動かない可能性がある、動かすには設定を変える必要がある、そしてその設定はセキュリティリスクをはらんでいる。そういった状態にある施策を取り入れるでしょうか。答えは「否」ではないでしょうか。

少なくとも今日(2019/04/16)現在の状態では、積極的にWebVRとWebARをウェブマーケティング施策に使っていくのは避けたほうが良いかもしれないというのが持論です。つらい。そして過去に携わったWebVR/WebAR施策について念のために動作確認をしておいた方が良いと考えています。動かないはずです。つらい。

どうなることが理想か

iOS 12.3以降で、地図アプリのように、データにアクセスする際に明示的にユーザーの許可を求める状態になれば、今回の問題は回避できます。

図: Google マップが位置情報の設定変更を促している例

現時点でそういったUIは用意されていないので、たとえばsetTimeout()でセンサー値を見て変化が起きていなければ、設定の変更を促すポップアップを表示して設定画面で設定を変更してもらう方法が打開策のひとつかもしれません。

8th Wallの事例に見る対応方法

Ref. https://twitter.com/ikkou/status/1118351209939652608

iOS端末で8th Wallのデモページ https://apps.8thwall.com/8w/jini/ にアクセスしてください。モーションデータの値を見て、設定がオフになっているiOS端末で表示したときにはdeviceMotionErrorAppleというIDを付与して「設定を変えてリロードしてください」という内容の画面を表示しています。

8th Wallはもともとカメラへのアクセス許可を求め、その結果に応じて画面を出し分けているので、その分岐にこのモーションデータのオン・オフ状況が加わった形になります。

さいごに

数年前からWebXRを推してきたので、今回の変更はだいぶ悲しいですが、設定を変えれば使えるわけで、“完全に”終わったわけではありません。願わくばiOS 12.3以降のアップデートでより良い形に変わることを期待しつつ、今後もWebVRとWebAR、そしてWebXRを応援しています。

Chrome 79 から WebXR Device API が有効になるも Oculus 系の HMD が認識されない件とその解決方法について

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 15:46:49 +0000

この記事は 2019-12-20 JST 付で Qiita に投稿したものです。

2020-08-25 時点で最新の Chrome v84 では本記事の方法で対応できません。

TL;DR

Ref. https://twitter.com/ikkou/status/1207912623443865600

Chrome 79 で WebXR Device API が正式サポートされました🎉

WebXR Device API はブラウザから Oculus Rift S をはじめとする (VR|AR|MR) HMD の情報を取得するための API です。

2019/12/20 現在の「メジャーなブラウザ」では Chrome 79 以降のみが「標準で」対応しています。
この「メジャーなブラウザ」というところが肝です。

source. https://caniuse.com/#search=WebXR

Chrome 78 以前はどうだったのか?

chrome://flags から以下のフラグを Enable にすると Chrome で WebXR Device API を通して Oculus Rift S で WebXR を楽しむことができました。

WebXR Device API: Enabled
Oculus VR support: Enabled
XR device sandboxing: Disabled

ここで言う WebXR を楽しむというのは、WebXR Sample Pages で Yes! が表示され、各サンプルで ENTER VR が表示される状態を指しています。

WebXR Device API に対応している場合に表示されるテキスト
source: https://immersive-web.github.io/webxr-samples/

なお Firefox のように、まだ WebXR Device API に対応していない場合でも WebVR API へのフォールバックで概ね体験可能です。

WebXR Device API あるいは WebVR API へのフォールバックで VR HMD が認識されているときに表示される状態
source: https://immersive-web.github.io/webxr-samples/immersive-vr-session.html

VR HMD が認識されていないときは VR NOT FOUND が表示される
source: https://immersive-web.github.io/webxr-samples/immersive-vr-session.html

Chrome 79 でどうなったのか?

まず WebXR Device API は標準対応となったため、chrome://flags から変更する必要がなくなりました！

標準対応となったので「これだけでいける！」と思っていましたが、実は Oculus Rift/Rift S に関しては別途フラグを立てる必要がありました。もともと Oculus VR support: Enabled を指定していたので、それかと思うとこのフラグは消えていていました！

結論として Oculus VR support に代わる Oculus hardware support を Enable にする必要がありました。

Ref. https://twitter.com/kettlecorn/status/1207880549991366656

Chrome 79 以降で `WebXR` を動作させるために必要なこと

Oculus hardware support = chrome://flags/#oculus-vr を Enabled に変更
XR device sandboxing = chrome://flags/#xr-sandbox を Disabled に変更
Chrome を再起動

上記の設定で 2019/12/20 現在 Chrome Beta, Chromium の最新バージョンである v81 まで動作することを確認しています。

2019/12/20 現在、WebXR Device API に「真の標準対応」しているブラウザは Oculus Browser だけ！

Ref. https://twitter.com/wakufactory/status/1207924277044867077

本記事では一切のフラグ変更を必要としないことを「真の標準対応」と表現していますが、これは W3C として定義している用語ではありません。そして Oculus Browser は決してメジャーなブラウザではない異端児です。

現場からは以上です。

Special Thanks: OE Waku さん - https://twitter.com/wakufactory

AR.js ではじめる Image Tracking

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 15:34:08 +0000



この記事は 2020-03-16 JST 付で Qiita に投稿したものです。

@ikkou です。みんな大好き AR.js が新しくなり、今まで通りの Marker Tracking と新しい Image Tracking の2つの異なるビルドが存在するようにしました。本記事では新しい Image Tracking について概要を説明します。

TL;DR

サンプルページにアクセスして、用意されている恐竜の画像にかざすと、恐竜が飛び出してくる、そんな QR コードなどのマーカーを使わない、画像認識型の WebAR を新しい AR.js で実現できるようになりました。

はじめに

以下、前提知識を揃えるための説明です。
AR.js のことを知っている人や、前提知識が不要な人は本編まで読み飛ばしてください。

AR.js とは

WebAR を実現するための汎用 JavaScript ライブラリです。
https://github.com/AR-js-org/AR.js

元々は開発者である Jerome Etienne さん ( @jerome_etienne ) の GitHub 個人リポジトリである jeromeetienne/AR.js で管理されてきましたが、2020-02-28 JST より AR-js-org という Organization で管理されるようになりました。
移動の詳細は旧リポジトリの Why move AR.js を参照してください。

リポジトリの移動に伴い、AR.js 公式のドキュメント集である AR.js Documentation が用意されました。
https://ar-js-org.github.io/AR.js-Docs/

AR.js でできること

Marker Based WebAR
- なにかしらのマーカーにかざすと AR なものが表示される、よく見るタイプの AR を実装できます。
- マーカーとしてあらかじめ用意されている Hiro, Kanji の他、カスタムマーカーを使用できますが、マーカーには必ず黒い枠線が必要となります。
Location Based WebAR
- 位置情報をもとにして AR なものが表示される、例えば Pokémon GO の AR+ のような AR を実装できます。
Image Tracking WebAR 🆕
- マーカーではなく写真やイラストにかざすと AR なものが表示される、よく見るタイプの AR を実装できます。
- これまでは 8th Wall Web のみが実用的な Image Tracking WebAR のソリューションでしたが、新たに AR.js でも実現できるようになりました。

前述の通り、現在の AR.js は Image Tracking 向けのものと、Marker Tracking 向けのものがそれぞれ個別のライブラリとして存在しています。Location Based 向けはどちらのライブラリとも合わせて使えます。

WebAR とは

WebAR はウェブ技術で AR 表現を実現するものです。
iOS/Android のネイティブアプリとして AR アプリを開発することに比べ、アプリのインストールが不要という絶対的な優位点がありますが、ネイティブアプリでできることのすべてを WebAR として実装できるわけではありません。特にパフォーマンス面ではネイティブアプリに及ばない部分もありますが、ウェブ技術の進化とともにできることが増えている技術です。

手前味噌ですが 2019/12 時点の WebAR をまとめた記事を書いているので、興味のある方は覗いてみてください。

WebAR の現状確認 2019 Winter
https://qiita.com/ikkou/items/c32d57e30b28068b268d

WebXR とは

ウェブ技術で AR を実現する WebAR の他、ウェブ技術で VR を実現する WebVR があります。また、AR や VR の総称として XR という言葉が用いられています。そういった背景から、ウェブ技術を策定する W3C は WebAR や WebVR に必要な API として WebXR Device API を策定しています。
ただし、WebAR、WebVR ともに必ずしも WebXR Device API を必要とするわけではありません。

NFT ( Natural Feature Tracking ) とは

Image Tracking の話になると NFT という言葉が出てきますが、これは Natural Feature Tracking の略称で、Natural Feature つまり自然特徴点をもとにして認識する技術を指します。NFT ではない場合は Marker Based となります。

AR.js ではじめる Image Tracking

以下、本編となります。

1. NFT Marker Creator で Image Descriptors を作成する

AR.js では画像に対する固有の特徴点である Image Descriptors を NFT Marker Creator で作成します。

NFT Marker Creator は Web バージョンと Node バージョン ( Carnaux/NFT-Marker-Creator ) が用意されていますが、本記事では『公式が推奨している Web バージョン』を使用します。

※ 2020-03-17 15:13 追記
NFT Marker Creator の README では Node バージョンが preferred とされていますが、AR.js Documentation では Web バージョンが recommended とされているので、本記事では　AR.js Documentation　を公式として『公式が推奨している Web バージョン』と表記しています。

Ref. NFT Marker Creator

NFT Marker Creator にアクセスし、Upload Image から Image Tracking として使いたい任意の画像をアップロードします。

画像をアップロードし、適切な画像であればページ下部の Confidence の☆に色が付きます。例えば以下のような何ら特徴点のない単色の #FF69B4 で塗りつぶした画像は☆0で不適切です。

Twitter のヘッダに設定している画像 ( 1500px × 500px ) は長辺解像度が増えていることと背景の複雑さも相まってか☆4でした。

所属企業のコーポレートサイトに載っているオフィスの模様を示した画像 ( 1280px × 854px ) は Twitter のヘッダ画像より長辺こそ短いものの、総画素数で言えば上回ることも相まってか ☆5でした。

Ref. 私たちについて - 株式会社ZOZOテクノロジーズ

今回は Twitter のヘッダ画像を使います。

Generate ボタンを押下すると Image Descriptors として拡張子 .iset, .fset, .fset3 の3ファイルをダウンロードできます。

💡Image Tracking 向けとしての画像として必要な要素

NFT Marker Creator のページ下部に注意書きとして Warning: Images with width and/or height above 1000px might take 20min+ to generate. と記載されている通り、幅や高さが 1000px を超える画像は作成に 20 分以上かかるとされていますが、だからといって小さな画像を使っても正しく認識されません。

どのような画像が適切かは GitHub NFT-Marker-Creator の Wiki ページ Creating good markers で説明されています。ポイントは一定の解像度があること且つ特徴量が多いことです。

2. aframe-ar-nft.js を使って Image Tracking を実現する WebAR ページを作る

公式サイトから完成形を抜粋します。



<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
  >
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

Ref. https://github.com/AR-js-org/AR.js#-image-tracking

以下、ポイントをかいつまんで説明します。

Step 1. Script の読み込み




<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

Image Tracking 向けの AR.js は A-Frame 版と three.js 版が用意されています。公式ページでは A-Frame 版が使われているので、一緒に A-Frame 自体も読み込んでいます。読み込む順番は A-Frame → AR.js です。

Step 2. `.arjs-loader` の記述



<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>



  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>

ページにアクセスした後、Image Descriptors をロードするまで一定の時間がかかるので、公式サイトのサンプルでは読み込みが完了するまで Loading, please wait... の文字列を表示しています。

Ref. https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft/

不要だと感じるのであれば思い切って削除しても正常に動作しますし、説明書きを日本語に変更したい場合は文字列を書き換えるだけです。

Step 3. `Image Descriptors` の読み込みと呼び出す `glTF` モデルの読み込み



<a-nft
  type="nft"
  url="https://arjs-cors-proxy.herokuapp.com/https://cdn.glitch.com/8d99eec0-4479-4e11-9a80-9993963fc1ea%2FNFT"
  smooth="true"
  smoothCount="10"
  smoothTolerance=".01"
  smoothThreshold="5"
>
    <a-entity
      gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
      scale="5 5 5"
      position="50 150 0"
    >
    </a-entity>
</a-nft>

肝となる部分です。Image Tracking のために新たに a-nft という Custom Component が用意されています。

Attribute	Description
type	Image Tracking の場合は nft 一択です。
url	Image Descriptors の拡張子を除いたパスを記述します。
smooth	camera smoothing をオンにします。 True が推奨されていますが、なぜかデフォルトは false です。
smoothCount	画像が動いたときの Tracking をスムーズにします。デフォルトは 5 です。数字が増えれば増えるほどスムーズになる反面、重くなります。
smoothTolerance	平滑化の距離の許容値です。デフォルトは 0.01 です。
smoothThreshold	平滑化のしきい値です。デフォルトは 2 です。

公式サイトのデモでは smoothCount と smoothThreshold をデフォルト値から変更しています。これらの数字は実際に検証しながら調整するのが良いでしょう。



<a-entity
  gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
  scale="5 5 5"
  position="50 150 0"
>
</a-entity>

a-nft の中で呼び出すオブジェクトをおなじみの a-entity で定義します。
公式サイトのデモでは恐竜の画像にあわせて恐竜の 3D モデル ( .glTF ) を呼び出しています。

なお Image Descriptors と 3D モデルの読み込み URL の頭に付いている https://arjs-cors-proxy.herokuapp.com/ はクロスオリジンの問題を回避するためのプロキシです。

3. 認識させる画像を変えたり、呼び出す 3D モデルを変えてみよう

Glitch に呼び出す画像 @ikkou の Twitter ヘッダ画像に変更したバージョンを用意しました。
https://enchanting-ten-people.glitch.me/

スマートフォンから https://enchanting-ten-people.glitch.me/ にアクセスして、Mac/PC のブラウザに表示した @ikkou の Twitter ヘッダ画像にスマホをかざすと、サイズと位置の異なる恐竜の 3D モデルが表示されます。



<!DOCTYPE html>

<html lang="ja">

<head>

  <title>Sample: AR.js with Image Tracking</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/style.css">

  <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>

  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

</head>


<body>

  <div class="arjs-loader">

    <p>

      Now Loading...<br>

      読み込み完了までお待ちください

    </p>

  </div>

  <a-scene

    vr-mode-ui="enabled: false;"

    renderer="logarithmicDepthBuffer: true;"

    embedded

    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"

  >

    <a-nft

      type="nft"

      url="https://arjs-cors-proxy.herokuapp.com/https://cdn.glitch.com/8d99eec0-4479-4e11-9a80-9993963fc1ea%2FNFT"

      smooth="true"

      smoothCount="10"

      smoothTolerance=".01"

      smoothThreshold="5"

    >

      <a-entity

        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"

        scale="10 10 10"

        position="100 0 100"

      >

      </a-entity>

    </a-nft>

    <a-entity camera></a-entity>

  </a-scene>

</body>

</html>



body {

  font-family: helvetica, arial, sans-serif;

  margin: 0;

  overflow: hidden;

}

.arjs-loader {

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: rgba(0, 0, 0, 0.8);

  z-index: 9999;

  display: flex;

  justify-content: center;

  align-items: center;

}

.arjs-loader p {

  text-align: center;

  font-size: 1.25em;

  color: white;

}

まとめ

AR.js Documentation の Image Tracking に記述されていることをなぞり、自分で設定した画像で 3D オブジェクトが表示されるように書き換えました。

今回は『本当になぞっただけ』なので、次は各種パラメータの調整や表示されるオブジェクトをより実践的なものにしてみます。

また、Image Tracking ができるようになったことで、AR.js を使った「WebAR 名刺」や、着ているものに反応するような WebAR がこれまで以上に捗るかもしれませんが、前者で言えば名刺サイズに収まる画像且つ一定の特徴点を持つ画像を適切に配置できるか、後者で言えば皺の影響がどこまで出るかなどを検証してみたいと考えています。

現場からは以上です。
新しくなった AR.js で素敵な Image Tracking ライフを！

DeepARを使ってWebARでSnapchatみたいな顔認識フィルターWebアプリをつくる

HEAVEN ちゃん a.k.a いっこう — Wed, 25 Mar 2020 15:20:01 +0000

この記事は 2020-03-18 JST 付で Qiita に投稿したものです。

WebAR というと 8th Wall Web や最近 Image Tracking に対応した AR.js が有名ですが、DeepAR を使うことでそれらが対応していない「顔認識」系の WebAR を実現できます。

DeepAR でググると Amazon SageMaker の DeepAR 予測がトップに出てきますが、本記事で取り扱うのは Augmented Reality の方の DeepAR です。

DeepARとは

DeepAR は海外では Snapchat 日本では SNOW をはじめとする顔認識系アプリを実現するための SDK です。

DeepAR.ai is an SDK for Snapchat face filters, face lenses and effects for any iOS, Android, Unity or HTML5 app. Full face detection, face tracking software for AR and Augmented Reality advertising

Ref. https://www.deepar.ai/

ネイティブアプリとなる iOS/Android の SDK だけでなく、JavaScript ライブラリも用意されているので、Web における AR である WebAR を実現できます。

どんなことができるのか?

プラットフォームによって異なりますが、本記事で扱う WebAR では、顔認識からのマスク、エフェクト、複数人の顔認識、画像認識ができると説明されていますが、Background Segmentation と Hair Segmentation、そして Emotion Tracking には対応していないとされています。

It supports face masks, effects, multiple face tracking, natural image tracking. The background and hair segmentation and emotion tracking are not supported.

Ref. https://help.deepar.ai/en/articles/3545207-getting-started

※ マスクとエフェクトは試していますが、複数人の顔認識と、特に気になる画像認識はまだ試していません。

実際に動かしている様子

Twitter に動画をアップしています。
https://twitter.com/ikkou/status/1240250264843505667

Qiita で動画が展開されないときは、遷移して確認後、戻ってきてください:)

でもお高いんでしょう?

商用利用となると有償ですが、10 MAU 以下、とりあえず自分で触って試してみる分には無償です。

Price	MAU
$0/month	10
$25/month	1,000
$100/month	5,000
$500/month	30,000
$1000/month	100,000
Custom	100,000+

Ref. https://developer.deepar.ai/pricing

MAU 10 以降は課金が発生しますが、値付け感は 8th Wall よりも優しいと感じます。

なお、有償契約すると iOS, Android, Web のどれもが MAU 上限まで使えますが、同時に使った場合 MAU は合算されるので注意が必要です。

また、無償版は上記のように画面上に DeepAR.ai の透かしが入ります。

実際にDeppARを動かしてWebARをやってみる

1. アカウントの作成

https://developer.deepar.ai/ にアクセスして SIgn Up からアカウントを作成します。

2. 新しいプロジェクトの作成

アカウントを作成すると Projects にアクセスできるようになります。
このページの + マークから新しいプロジェクトを作成します。

Price calculator の初期値は 100,000 になっているので、とりあえず試してみたい場合はスライダーを左端まで持っていき、Free $0 / month になっている状態で Get started をクリックしてください。

次のページで Project name に任意の名前を入れ、I agree to terms and conditions のチェックボックスにチェックを入れた状態で Create Project ボタンをクリックすると Your projects にプロジェクトが作成されます。

最後に、今回は WebAR を試すので、Add web app をクリックし、任意の App name と Domain を入力します。ローカル環境で試す場合は localhost と入力します。その後、Create app をクリックすると重要な App key が発行されます。

ここで発行される App Key は重要なので控えておいてください。

3. DeepAR Web SDK のダウンロード

Downloads ページから DeepAR Web SDK をダウンロードします。記事公開の 2020-03-18 時点では v1.4.6 が最新でした。

必要な JavaScript ライブラリを除いたサンプルは GitHub にも公開されています。こちらを使う場合は script の読み込みなど最低限の追記が必要です。

DeepARSDK/quickstart-web-js
https://github.com/DeepARSDK/quickstart-web-js

4. index.html の書き換えと表示

141 行目付近の licenseKey の your_license_key_goes_here を 2. で作成した App Key に差し替えます。

var deepAR = DeepAR({
  canvasWidth: canvasWidth,
  canvasHeight: canvasHeight,
  licenseKey: 'your_license_key_goes_here',

その上でローカルサーバを立ち上げるとブラウザで確認できます。

Python が動作する環境であれば、黒い画面 で python server.py を叩いて http://localhost:8888/ にアクセスすれば OK です。

💡スマートフォンから確認したい

一般的にスマートフォンから http://localhost:8888/ は表示できません。スマートフォンから確認したい場合は HTTPS 環境が用意されている Glitch や GitHub Pages を使うと良いでしょう。その場合は環境に合わせて domain を書き換えて App key を再発行する必要があります。現時点では domain を編集できないようです。

フィルターの作り方

本記事では詳細な使い方そのものには触れませんが、DeepAR で顔を認識した後に表示するフィルター全般は DeepAR Studio を使います。

DeepAR Studio
https://help.deepar.ai/en/articles/3493100-deepar-studio

DeepAR のフィルターは FBX を読み込んだ後、編集したものを Export する形で作成します。リファレンスとなる FBX ファイルが用意されているので、まずはそれを使って試してみるのが良いでしょう。

^ Reference mask model の FBX を DeepAR Studio に Import FBX した直後の様子

この状態で Export Model で出力した拡張子のないファイルを読み込ませると、Export したフィルターが表示されるようになります。

Snapchat で言うところの Lens Studio あるいは instagram で言うところの Spark AR Studio と比べると、機能面ではまだまだ足りない部分がありますが、最低限必要になりそうなドキュメントは整備されているので、興味のある方はオリジナルフィルターを作ってみてください。

また、私が見始めた頃にはなかったですが、最近公開された Free Filter Pack というページでは、フィルターとなる Export されたファイルと、その元となる FBX などのアセットをまとめてダウンロードできるので、これらを参考に手を加えてみるのも良いかもしれません。
https://help.deepar.ai/en/articles/3580432-free-filter-pack

DeepAR Asset Store という存在

DeepAR には DeepAR Asset Store という自分のフィルターを販売できる場所が用意されています。

Ref. https://www.store.deepar.ai/

ここでは文字通り DeepAR 用のフィルターが「販売」されています。1つあたり £49.00 つまり ¥6,250 程度 ( 2020/03/18 時点のレート ) となかなかのお値段が設定されていますが、Free Filter Pack 同様に編集元となる FBX などのアセットも含まれているので、真似したいものがある場合などには適しているかもしれません。
なお 2020/03/18 時点では自分自身が作成したフィルターを販売できる仕組みはありませんでした。

まとめ

DeepAR という顔認識系アプリを実現するための SDK を紹介した上で「とりあえず動かしてみる」ところまでを説明しました。

サンプルのままでは使いにくいかもしれませんが、例えばスタンプ機能やスクショ撮影などを組み込むことで、キャンペーンサイトでの利用などが出来るかもしれないと感じました。用途によっては一定のポテンシャルがあるのではないでしょうか！

同じ商用 SDK でも 8th Wall Web と DeepAR では実現したいことが異なるため、比較するものではありませんが、こうして WebAR でもできる可能性が拡がっていくのは素敵なことだと感じています。

現場からは以上です！

DEV Community: HEAVEN ちゃん a.k.a いっこう

WebXR Device API が有効になっている Chrome 85 で Oculus 系の HMD が認識されない件とその解決方法が無い件について

はじめに

TL;DR

Chrome 85 では Oculus 系 HMD が使えない

WebXR Device API が有効になっている Chrome 84 で Oculus 系の HMD が認識されない件とその解決方法について

はじめに

事の発端

解決方法

VRoid Hub を使って “うちの子” を現実世界に重畳する

TL;DR

はじめに

動作要件

技術的背景

iOS の Safari で “うちの子” を現実世界に重畳したい!!

Maps SDK for Unity を試してみた

Maps SDK for Unity とは

Maps SDK for Unity のはじめかた

下準備 GCP 編

下準備 Unity 編

サンプルシーンを試してみる

用意されているサンプルシーン

浅草に行ってみる

Android 実機で動かしてみる

お値段について

まとめ

おまけ

iOS 9のMobile Safariで消えた2つの機能

TL;DR

apple-mobile-web-app-status-bar-style is dead 💀

apple-mobile-web-app-status-bar-styleとは

使い方

iOS 9でどう変わったか

apple-touch-startup-image is dead 💀

apple-touch-startup-imageとは

使い方

iOS 9でどう変わったか

どうすれば良いのか?

対応方法

リファレンス

WebAR の現状確認 2019 Winter

はじめに

はじめて WebAR という言葉を聞いた方へ

もっと知られて欲しい WebXR Device API の話

The WebXR Device API was shipped in Chrome 79

WebXR Device API とは何か

Spec of WebXR Device API

WebAR に WebXR Device API は必要か?

もっと知られて欲しい AR の話

AR とは何か

2 分類 3 パターンに大別できる AR

Location based AR

マーカー型 Vision based AR

マーカーレス型 Vision based AR

WebAR の利用事例

0. Google の検索結果

1. 自転車販売サイト Pure Cycles

2. CITIZEN AR try

3. ティフォニウム・チョコレート

4. Amazon バーチャルメイク ライブモード

5. AWE Portal Hunt

6. NIGHT SYNC YOKOHAMA (期間限定 ~12/27)

WebAR コンテンツの開発

iOS における WebAR の歴史

WebAR コンテンツを開発するための前提知識

WebAR コンテンツをデプロイするための要件

WebAR コンテンツの開発手法

1. <model-viewer> あるいは AR Quick Look を利用する

1.1 <model-viewer> の利用

1.2 <model-viewer> の適用範囲

1.3 <model-viewer> の最小構成

1.4 AR Quick Look の利用

1.5 AR Quick Look の適用範囲

1.6 AR Quick Look の最小構成

2. 二次元バーコードを読み込んで何かをしたい場合は AR.js を利用する

2.1 AR.js の利用

2.2 AR.js の背景

2.3 AR.js を使ったマーカー型 Vision Based AR の最小構成

3. 「Pokémon GO」 のような位置情報ベースの何かをしたい場合も AR.js を利用する

3.1 AR.js を使った Location Based AR の最小構成

4. Amazon バーチャルメイクライブモード

1. `<model-viewer>` あるいは `AR Quick Look` を利用する

1.1 `<model-viewer>` の利用

1.2 `<model-viewer>` の適用範囲

1.3 `<model-viewer>` の最小構成

1.4 `AR Quick Look` の利用

1.5 `AR Quick Look` の適用範囲

1.6 `AR Quick Look` の最小構成

2.1 `AR.js` の利用

2.2 `AR.js` の背景

2.3 `AR.js` を使ったマーカー型 `Vision Based AR` の最小構成

3. 「Pokémon GO」のような位置情報ベースの何かをしたい場合も `AR.js` を利用する

3.1 `AR.js` を使った `Location Based AR` の最小構成

改めて、これから`WebVR`を使ったウェブマーケティング施策はどうなるのか

改めて、これから`WebAR`を使ったウェブマーケティング施策はどうなるのか

Chrome 79 以降で `WebXR` を動作させるために必要なこと

Step 2. `.arjs-loader` の記述

Step 3. `Image Descriptors` の読み込みと呼び出す `glTF` モデルの読み込み