WebARを簡単に作成するプラットフォーム「8th Wall」
8th Wallとは...
8th Wallは、開発者がWebブラウザ上で直接動作するWebARエクスペリエンスを作成、コラボレーション、パブリッシュすることを可能にします。
標準に準拠したJavaScriptとWebGLで構築された8th Wall Webは、8th WallのSlimultaneous Localization and Mapping (SLAM)エンジンを完全に実装し、ブラウザ上のリアルタイムWebAR用に超最適化されたものです。
8th Wall Cloud Editorは、完全な機能を備えたWebARプロジェクトを開発し、チームメンバーとリアルタイムで共同作業を行うことができます。
Built-In Hostingにより、パスワードで保護されたステージング環境を含む、8th Wallの信頼性と、安全性の高いグローバルネットワークでホストされるデプロイメントステートにプロジェクトを公開することができます。また、特定のプランではセルフホスティングも可能です。
詳しくはこちらを参考にしてください。
また、 Wallは、以下のような3D JavaScriptフレームワークに簡単に統合できます。
- A-Frame
- three.js
- PlayCanvas
- Babylon.js
料金プラン(年額の場合)
-
Starter
独自のウェブアプリケーションを開発し、8thwall.comに公開することができます。
◦ チームメンバー3名
◦ WebARとWebVRのプロジェクトは無制限
◦ World Effects, Lightship VPS, Image Targets, Face Effects
◦ 100 以上のテンプレートとモジュール
◦ Cloud Editor と無料のグローバル ホスティング
◦ 8thwall.com からプロジェクトを立ち上げる
◦ 8th Wall Payments で収益化
◦ Slack コミュニティのサポート -
Plus
独自のウェブアプリケーションを開発し、8thwall.comに公開。
プロジェクトのURLとカスタムドメインに直接アクセスできます。
◦ Starterの内容に加えて...
◦ チームメンバー6名
◦ 直接 URL からプロジェクトを起動する
◦ カスタム ドメインを接続する
◦ 埋め込み可能なAR
◦ プログレッシブ Web アプリ (PWA)
◦ メールサポート -
Pro
ブランドの代理としてキャンペーンを展開し、ワークフォアハイヤーを行い、商業ライセンスを購入する。
◦ Plusの内容に加えて...
◦ チームメンバー無制限
◦ ローカル開発によるセルフホスティング
◦ パスワードで保護されたステージング URL
◦ クライアントの商用ライセンスを購入する
◦ パートナー プログラムの資格
◦ 外部コラボレーションのプロジェクト権限
詳しくはこちらを参考にしてください。
Image Targetsとは...
8th Wall Image Targets を使用して、サイネージ、雑誌、ボックス、ボトル、カップ、缶に命を吹き込むことができます。
平面、円筒形、円錐形の画像ターゲットをアップロードして管理し、ターゲットによってアクティブ化され、ターゲットを直接追跡できる Web ベースの拡張現実体験を作成します。
画像ターゲットは、ワールド トラッキングと連携して機能し、画像ターゲットとマーカーレス トラッキングを組み合わせたエクスペリエンスを実現します。
こちらのQiitaの記事もぜひ参考にしてみてください。
ローカルの環境で8th WallのImage Targetsを使用して、マーカーの上にthree.jsでオブジェクトを表示しています。
Lightship VPS とは...
Lightship VPS は、NianticのAR 世界地図を使用して、WebARコンテンツを世界中の場所にcmレベルの精度で固定します。
VPS で有効化された場所をマップに追加するか、100,000 を超える VPS で有効化された場所をすぐに利用して、ブラウザで機能する場所ベースの AR エクスペリエンスを構築できます。
Web 用の Lightship VPS は、場所の 3D メッシュへのアクセスも提供し、仮想オブジェクトと物理世界の間のより高いレベルのインタラクティブ性を実現します。
Face Effectsとは...
ウェブオープンの力をフルに活用し、どこでも使える高品質なフェイスフィルターを作成できます。
メガネやジュエリーなどの3Dリクエストを、さまざまな顔への使用取り付けポイントに固定できます。
8th Wall Face Effectsは、携帯電話、タブレット、デスクトップなど、すべてのデバイスで体験することができます、アプリは必要ありません。
豊富なテンプレート
8th Wallには100を超えるサンプルのテンプレートがあります。
一度目に通して、自分のプロジェクトにクローンしたりして、いろいろ試してみるのも、勉強になっていいと思います。
というか、面白すぎていろいろ見たくなると思います。
ローカルで8th Wallを動かす。
8th Wallのエディターを使わず、ローカルの環境で作成をしたい方もいるかと思います。
そんな方はぜひ、こちらの記事を参考にしてください！
会員登録をしよう！
https://www.8thwall.com/ にアクセスしてください、実際にアカウントをつくってみましょう！
右上にある、Start free trialをクリックしてください。
次のようなページに行くと思います。
あなたの個人情報を入力していってください。
一つ目のチェックマークは利用規約に対する同意。
二つ目のチェックマークは8th Wallからのニュースなどのメールを受け取るかどうかです。
入力を完了し、次の画面に行くと、認証コードの入力画面に遷移すると思います。
設定したメールアドレスに届いた認証コードを入力しましょう。
すると、プランの選択、支払い方法入力画面に行くと思います。
自身にあったプランを選択し、支払い情報を入力しましょう。
入力が完了すると、次のような画面に遷移します。
一つ目の入力エリアは会社名や、自身の名前を入力してください。
二つ目の選択エリアは、あなたの職業などです、私の場合はDeveloper(開発者)を選択しました。
三つ目の選択エリアは、ARをどういった業界、目的で使用するかです、私の場合はEntertainment（エンターテインメント）を選択しました。
最後に、あなたの公開されるプロフィール名と、ワークスペースのURLを決定してください。
これで会員登録は完了です！
それでは実際にプロジェクトを作っていきましょう！
実際にプロジェクトを作ってみよう！
テンプレートを使わずにプロジェクトを作成することはできますが、今回はせっかくなので8th Wallで用意されているテンプレートを使用してみたいと思います。
テンプレートを使ってみよう！
今回、使用するテンプレートはこちらです。
こちらのテンプレートは8th Wallとthree.jsを組み合わせたものです。
ユーザーがタップした場所に、3Dモデルを置くことができます。
URLにアクセスしたら、Clone Projectを選択してください。
任意のURLとプロジェクト名を設定してください。
Createをクリックしてください。
すると、8th Wallのエディターが開きます。
早速Previewを押してみて、まずはARを体験してみましょう！
サンプルのプレビュー
実際のiPhoneの画面です。
プロジェクトを公開してみる。
それではプロジェクトを公開してみましょう！
右上のPublishを選択してください。
StagingとPublicが選択できると思います。
Stagingはパスコードを指定することで、本番環境と同じステージング環境で最終確認をパスコードを知っている人で行うことができます。
今回はPublicを選択して、右下のPublishをクリックします。
プロジェクトの名前、サムネイル、説明を設定して、「Done」をクリック！
下の画面に遷移したら成功です！
実際にアクセスしてみましょう！
プロジェクトのページでLaunchをクリックして出てきた、QRコードを読み込むと実際に作成したARを楽しむことができます。
まとめ
8th Wallを使用することで、簡単にARのプロジェクトを作成することができます。
A-frame,three.jsをはじめとした様々なフレームワークにも対応しており、Blenderなどで作成した3Dモデルを使っていろんなことができます。
8th Wallを使って皆さんも、ARの世界を楽しんでみてください！
この記事を読んでくださり、ありがとうございました。
Discussion