[Spark AR] ARフィルターの作り方


Spark AR Studioというソフトを使って、ARフィルターを作る手法を解説します。

Spark AR Studioの準備

  • 以下のサイトからPCへダウンロード
  • スマホで動作確認するアプリもダウンロードしておいてください
  • 先ほどインストールした、以下のアプリを開きます
    Spark AR Studioアイコン
  • まずはFacebookアカウントでログイン
    Login
  • アプリを起動するとこんな感じ
    image

    チュートリアル

  1. Viewpoint
    • カメラの視点を確認できます

      SparkAR/ViewPoint

  2. Simulator
    • 右上のSimulatorでデバイスでの同さを確認可能です

      SparkAR/Simulator
  3. Sidenav
    • 左のサイドナビで、Simulatorを停止することができます

      SparkAR/Sidenav
  4. Scene Panel
    • Objectを足すことができます

      SparkAR/Scene Panel
  5. Assets Panel
    • マテリアルやテクスチャのアセットを追加できます
    • 下のAdd AssetsからLocal端末上に保存しているデータを読み込めました。

      SparkAR/Assets Panel
  6. Easy build Library
    • 100種以上の3Dオブジェクトや音源が用意されています

      SparkAR/Easy build
  7. Object 設定パネル
    • オブジェクトの設定をいじることができます

      SparkAR/Object Config
  8. Test
    • Testfileを送ってエフェクトを試すことができます

Spark AR/Test

9. Upload to Spark AR Hub
- Spark ARのハブに公開することができます

Spark AR/Spark AR Hub


10. ducumentation/Q&A
- 左下のボタンより説明資料やQ&Aを行えます

Documentation/Q&A

作り方

  • チュートリアル後のHome画面はこんな感じ
    Spark AR home
  • New Projectかテンプレートから開発を開始しましょう
  • 作り方のイメージ
    • 3Dのオブジェクトを用意する
    • Add ObjectからPC上のデータを選んで取り込む
      • 後はSpark AI上で編集
    • 画像をテクスチャとして表示するときも同じような感じ

      詳細な作り方は別途まとめます。
@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×