Zenn
🐺

【WebXR】”BLOCKVROCK”でAR空間をお試し制作

2022/12/23に公開
JavaScript
WebXR
aframe
tech

どうも、WebXR 1年生のAoya-Utaです。VR空間制作知識は”ほぼ初心者”で、Unityをインストールして1個サンプルを作って止まってしまいました。そこで最近出会った「BLOCKVROCK」で再挑戦。使い勝手とVR空間制作については下記に記載しました。
https://zenn.dev/aoya_uta/articles/a1c72aea132ba5

今回はAR。例によってメニューのテンプレート一覧から、AR用の「7.AR」「8.ARで複数のマーカーに反応する」「11.マーカーなしのAR」を参考に始めましたが、このテンプレートにない「平面検知AR」から記述します。
※ライブラリ的には「aframe-ar-nft.js」を呼び出しているようです

【制作例：平面検知AR】

AR - 平面検知:曜変天目茶碗（風)


YouTubeのvideoIDが不正ですhttps://www.youtube.com/shorts/p4BbRMi38gI
glbモデル※があれば、1個のブロックを指定するだけで完成します！ただしARマーカーとの併用はできないようです。(iPhone/iPadのSafariで実行)
※glbモデルは、以下のページから使わせていただいています。
・曜変天目茶碗（風)の形状、およびapple
https://ft-lab.github.io/gltf.html

鑑賞方法

①下記URL/QRコードからAR空間を起動すると、作品が表示されます。iPhone/iPadでSafariブラウザ表示の場合で、さらにAR Quick Lookアイコンを押した際、カメラが平面を認識して現実空間上に配置して鑑賞することができます。
①AR起動 - URLリンク/QRコード
https://run.blockvrock.com/show_user_contents?user_id=1794&project_id=18537f71ae827

起動用QRコード

作り方

  1. 作品リストの”あたらしく作る”で、BLOCKに何もない状態で開始します
  2. ファイルメニューのファイル管理を選択します
  3. マイファイルでglbファイルをアップロードした後、中央の青いアイコンか、BLOCKにある”平面検知AR”のsrcにファイルパスを指定して完成です


    BLOCK部分

感想: 平面検知AR

1個のブロックだけでできてしまうので、作ったという感覚すらなく出来てしまいました。ただし、テンプレートに例がなかったので、平面検知ARブロックの使い方がわからず、どう使えばよいか3日間悩みました苦笑。テンプレートに平面検知ARの作成例を入れて欲しいですね。

【制作例：ARマーカー有り】

AR marker - Apple(glb)

ARマーカーにかざすと、glbで作られたappleを表示されます。
YouTubeのvideoIDが不正ですhttps://youtube.com/shorts/eHZ272KVRaY

鑑賞方法

①下記URL/QRコードからAR空間を起動し、②開いたPC/スマホ等からARマーカー(Hiro)を読み込むと、作品が表示されます。
①AR起動 - URLリンク/QRコード
https://run.blockvrock.com/show_user_contents?user_id=1794&project_id=18537eca818255

起動用QRコード
②ARマーカー（Hiro）を読み込む

読込用ARマーカ

作り方

  1. テンプレートから「7.AR」を選択すると、テクスチャ以外のブロックが出来上がります
  2. Appleのglbモデルをファイル管理メニューで呼び出します
  3. ARマーカーブロックの中に設定して、大きさを整えます。これで表示完成。

    BLOCK部分

AR marker - テノリ地球儀

ARマーカーにかざすと、ぐるぐる回る地球儀を作りました。
https://www.youtube.com/watch?v=gC_w0SEqSbo

鑑賞方法

①AR起動 - URLリンク/QRコード
https://run.blockvrock.com/show_user_contents?user_id=1794&project_id=1852e231eaa49

起動用QRコード
②ARマーカー（Hiro）を読み込む

読込用ARマーカ

作り方

  1. テンプレートから「7.AR」を選択すると、テクスチャ以外のブロックが出来上がります
  2. 球体の色を白に変えて、地球儀のテクスチャ画像※をファイル管理メニューで呼び出します
  3. 球体の後ろ○に結合して、大きさを整えます。これで表示完成。
  4. くるくる動きを付けるために、テンプレート「19. コードモード」を参考にCODEタグに記載して完成！

    BLOCK部分

    CODE部分

※テクスチャ画像は、以下のページから使わせてBLOCKVROCKにUPして使用しました
・地球のテクスチャマップで透明な地球の惑星 著作者：Freepik
・人工衛星のテクスチャ:黄金色に輝く金紙のテクスチャ素材
https://free-paper-texture.com/shiny-gold-paper/

感想: ARマーカー有り

アイディア出しの後、3分で作れました！「ブロック4個+コード4行(動作)」で実現。
ARマーカーを移動させると、AR表示がついて来ているように表示され、インタラクティブになって楽しいです。直方体/球体だと動作もコードでコントロール可能。
ただ、1個のARマーカーに対し、1個のglb/直方体/球体しか表現できなかったので、複雑なことはできなさそうに感じました。
勘違いでした、重なって見えなかっただけで”複数表示可能”でした！

【制作例：ARマーカー無し】

AR - Earth & Satellite

地球儀の周りを人工衛星※が周回※する空間を作成しました。フォーカスを人工衛星に当てると、通信音がインタラクティブに再生/停止できます。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/shorts/IJ8NwaT2o7Q

鑑賞方法

①AR起動 - URLリンク/QRコード
https://run.blockvrock.com/show_user_contents?user_id=1794&project_id=18512b04e091e3

起動用QRコード

作り方

  1. 今までの組み合わせです。周回運動※にJavascriptのページを参考にさせていただきました。

    BLOCK部分

    CODE部分
    ※周回運動は下記を参考にさせていただきました。
    https://sbfl.net/blog/2017/02/17/javascript-animation-with-trig-functions/

感想: ARマーカー無し

ARマーカー無しだと「VRモードの背景がカメラ画像」ですね。たしかに”現実空間への重ね合わせがAR”なんですが、インタラクティブ性がないと「ふーん」で終わりそう。。
最初の構想を断念※1しましたが、インタラクティブ性を出すため、フォーカスが合うと音楽※がON/OFFできる仕組みをブロックで追加してみました。
※1.クリスマスツリーを作ろうと思いましたが、造形の経験が無さすぎて納得できるものが作れなかったため断念（すみません、カレンダー公開日を何度か延期しました）

※2.通信音はこちらのサイトを利用させていただきました。
https://soundeffect-lab.info/sound/machine/machine2.html

Discussion