見出し画像

【技術紹介】簡単にWebAR開発ができる「8th Wall」を使って顔面に動画テクスチャを貼ってみた

デザイニウム

こんにちは。デザイニウムのBBOY/エンジニアの平澤（@eatora22）です。今回は、8th WallというWebARで気軽に開発できるプラットフォームの紹介をしようと思います。

上の動画は開発の一例です。スマートフォンのWebブラウザ上でカラフルな謎の集団がARでリアルタイムに表示されています。

はじめに

そもそもAR（拡張現実）というと専用アプリのインストールが必要であったり、ユーザーが体験するまでのハードルが高いことが一つの大きな問題でした。そこで、Webブラウザ上でも動作してサイトを訪問するだけで気軽にAR体験を可能にする技術というのがWebARです。

ただし、WebAR開発用のライブラリは、他のネイティブアプリ用のものと比べて機能的に制限されている場合が多いです。例えば、マーカーレスで平面を検出してオブジェクトを配置したいといった場合に、AR.jsのような有名どころだけだと大変だと思います。

そこで今回使用するのが8th Wallです。これを使うと平面検出や任意の画像をマーカーに使ったりといったことが簡単に実装できてしまいます。公式サイトは以下。

リッチなWebAR体験を実現するのに非常に便利な8th Wallですが、残念ながら有料サービスとなっております（当たり前か）。しかし2週間のフリートライアルも設けられているので今回はそれを使わせてもらって、色々な機能を試してみました。

※自前環境での開発のためにAPI keyを発行できるみたいなのですが、フリートライアルではkeyの発行ができず公式のクラウドエディターでの開発に制限されるようです。

技術紹介

8th Wallで可能なことは、以下のプロジェクトライブラリーを参考にすると良さげです。各プロジェクトの「Try it out」にあるQRコードをスマホで読み取ることで気軽にお試しもできちゃいます。

上記のプロジェクト（サンプルコード）をベースに開発した作例が以下の動画たちです。

こちらは平面検出を使用したサンプルです。画面をタップした位置に合わせてオブジェクトが出現します。ちなみにBigGANというのは画像生成用の機械学習モデルで以下記事のような面白い映像が作れます。


こちらは人の顔の表面形状を検出してテクスチャを貼ったり顔の周囲にオブジェクトを配置するサンプルです。キモいと言われそうですが個人的に好きなエフェクトです。

上記サンプルで仕様した3Dモデルの参照元はYouTube概要欄に貼っております。また、開発は8th Wallをthree.jsやA-Frameといったフレームワークと組み合わせて行うことに基本なります（A-Frameは慣れていないので基本three.jsを使いました）。

顔面（face mesh）に動画テクスチャを貼るのは、サンプルプロジェクトやAPIリファレンスにも載っていなかったので、こちらで簡単にご紹介したいと思います。

facemeshの作成には、XRExtras.ThreeExtras.faceMeshを使用します。XR ExtrasとはCameraPipelineModuleの拡張モジュールに当たるようです。普通の静止画によるfacemeshの作成は、サンプルプロジェクト「three.js: Face Effects」のface-scene.js→buildHead内にあるのでそちらを参考にしてください。

上記のサンプルでは、XRExtras.ThreeExtras.basicMaterialを使用してfacemeshを作成していますが、動画テクスチャを適用するにはXRExtras.ThreeExtras.videoMaterialを使用します。前者と違うのはvideo引数の部分ですが、内部的にはTHREE.VideoTextureを経由しているようです。こちらの引数にはHTMLのvideo要素を用意してあげればよいのでdocument.createElement('video')などで要素を作成してvideoMaterialの引数に渡してあげればOKです。以下の記事も参考にさせていただきました。

さいごに

以上、8th Wallを使用したサンプルや顔面動画テクスチャについて簡単にご紹介しました。ただWebARはとても優れた技術なのですが、処理速度や位置合わせの精度など真にリッチな表現はまだまだネイティブアプリ用の方が優れていると思うので、今後の発展により期待という個人的な感想です。

編集後記

こんにちは、デザイニウム広報のマリコです。今回は、簡単にWebAR開発ができる「8th Wall」の紹介ということで、実際に”顔面テクスチャを貼る”というテスト開発の動画とあわせての記事は、気になっていた方の参考になったのではないかなと思います✨（正直にいうと、顔面のテクスチャはちょっとキモいと思いましたｗ） 様々な新しいプラットフォームは日々増えているので、今後も新しい技術の紹介などをnoteを通じてしていけたらと思います。
また平澤のTECHブログは、下記のマガジンにまとめていますので、こちらも是非チェック＆フォローしてみてくださいね❗

The Designium.inc
・オフィシャルサイト
・Interactive website
・Designium Dance
・Twitter
・Facebook


この記事が気に入ったらサポートをしてみませんか？