【Wedding×IT】(ぱーと3)お返しAR～自作ARマーカー作り方編～

～シリーズ情報～

はじめに
1. Glitchとは
必要なもの
自作マーカーの作り方
自作マーカーを使ってみる
おわりに
1. 関連

はじめに

Wedding ITとは

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

お返しの封筒にARマーカーを付与してみたいので必要な技術を習得中です．

Glitchとは

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

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

前回は，GlitchやARマーカーの使い方を学んでいました．

今回は，それらの知識を活かして，自作ARマーカー作り方をやっていこうと思います．

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

必要なもの

Glitch
(前回のファイル)

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

はじめにWedding ITとは今回は，お返しの封筒にARマーカーを付与してみたいので，試しにARマーカーの使い方を学んでいきます．ちなみに無料で実践できます．GlitchとはGlitchはコーディングの共有とコラボレーションを促進するブラ...

AR.js

自作マーカーの作り方

マーカーを作成します．今回はinkscapeで作成して，PNGで保存しました．

これをAR.jsにアップロードしてから，

ダウンロードボタンから，2つのファイルを取得します．

こんな感じで，2つのファイルが取得できます．

自作マーカーを使ってみる

Glitchを開いて，アップロードボタンを押します．次に，すべてのファイルを選択してから，「patt」ファイルを選択します．

また，アセットフォルダから，「patt」ファイルのURLをメモしておきます．

最後に，index.htmlを下記のようにすることで，アップロードした画像と紐づきます．

<!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="custom" type="pattern" url="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/pattern-ar_marker5.patt?v=1664723363752">
        <a-sphere position="0 0 0" radius="1.25" color="#EF2D5E"></a-sphere>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

a-markerのurlはアップロードした「patt」ファイルのURLに変更しておいてください．
あとは，スマホで見ることで無事に球が見ることができました．

おわりに

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