• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

実務で使うWebARのチェックポイント

2021年12月10日

  • このエントリーをはてなブックマークに追加

こんにちは!
WebXRクリエイターの伊東です。

この投稿は、WebXR ( WebVR/WebAR ) Advent Calendar 2021 10日目のエントリーです。
昨日は、@ikkouさんの「<model-viewer>を使ってTwitter Cardsに3Dモデルを埋め込みつつ #WebAR で現実世界に重畳する」でした。

今回は、WebXRの中でも特に弊社が企画・開発に携わらさせていただいている「WebAR」に関して、実務の中で得られた知見や注意すべきポイントについてご紹介できればと思っております。

Contents

  • 1. WebARを導入する際の大前提
    • 1.1. プロジェクトのゴールは何なのか
    • 1.2. WebARが導入可能かどうかの判断
      • 1.2.1. ①現地のネットワーク環境が不十分
      • 1.2.2. ②技術的な問題
  • 2. 体験環境の確認
    • 2.1. 対象物と体験位置
    • 2.2. 体験する時間
    • 2.3. 安全面への配慮
  • 3. WebARの技術選定
    • 3.1. 現実をどう認識させるか
    • 3.2. WebARで課題が残る実装
      • 3.2.1. 【マーカーレス】平面認識WebAR
      • 3.2.2. 【マーカーレス】VPSを活用したWebAR
  • 4. まとめ
  • 5. 最後に

WebARを導入する際の大前提

プロジェクトのゴールは何なのか

「WebAR」というよりも、AR導入全般に言える大前提についてです。
「ARも成果を達成する手段にすぎない」ことを肝に銘じて、まずは、プロジェクトが達成すべきゴールが何なのかを明確に共有します。
設定されたゴールによっては、「それって本当にARで解決すべき課題なのか」となり、代替技術での実装をご提案することもあります。

WebARが導入可能かどうかの判断

ありがたいことに弊社にご相談いただくクライアント様の多くは、「体験時のハードルの低いWebARでやりたい」と、すでにそのメリットをご理解いただいた上でWebARをご指名いただきます。
たくさんの人に簡単にAR体験を提供することが可能なWebARですが、導入を見送る場合もあります。大きく分けると以下の2つの理由が挙げられます。

①現地のネットワーク環境が不十分

一番厳しいのは、「現地に通信キャリアの電波が全く届いていない」状況です。
レンタルされているポケットWi-Fiも、基本的にはキャリアの電波を中継するような仕組みなので使えません。

全くではないにしろ電波が弱い程度でも、提供するコンテンツの容量が大きくなってくると、4G回線の通信速度では読み込みに莫大な時間がかかってしまうこともあります。

その上でもどうしてもWebARでやりたいという場合は、予算が合えば工事をして回線を引くといった形もご提案しました。
※回線工事はコスト面の懸念がありますが、WebARでの活用以外にも来場者にフリーWi-fiを提供できるメリットがあります。

②技術的な問題

実現したいARの仕様によっては、どうしてもWebARでは実現できないものもあります。
技術的な問題に関しては、「WebARの技術選定」の項目で後ほど詳しく書きます。

体験環境の確認

WebARの導入が決まれば、細かい仕様策定の前にまずは「体験環境」を確認します。
「体験環境」は、後でご説明する「ARの技術選定」に影響します。

対象物と体験位置

特定の建物や商品、販促物などの「対象物」が何なのか、対象物をどの「体験位置」から認識するのか、ということを明確にします。
もちろん、「対象物」「体験位置」を指定せずに自由に体験できるケースも存在します。

「対象物」と「体験位置」が大きく離れてくると、マーカー型ARが物理的に対応できないケースがあります。

体験する時間

「時間帯」や「季節」によって、カメラに映る現実の映像の色味や明るさが変化します。
視覚的な環境の変化は、ARマーカーの視認性や、現実と3DCGのなじみ具合 = 没入感に影響します。

安全面への配慮

案件によっては、人がたくさん通行するような公道だったり、車道の近くでの体験だったりと、安全面に配慮することが求められる場合があります。
特定の場所以外では利用できない仕組みや、移動しながらの仕様を制限する機能の実装が必要になったりします。

WebARの技術選定

現実をどう認識させるか

WebARを認識方法で分類すると、「ビジョンベースWebAR」と「ロケーションベースWebAR」に分類されます。
さらに「ビジョンベースWebAR」を細分化すると、「マーカーベース」と「マーカーレス」に分類されてそれぞれ多様な実装方法が存在します。
詳しくは以下の記事をご覧ください。

AR導入検討時に必見!【AR大全】〜用途別ARの特徴から導入のすすめまで〜

WebARで課題が残る実装

【マーカーレス】平面認識WebAR

WebARで平面認識ARを実装することは、技術的に難易度の高い実装になります。
「AR Quick Look」「model-viewer」などのiOS/Androidがそれぞれ提供している平面認識技術が一番簡単に実装できるものになります。
端末依存の技術なため、例えば3Dモデルをタップして何かインタラクションを実装する、といったカスタマイズはできないのが難点でした。

他には、「8th Wall」が独自の技術で平面認識技術をWebARで実装可能にしていましたが、実務で活用するにはコスト面で断念せざるを得ないケースが多かったです。

そんな中、2021年10月に「Brippar」がWebARのためのSDKとして平面認識技術を提供開始したという嬉しいニュースがありました。

Blippar、試してみました!
PCのキーボードみたいな特徴点多めな平面だと、めちゃくちゃ位置合わせの精度高いと思う#blippar #webar #ar pic.twitter.com/pvopzrIVrV

— いとー@ALAKI_WebXR (@ALAKIWebVRAR1) October 12, 2021

提供開始当初は無料で利用できていましたが、現在は料金表が公開されています。
詳しくはこちらをご覧ください。

brippar Pricing

【マーカーレス】VPSを活用したWebAR

VPS(Visual Positioning Service/System)とは、事前に屋内外の現実空間を3Dスキャンして点群データをストックし、カメラ映像と点群データのマッチングを行うことで位置合わせを行う技術のことです。

VPSを活用できるSDKとしては、「Immersal」などが広く知られています。

Immersalで自宅の仕事部屋を模様替え。
位置固定じゃない小物のオクルージョン難しい!#Immersal #AR #Unity pic.twitter.com/34Rod0sMzo

— いとー@ALAKI_WebXR (@ALAKIWebVRAR1) November 1, 2021

UnityなどでImmersalを活用し、アプリARで実装することが一般的ですが、Immersalの点群データベースとマッチング技術がAPIで公開されていることから、WebARで活用することも可能なようです。

Immersalによる位置合わせは一定間隔おきに点群データとのマッチングを行う仕組みですが、位置合わせと位置合わせの間の部分は、センサー類から端末の「移動距離」を算出して3DCGがあたかも「そこにある」ように見せています。

この「移動距離の算出」がJavascriptのみで実装することがとても難しく、幅広い端末で実装することが難しい現状となっています。
しかし、「WebXR Device API」を活用すれば「移動距離の算出」を簡単に実装することができます。
※WebXR Device APIは、2021年12月現在iOS Safariではサポートされていません

 

まとめ

WebARを導入する大前提の部分から、仕様策定のための確認、WebARの技術選定までを通して、それぞれおさえておくべきポイントについてざっと書かせていただきました。

実務において、無理なく一般ユーザーにARを体験してもらうには、QRコードを読み込んだらすぐに体験できるWebARのポテンシャルの高さを強く実感しています。

年々着実に可能性が広がっていくWebARに関して、これからもキャッチアップしていって実務でもどんどん提案していきたいと思います。

 

最後に

ALAKI株式会社では、クリエイティブ業務における修正依頼にかかる時間を1/5にできる自社サービス「MONJI」、をはじめとするサービスで世界中に価値を提供するため、一緒に大きな目標に挑戦する仲間を募集中です!
さまざまな国で、さまざまな人たちと、ワクワクするビジネスに挑戦したい方のご応募をお待ちしております!

■ALAKI リクルートサイト
https://recruit.alaki.co.jp/

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • WebARはじめてみませんか?〜第2回 A-frameで3Dオブジェクトを自在に操作する〜

    2 2月, 2019

  • 【Unity】「Shape2D」の角丸がぼやける問題を解決する

    24 11月, 2022

  • WebARはじめてみませんか?〜第1回 AR.jsで簡単WebAR〜

    3 8月, 2018

  • Next story リモートワークでインタビュー動画を撮影する際の5つのコツ
  • Previous story Web制作の現場から、JavascriptやPHPの「デバッグ」について考える

弊社サービス

MONJI+

人気の記事

  • 仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • 空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • 未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2026. All Rights Reserved.