【Wedding×IT】(ぱーと2)お返しAR～ARマーカーの使い方編～

～シリーズ情報～

はじめに

Wedding ITとは

エンジニアの夫婦が結婚式をすると．．オープニングムービーではUE5を使ったフルCG プロフィールムービーではプロジェクションマッピング余興ではメイキングムービーなど，IT技術を駆使したコンテンツが目白押しになります．このようにWedding（結婚式）とIT技術を駆使したものを「Wedding IT」と呼んでみます．これらのやり方を紹介したいのは山々なんですが，まずは「お返し」に関してIT技術を駆使したものを作成しようと思います．

今回は，お返しの封筒にARマーカーを付与してみたいので，試しにARマーカーの使い方を学んでいきます．

ちなみに無料で実践できます．

Glitchとは

Glitchはコーディングの共有とコラボレーションを促進するブラウザベースの開発環境です。その特徴としては、ユーザーが自分自身のアプリケーションを作成し、編集し、そして共有することができるという点にあります。

Glitchの特徴

Glitchは、リアルタイムのコラボレーションとコードの再利用を可能にすることで、誰でも簡単にウェブアプリケーションを作成することができます。また、ライブプレビュー機能があり、コードの変更をリアルタイムに確認することができます。

Glitchでできること

Glitchでは、ウェブサイトの作成からゲーム開発まで、様々な種類のプロジェクトを作成することが可能です。また、他のユーザーとコードを共有したり、他のユーザーのプロジェクトをリミックスしたりすることもできます。

A-Frameとは

A-Frameは、ウェブブラウザで動作するオープンソースの仮想現実（VR）フレームワークです。これにより、HTMLのような簡単なマークアップ言語を使って3DとVRの体験を作成することができます。

A-Frameの特徴

A-Frameの主な特徴は、その使いやすさと柔軟性にあります。HTMLと同様のシンタックスを使用するため、初心者でも簡単に3DとVRの体験を作成することができます。また、A-Frameはエンティティ・コンポーネント・システム（ECS）アーキテクチャを使用しており、これにより高度なカスタマイズと拡張性が可能になります。

A-Frameでできること

A-Frameを使用すれば、ウェブサイトでの3Dアニメーションから、完全な仮想現実体験まで、様々なことが可能になります。また、A-Frameはモバイルデバイスやデスクトップ、さらにはVRヘッドセットでも動作します。

GlitchとA-Frameを合わせて使うメリット

GlitchとA-Frameを合わせて使うことで、あなたは独自の仮想現実体験を作り出すことができます。そのプロセスは簡単で、かつ多くのメリットがあります。

独自の仮想現実体験の作成

GlitchとA-Frameを組み合わせることで、自分だけのVR体験を手軽に作成することができます。HTMLのようなマークアップ言語で3Dの体験を記述し、Glitchでそれを編集・共有することが可能です。

コードの共有とコラボレーション

Glitchのコード共有機能を使えば、A-Frameで作成したVR体験を簡単に他の人と共有することができます。また、チームで作業する場合、リアルタイムでコードの編集を行うことが可能になります。

低コストでのVR体験

この組み合わせにより、高価なハードウェアやソフトウェアを必要とせずにVR体験を作成することが可能になります。これにより、誰でも手軽にVRの世界を体験することが可能になります。

必要なもの

Glitch
(前回のファイル)

【Wedding×IT】(ぱーと1)お返しAR～Glitchの使い方編～

今回は，お返しの封筒にARマーカーを付与してみたいので，試しにGlitchの使い方を学んでいきます．ちなみに無料で実践できます．

A-Frame

ARアプリ開発に欠かせないGlitchとA-Frameとは何か？

こんにちは、今日は二つの非常に魅力的で革新的なツール、Glitch とA-Frame についてお話しします。これらは新世代の開発者たちがクリエイティブなプロジェクトを手軽に始められるプラットフォームで、かつてないほど簡単に仮想現実の世界を作り出すことができます。

いざ実践

コード

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

ざっくり解説

a-markerでマーカーの種類を選択できます．今回はこちらのデフォルトの画像を使います．

表示するオブジェクトはa-markerの内部に表記します．
今回は前回使用したa-sphereを使います．

こいつです．

コードをこんな感じにコピペします．

あとは，共有ボタンからURLを取得して

スマホからマーカーを見ると．．．．こんな感じに赤い球体が浮いています．

もうちょっと詳しい解説

HTMLとその構成要素について

まずはHTMLとその基本的な構成要素について理解しましょう。HTMLはHyperText Markup Languageの略で、ウェブページを作成するための言語です。この言語は、一般的に「開始タグ」と「終了タグ」からなる「要素」で構成されます。


<!DOCTYPE html>
<html>

上記のコードでは、「<!DOCTYPE html>」はHTML5というバージョンのHTMLを使ってウェブページを作ることをブラウザに伝えるための宣言です。「」はHTMLのコードを書き始める宣言です。---

JavaScriptのライブラリを取り込む

HTMLには、JavaScriptというプログラム言語を使ったライブラリを取り込むことができます。これにより、ウェブページにさまざまな動的機能を追加することが可能になります。


<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

上記のコードでは、「A-Frame」という3Dコンテンツを表示するためのライブラリと、「AR.js」というAR（拡張現実）を実現するためのライブラリを取り込んでいます。---

ウェブページの本体を定義する

HTMLの「body」要素は、ウェブページの本体部分を定義します。ここに表示される内容がブラウザで表示されるウェブページの主要部分となります。


<body style="margin : 0px; overflow: hidden;">

このコードでは、スタイル指定で余白を0ピクセルにし、内容が画面外にはみ出た場合にスクロールさせない（hidden）設定にしています。---

ARのシーンを作る


<a-scene embedded arjs>

ここでAR.jsとA-Frameを使ってARのシーン（3Dの場面）を作り始めています。---

ARマーカーを設定する


<a-marker preset="hiro">

この行はARマーカーを設定しています。マーカーとは、ARで3Dコンテンツが表示される基準となる目印のことです。この例では、"hiro"というプリセットマーカー（予め設定されたマーカー）を使用しています。---

3Dの球を作る


<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

ここで3Dの球（スフェア）を作っています。位置は"0 1.25 -5"と指定しており、これはx, y, z軸の順になります。また、"radius"で球の半径を、"color"で色を指定しています。---

ARマーカーの設定を終える


</a-marker>

マーカーの定義の終わりを示しています。このマーカーの範囲内でARコンテンツが表示されます。---

カメラを設定する


<a-entity camera></a-entity>

ここでカメラを設定しています。カメラはユーザーがARシーンをどの視点から見るかを決める役割があります。---

ARのシーンを終える


</a-scene>

これでARのシーンの定義が終わります。

ウェブページの本体とHTML全体を終える


</body>
</html>

これらはそれぞれとの範囲の終わりを示しています。全てのHTMLコードはこのように開始タグ（例えば<html>や<body>）と終了タグ（例えば</html>や</body>）で挟まれています。

以上が、コード全体の解説となります。このコードを使用することで、特定のマーカーをカメラで読み取ったときに、そのマーカーの上に赤い球が表示されるARというものが実現します。

おわりに

次回は，自作マーカーと自作モデルを使ってやっていきます．