[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を表示できます

関連記事

@EventEmitter @Input @Output @ViewChild ACM AMP 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 SSL SYNCROOM Schematics Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR 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

×