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

AR/VR

はじめに

Wedding ITとは

【Wedding×IT】(ぱーと0)企画始動~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はコーディングの共有とコラボレーションを促進するブラ...

自作マーカーの作り方

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

file

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

file

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

file

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

file

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

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

file

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

file

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

file

<!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-markerurlはアップロードした「patt」ファイルのURLに変更しておいてください.
あとは,スマホで見ることで無事に球が見ることができました.

file

おわりに

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

コメント

タイトルとURLをコピーしました