Javascript

【JavaScript】Webブラウザで動くAR動画の作り方・使い方

はじめに AR（Augmented Reality、拡張現実）技術はエンターテインメント、教育、マーケティング、産業用途など、さまざまな分野で注目を集めています。スマートフォンやタブレット、PCなどの普及に伴い、Webブラウザ上で手軽にAR体験を提供できる技術が求められるようになりました。本記事では、JavaScriptを用いてWebブラウザ上でAR動画を実現する方法について、具体例とともに詳しく解説していきます。 初めに、代表的なWebARライブラリである「A-Frame」と「AR.js」を利用した基本的なサンプルコードを紹介し、その仕組みや動作原理、設定方法を順を追って説明します。また、マーカーを利用したAR体験の実装例をベースに解説します。 AR技術の基礎知識 ARは、現実の映像にコンピュータ生成の画像や動画、3Dモデルなどを重ね合わせる技術です。従来のVR（仮想現実）がユーザーを完全に仮想世界へ没入させるのに対し、ARは現実世界に仮想コンテンツを追加することで、現実と仮想の双方の情報を統合した体験を提供します。具体的な例として、スマートフォンのカメラで映した風景の上にナビゲーション情報を表示したり、博物館で展示物に関連する追加情報をオーバーレイ表示するケースが挙げられます。 Webブラウザ上でのAR実装には、以下のようなポイントが重要です。 ここで紹介する「A-Frame」と「AR.js」は、これらの要求を満たしつつ、比較的シンプルなコードで高度なAR体験を実装できる点が魅力です。 1. Webブラウザで手軽にAR動画！A-FrameとAR.jsを使った簡単なコード Webカメラを使用し、特定のパターンを持つ画像（Hiroマーカー）を認識することで、ARコンテンツ（動画）を表示するサンプルです。 コード解説 WebARライブラリ「A-Frame」と「AR.js」を使って、Webブラウザ上でAR動画を表示するサンプルコードを解説します。 1. HTMLの基本構造とスタイル設定 ページ全体の余白をなくし、シーン（a-scene）の高さを画面全体に広げることで、ユーザーにシームレスなAR体験を提供しています。これにより、スマートフォンでもPCでも違和感なく映像が表示されます。 2. JavaScriptライブラリの読み込み GitHub（https://github.com/aframevr/aframe）より、ダウンロードしてください。 GitHub（https://github.com/AR-js-org/AR.js）より、ダウンロードしてください。 3. ARシーンの記述 <a-scene> タグに arjs 属性を追加することで、Webカメラ映像の背景上にARコンテンツを表示できるモードに切り替えています。ここでは、以下の設定がされています。 4. マーカーと動画の設定 id="myVideo"：idにmyVideoを指定します。loop="false"：ループ再生をせず、1回だけ再生する設定。src="./video.webm"：動画ファイルのパスを指定します。背景透過の動画を使用します。 preset="hiro"：一般的な「Hiroマーカー」が認識された場合に内部のコンテンツ（ここでは動画）が表示されます。 指定された動画ファイル（video.mp4）がHiroマーカー上に3Dオブジェクトとして配置されます。 src="#myVideo"：動画オブジェクトのidを指定します。width="1.28" height="2.160"：動画のサイズを設定します。position="0 0 0"：動画の位置を設定します。rotation="-90 0 0"：動画の回転を設定します。 5. カメラの設定 シーン内にユーザーの視点が反映されるカメラを配置します。これにより、ユーザーのカメラ映像とARコンテンツがリンクし、動的な体験を実現します。 動作確認の手順 著作　VOICEVOX：ずんだもん　立ち絵：坂本アヒル 様 ツール：ずんだもんのプチ音声動画作成ツール Hiroマーカー Hiroマーカーは、ARコンテンツを現実空間に正確に配置するための視覚的な基準となるパターンです。一般に、白い背景に黒い図形が描かれたシンプルなデザインで、カメラや専用アプリが容易に認識できるようになっています。印刷物やスマートフォン、PC画面上で表示することで、ARライブラリがマーカーの位置や向きを検出し、その情報に基づいて仮想オブジェクトを配置します。 2. 画像認識AR（MindAR） 画像認識ARは、特定の画像（ポスター、広告、書籍の表紙など）を認識し、その画像に合わせてARコンテンツを配置する手法です。マーカーのような専用パターンではなく、実際に普段目にする画像を認識対象とするため、ユーザーにとって直感的な体験が得られます。 画像認識ARを実現するには、専用のライブラリ（例：MindAR、8th WallのWebARソリューションなど）を使用する方法があります。たとえば、MindARは軽量なWebARライブラリで、画像認識機能を備えており、複数のターゲット画像に対応できます。以下は、MindARを用いた基本的な実装例です。 動作確認 .mindファイルについて 「targets.mind」ファイルは、MindARライブラリにおける画像認識機能を実現するための重要な設定ファイルです。このファイルには、AR体験で使用するターゲット画像（認識対象となる画像）の情報が事前にエンコード・解析されたデータが含まれており、リアルタイムの画像追跡に必要な特徴量やマーカー情報が格納されています。 MindARが提供するオンラインジェネレーター：https://hiukim.github.io/mind-ar-js-doc/tools/compile 用意した認識マーカー用の画像をアップロードします。 「Download compied」ボタンで「targets.mind」をダウンロードできます。 3. AR動画を実装する際の注意点 AR動画の開発を進めるにあたって、いくつかの注意点があります。 1. デバイスの性能 ARはリアルタイムで映像を処理するため、使用するデバイスの性能が体験の質に直結します。低スペックのスマートフォンやPCでは、フレームレートが低下したり、遅延が発生する可能性があるため、対象とするユーザーの環境を考慮して実装や最適化を行いましょう。 2. 照明環境とマーカー認識 マーカー認識は、カメラの映像に依存するため、十分な明るさやコントラストが必要です。特に屋内や暗所での利用時には、正確な認識が難しくなる場合があるため、環境に合わせた調整や、場合によっては画像認識AR（例：MindARなど）の利用も検討してください。 3. ユーザーインターフェースの工夫 AR動画は従来の動画再生と異なり、ユーザーのカメラ操作や視線移動に連動するため、操作方法やインターフェースのデザインに工夫が求められます。使いやすさと直感的な操作性を両立させることで、初心者でもストレスなく利用できるAR体験を提供できます。 4. AR動画の使い方 AR動画は、さまざまな分野での活用が進んでおり、既に多くの現場で実用化されています。また、技術の進化とともに、今後さらに幅広い用途への展開が期待されています。以下に、現状の利用例と今後の可能性について解説します。 現在の活用事例 今後の展望 おわりに Webブラウザ上で実現できるAR動画技術は、従来のARアプリケーションに比べ手軽に導入できる点が大きな魅力です。A-FrameとAR.jsをはじめとするライブラリの登場により、開発の敷居が下がり、クリエイティブな表現の幅が格段に広がりました。また、WebXR APIなどの新技術の普及により、今後はよりリアルタイム性やインタラクション性に優れたAR体験が可能になると考えられます。 本記事で紹介したサンプルコードや解説、応用例を通じて、AR技術の基礎から応用までを幅広く学び、実際のプロジェクトへの展開に役立てていただければ幸いです。AR動画を活用した新たな表現方法は、今後のデジタルコンテンツ制作において、ますます重要な位置を占めることでしょう。 今後も技術の進化とともに、より高度で革新的なAR体験が登場することが期待されます。最新のライブラリやAPIのアップデート、そしてユーザーからのフィードバックを積極的に取り入れ、常に最適な体験を提供することが、AR開発における成功の鍵となります。 ぜひ、この記事をきっかけに自分自身のARプロジェクトを始め、創造性あふれる新たなコンテンツを生み出してください。ご質問や意見、実際の開発事例などがあれば、コミュニティと共有することで、更なる技術向上とイノベーションにつながるはずです。 PR広告 楽天ブックスでAR（拡張現実）の本を探す