[AR.js Studio] NoCodeでWebARをGithub Pagesに公開する

AR.jsというフレームワークを用いたAR開発の一部をNoCodeで実現する、AR.js Studio(WEBサービス)について解説します。

概要

  • AR.js Studio

  • 通常のAR.jsと比較した制限

    • 利用可能なデータの種類
      • 3Dモデルのうち複数のデータ形式を利用できません(Ex .obj, .mtl…)
    • 画像トラッキングベースのAR
      • AR.js Studioではマーカーベースとロケーションベースに限定される
    • データ容量
      • データ毎に最大の容量が定まっています

使用方法

  • AR.js Studioにアクセス

  • Project Typeを選択

    • Location-based
      • 緯度経度を指定して、そこにARを置くタイプ
      • 指定した場所にカメラを向けるとオブジェクトが表示される
    • Marker-basede
      • Marker(特定の白黒の画像)をカメラに写ると、その上にオブジェクトを表示する

Marker-base

  • TypeよりMarker-basedを選択

    AR js Studio Marker-based
  • Start Buidingを押下

設定

  1. Use a premade marker or upload your own

    • マーカーをオリジナルのものに変更することができます
    • デフォルトでは以下AR js 1 change marker
    • 変更する場合はupload imageから任意の画像をアップロード
      • どのような画像がマーカーに向いているかは公式ガイドをご確認ください
        • 基本白黒でシンプルなものが望ましい
  2. Choose the content

    • ARで表示したいコンテンツをアップロードしますAR js choose the contents
  • 表示可能なコンテンツは以下

    • 3D Object (.gltf, .glb .zip; max size 50MB)
      • 通常のAR.jsであれば利用可能なobj形式が使えないのは微妙
    • Image (.jpg, .png, .gif; max size 15MB)
    • Video (.mp4; max size 25MB)
  • 今回は3Dオブジェクトをアップロードしてみます

    • glbファイルを選択
  1. Export the project

Publish the project

AR js Studio Publish the project
  • 公開するARのプロジェクト名を入力します

    • そのままURLになるので注意
  • Publishを押下

  • Githubのアカウント連携の許可を求められます

    • AuthorizeGithub連携
  • Github Pagesの自動生成を開始

    AR js loading
  • 自動生成が完了

    リンクが共有されます
  • URLでAPが公開されている状態

    • アクセスすればアプリが起動し、マーカーをカメラで写すことでARを表示できます

関連記事

らくがきARの使い方

絵を動き回るARとして飛びださせるiOSアプリの解説です。

概要

リンクからインストールできます

  • らくがきAR
    • 動作環境
      • iPhone/iPad
    • 料金
      • 1000万ダウンロードまでは無料でしたが、現在は120円です
らくがきAR

使い方

以下の動画で解説しました。

  • 注意点
    • 背景は白地
    • 境界をはっきりさせる
      • 絵の枠線が途切れていると、うまく表示されませんでした
      • 枠線は黒がベター
    • 小さすぎ、大きすぎはNG

関連記事

Avatarify 手軽なディープフェイクの作り方 〜画像の顔をフェイストラッキングで操る〜

最近流行りのディープフェイクを体験できるiOSアプリです。(PC版もあります)
一時期これを利用して、有名人や友人になりきってWEB会議する遊びが流行りました。

概要

  • Deepfakeとは

    • Deep Learningを用いて作り出される偽の動画や画像
      • ネット上では250枚ほどの写真をアップロードすると、2日程度でディープフェイク動画を作成するオンラインサービスもあり、1本あたり2.99ドル(約300円)ほどの低価格で取引されているらしい
    • 活用シーン
      • 最近では映画で特殊メイクの代わりに用いられることがあります。一方でポルノに勝手に有名人の顔を合成されて問題にもなっています。
  • Avatarify

    • 機能
      • 静止画の顔をリアルタイムで操作
        • リアルタイムで、手軽なのがこれまでのディープフェイクツールとの差分
      • フェイストラッキングで自分の顔に合わせて動く
    • 動作環境
      • iPhone/iPad
        • App Storeからインストール
      • PC版はPythonが必要
        • gitからインストールする
Avatarify

使い方

iOS版

  1. 事前に動かしたい静止画を用意
    • 実際の人物でも絵や動物でも動きますが、目/口がはっきりしていないとむりでした
  2. 画像を登録
    • ここで設定した目/口の箇所が動きます
  3. インカメで自分の顔を認識させて操作

以下の動画で解説しています

  • ZoomなどのWEB会議で利用する場合は、背景にこれを表示するだけです。

PC版(github)

  • github avatarify

    • 上記にソースが公開されています
    • 使用方法はRead.meを参照
  • 公式のPC版デモ

  • その他:DeepFaceLab
    • 動画の加工にはこっちが主に利用されているようです
Deepface Lab

PC版の使い方もそのうちまとめます。Pythonやgitが動く環境を構築済みの人ならすぐできそう。

関連記事

[AR.js x A-Frame] WebAR入門~マーカーベースで3Dオブジェクトを表示するAPを開発する~

AR機能を持つWEBアプリの作り方を解説します。今回はAR.jsとA-Frameいうフレームワークを活用して、特定のマーカーの上に3Dオブジェクトを表示するImage Tracking型のARを作ります。30m程度で楽にできました。
CGデザイナーや駆け出しエンジニアでも簡単にできると思います。

基礎知識

WebARの概要と主な技術ついてです。
すぐに実装に入りたい人は飛ばしてOK

WebARとは

AR.js

  • AR(拡張現実)をWebブラウザ上で実現する技術

    • ユーザーはアプリのインストールが不要で手軽
    • 近年様々なサイトで使われ始めています
      • Ex.) ECサイトのサンプル表示、観光地の城の表示、バンドのCDジャケットの上にメンバーを表示..
  • WebARの種類

    • マーカーベース
      • 特定の画像(マーカー)の上に3Dモデルを表示
    • ロケーションベース
      • 特定の場所に3Dモデルを表示
  • WebARを実現する主な手段

    • A-FRAME
    • AR.js
    • model-viewer
    • WebXR Device API
    • 8th wall
  • 今回利用するJavaScripライブラリ/フレームワーク

    • A-FRAME
    • AR.js

A-FRAME

a-frame

  • Mozilla開発の3D VR 空間構築のWebVRフレームワーク
  • インタラクティブな3D動きを表現可能
    • 特定のオブジェクトのタッチで動くアクション、機能まで作れる
  • これ単体ではARにはならない

AR.js

AR.js

  • AR.js Documentation
    • ARをWebで実現するライブラリ
      • A-Frameで表現した3Dの動きをこれでAR化するイメージ
    • 10行程度の記述で手軽にARの実装が可能
    • .obj形式のデータを用意すれば簡単に出せます
    • 調べた限りでは、これが一番主流
    • ベースはthree.jsとjsartoolkit5

ARのタイプ

  • マーカーベース
    AR.js Marker Dog

    • 特定のマーカーがカメラに映った際に、その上に表示する
    • 使用例
      • 拡張アート、学習(拡張書籍)、拡張チラシ、広告…
  • 画像ベース(ImageTracking)
    AR.js Image Tracking T-REX

    • 特定の画像の上に表示
      • マーカーベースとほぼ仕組みは同じ
    • 安定性はマーカーの方が高い
  • ロケーションベース

    AR.js Location Based AR

    • マーカー無しで特定の場所に表示(ポケモンGOとかのイメージ)
    • 最近のアップデートで対応しました
    • 使用例
      • 3Dマップ、ゲーム、観光…
    • こちらは別記事で解説します

その他

  • model-viewer

    • モバイルのブラウザからWebARを閲覧可能にするWebコンポーネント
    • インタラクティブなボタンは追加できない
    • アニメーションも表示可能
      model-viewer
  • WebXR Device API

    • インタラクティブな要素を追加可能
    • WebARを実現するJavaScriptライブラリをゴリゴリ書ける人向け
    • Chrome ブラウザのバージョン79以降で利用可能
      WebXR
  • 8th Wall

    • ARのプラットフォームサービス
      8thwall
  • その他モバイルのARに使われるもの

    • ARKit
    • ARCore

実装手順

簡素なサンプルAPを作って公開するまで

  • 適当なディレクトリを作成
    • ar-test

3Dデータを用意する

  • .obj形式3Dデータを用意して、上記のhtmlから参照させます

    • ※mtl(マテリアルデータ)までセットで必要
  • 今回はネットで無料のデータを拾います

    • 以下のサイトから拾います(他の方法は後述)
    • Free3D
  • 今回は猫を表示します

    • 無料のデータと有料のデータがあります
Free3D cat
  • Freeの茶虎を選択
    • AR.jsで利用可能なデータ形式か注意
      • .objはAR表示可能です
    • ダウンロード
Free3D Cat茶とら
  • ダウンロードしたZipファイルを展開
    • .objファイルと.mtlファイルの両方が必要です
AR js Free3D Data

ARで表示するデータの準備は以上でOK

AR.jsをhtmlで利用

  • 適当なディレクトリを作成

    • ar-test
  • 上記のディレクトリの中にファイルを作成

    • index.html
  • index.htmlを編集

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!doctype HTML>
    <html>
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.2.0/aframe/build/aframe-ar.js"></script>
    <body style='margin:0px; overflow:hidden;'>
    <!-- こっからA-Frame -->
    <a-scene embedded arjs><!--="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false"--->

    <!-- こっからARの世界。マーカー上になにを展開するかを書く -->
    <a-marker preset="hiro">
    <!--objファイル: 形 mtlファイル: 表面 mtlなしでは透明になってしまう--->
    <a-entity
    obj-model="obj: url(obj/12221_Cat_v1_l3.obj);
    mtl: url(obj/12221_Cat_v1_l3.mtl)"
    scale="0.02 0.02 0.02"
    rotation="-90 0 0"
    >
    </a-entity>
    <!--scale:サイズ rotation: 角度 -90??-->
    <a-text value="Cat AR by J" position="0 0.8 0" align="center"></a-text>
    </a-marker>
    <!-- arなのでカメラが必要 -->
    <a-entity camera></a-entity>
    </a-scene>
    <!-- ここまででA-Frameおわり -->

    </body>
    </html>
  • このhtmlファイルでは、以下のようなWEBページを定義している

    • アクセスするとカメラが起動
    • a-markerで指定したマーカーをカメラに写った際にAR.jsの機能が起動
      • a-entityで指定したオブジェクトをARとして表示
    • a-textで空中に文字を表示

各ファイルを同一ディレクトリにまとめる

.objファイルと.mtlファイルをまとめる

  • AR.jsはhtmlで参照する3Dデータの相対パスを指定してARを表示します

  • ディレクトリを作成

    • 手動でもOK
      1
      mkdir "ar-test"
  • ディレクトリにindex.htmlと3Dデータをコピー

    • 以下のようにまとめる
ar-test directory
  • 3Dデータはobjというフォルダにまとめるar js directory

APを公開

作成したAPを公開して、ブラウザから確認してみましょう。
先ほど作成したindex.htmlとそこから参照する3Dモデルのデータをまとめてアップします。
公開先は以下のどれでもOK

Netlifyで公開

  • Netlify Drop

    • 手軽な無料のホスティングサービス
    • githubのアカウントがあれば、ソースのディレクトリをドラッグ&ドロップするだけ
  • アカウントを作成

    • GithubのアカウントやEmailで登録できます

Netlify Make Account

  • ログインするとこんな感じ
    Netlify Login

先ほど作成したディレクトリ(ar-test)をここにドラッグするだけでAPを公開できます

その他の手法で公開

それぞれ別記事で解説しているので今回は割愛します。
Netlifyは簡易的なものなので、ちゃんと公開するのであれば、↓の何れかがいいと思います。

動作確認/作成したAPの使い方

今回はマーカーの上に3モデルを表示する形式なので、マーカーは事前に印刷しておきましょうディスプレイ表示できる機器がスマホと別であればそれでもOK

  • 公開したURLにアクセスすると、APが起動してカメラへのアクセス許可を求められます
  • Agree
  • APが起動した状態でマーカーをカメラに写すと、3Dモデルが表示されます
    • マーカー全体がカメラに収まらないと表示されません

カスタマイズしてみる

マーカーを変更

自力でマーカーをいじろうとするとかなり専門的な知識を要求されますが、以下のジェネレーターで簡単に作成できました

  • AR.js marker generater

  • “Upload”から好きな画像を取り込めます

    • ここで例えば、CDのジャケットを画像として取り込めば、その上にARを表示できる。広告への応用もできそう

3Dデータを変更する

必要なデータ

  • .obj形式の3Dデータ
    • ※mtl(マテリアルデータ)までセットで必要です

3Dデータを用意する手段

以下の手段があります

  1. ネットで無料のデータを拾う
  • 以下の様なサイトに沢山落ちてます
    • Free3D
  1. iPadでキャプチャーする
  1. 自作する
  • CGデザイナー向けの手法
  • 私はCGデザイナーではありませんが、素人でもiPadのお絵描きアプリやCADで簡単なものは作れました。
    • AR.jsが対応可能な形式でデータを出力できるアプリであればどれでも使えます

参考

関連記事

AR

その他

iPadで3Dデータをキャプチャする手法 [display.land]

iPad Pro 2020にはレンズx3とToFセンサーがついており、3Dデータをキャプチャすることができます。近年クオリティの高いアプリが沢山出てきたので一通り試してみました。

今回試したアプリ

  • display.land
  • Qlone
  • pronoMeshScan
  • RestAR
  • ScandyPro

display.land

display.land

  • 室内でも、街中でも空間ごと切り取ることができる近未来的なアプリ

    • 色付きで取得できるのが強い
  • 使用方法は動画にまとめました

Qlone

display.land

  • Qlone

    • 小さい物体のキャプチャであれば、これが一番
    • キャプチャしたデータを保存する度に料金が発生するのは微妙
  • 撮影にはQlone Mat(以下)が必要なので、大きいものは無理
    Qlone Mat

pronoMeshScan

pronoMeshScan

  • データは取れるが、精度は微妙。机の様なシンプルな形状で得あれば問題なし

pronoMeshScan_scanning

ScandyPro

Scandy Pro

  • Scandy Pro

    • 顔のキャプチャーに特化したアプリ
  • キャプチャーされたおじさん
    Scandy Pro

関連

[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

×