2021年12月3日

AR開発ツール: Spark AR StudioとLens Studio

目次

  1. はじめに
  2. Spark AR Studio
  3. Lens Studio
  4. まとめ

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay3の記事です!
昨日は「Figmaのインタラクティブコンポーネントの基本と作り方」についての記事でした。

今回は、世界的に最も広く利用されているSNSのInstagramとSnapChatのARフィルターを開発するツールをご紹介いたします。

Spark AR Studio

概要

Spark AR Studioは、米Facebook社(現Meta Platforms社)が開発・提供する、Instagram用のARフィルター開発ツールです。

Mac OS、Windows向けに開発用のアプリケーションが提供されており、誰でも無料で利用可能です。

フェイストラッキング
  • Fece Mesh: 顔の形状のメッシュに自由にテクスチャを貼れます。
  • 顔の位置・角度

スクリーンショット 2021-11-26 142634.png (136.9 kB)

  • 髪を認識して色付け

スクリーンショット 2021-11-26 134917.png (221.8 kB)

フェイストラッキング(イベント系)

以下の要素をトリガーにしてイベントを発火できます。
ノーコードでも扱えますが、JavaScriptなどを用いて複雑な処理を実装することも可能です。

  • hasMouthOpen:口の開閉
  • hasRightEyeClosed, hasLeftEyeClosed:左右の目の開閉
  • isHappy, isKissing, isSmiling, isSurprised:表情を取得
  • onBlink:まばたき
  • onNod:頷く
  • onShake:頭を振る
  • isLeanedBack, Forward, Left, Right:傾ける
  • isTurnedRight, Left:左右を向く
ボディトラッキング
  • セグメンテーション:Web会議のバーチャル背景のように、人物と背景を分割できます。
  • Animation.gif (3.5 MB)

    ハンドトラッキング

    手の位置を追跡することができます。
    Animation2.gif (5.3 MB)

    平面認識

    カメラに写っている風景から自動的に平面を認識し、そこにオブジェクトを表示することができます。
    スクリーンショット 2021-11-26 134741.png (93.0 kB)

    画像のタップ

    フェイストラッキング等と同様に、画面のタップをトリガーにイベントの発火などが可能です。

    ビデオ通話(ベータ機能)

    Instagramのビデオ通話機能の中にARフィルターを実装することができます。
    ちょっとしたゲームなど、インタラクティブなことができると面白そうです。

    シェーダー

    少し知識のあるエンジニアやデザイナーの方なら、自分でシェーダーを弄って、かなり自由度の高いフィルターを作成することも可能です。
    10000000_359498501748514_7259372767694157423_n.gif (10.8 MB)

    Lens Studio

    概要

    Lens Studioは、米Snap社が開発・提供する、Snapchat用のARフィルター開発ツールです。

    Mac OS、Windows向けに開発用のアプリケーションが提供されており、誰でも無料で利用可能です。

    できること

    基本的な機能としてはSpark AR Studioと変わりませんが、
    Lens Studioはユニークな機能と豊富なテンプレートが特徴です。
    ここではその一部の機能をご紹介いたします。

    ボディトラッキング
    • Skeletal

    上半身のみですが、骨格のトラッキングが可能となっています。
    skeletal_temp_image2.gif (1.1 MB)

    • Full Body Triggers

    ジェスチャーをトリガーとして、様々なイベントを発火させることができます。
    fbtrigger-preview.gif (340.3 kB)

    Pet

    ペットの顔を認識することができます。
    目、鼻、口、頭、耳などの位置が補足可能です。
    pet_template_cat_example.gif (7.5 MB)

    Snap Camera(PC向けアプリ)

    既に使っている方もいるかもしれませんが、PC用に配信されている「Snap Camera」用のARフィルターも、Lens Studioで開発することができます。
    Snap Cameraを使えば、ZoomやGoogle MeetのようなWeb会議システム上で、ARフィルターを使うことが可能です。
    sc_guide_getting_started_select_lens.gif (9.7 MB)

    まとめ

    世界規模で広く利用されている2つのSNSアプリ用のARフィルター開発ツールをご紹介いたしました。

    Spark AR Studioは基本的な機能を抑えた上で、さらにリッチな開発が可能な拡張性が優れており、
    Lens Studioは上で紹介したようなユニークな機能や、PCでも利用可能といった幅広い対応が強みとした挙げられます。

    どちらのツールも、エンジニア以外の方でも簡単にARを作成することができるようになっており、今回紹介しきれなかった非常に沢山の機能があるので、是非触ってみて下さい。
    より詳しい使い方は公式ページのドキュメントや、様々な方が記事を投稿されているので、そちらをご参照ください。
    Spark AR Studio公式サイト
    Lens Studio公式サイト

    また、bageleeを運営しているpalanでは、ブラウザで簡単に作成・体験ができるARサービスを提供しております。
    ご興味のある方はぜひお問い合わせください!

    NativeAR/VRのお仕事に関するご相談

    Bageleeの運営会社、palanではNativeAR/VRに関するお仕事のご相談を無料で承っております。
    zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
    ぜひお気軽にご相談ください。

    無料相談フォームへ

    0

    0

    AUTHOR

    sugimoto

    sugimoto

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

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

    簡単に自分で作れるWebAR

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

    palanARへ
    palanar

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

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

    webar_waterpark

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

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

    話を聞いてみたい

    運営メンバー

    eishis

    Eishi Saito 総務

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

    sasakki デザイナー

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

    yamakawa

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

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

    Sayaka Osanai デザイナー

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

    はらた

    はらた エンジニア

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

    kobori

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

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

    sasai

    ささい エンジニア

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

    damien

    Damien

    WebAR/VRの企画・開発をやっています。森に住んでいます。

    ゲスト bagelee

    ゲスト bagelee

    かっきー

    かっきー

    まりな

    まりな

    suzuki

    suzuki

    miyagi

    ogawa

    ogawa

    雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

    いわもと

    いわもと

    デザイナーをしています。 好きな食べ物はラーメンです。

    kobari

    taishi kobari

    フロントエンドの開発を主に担当してます。Blitz.js好きです。

    shogokubota

    kubota shogo

    サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

    nishi tomoya

    aihara

    aihara

    グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

    nagao

    SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

    kainuma

    Kainuma

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

    sugimoto

    sugimoto

    asama

    ando

    CONTACT PAGE TOP