2023年12月 – シニア旅日記

クロマキー動画を使ったホログラム動画

投稿日2023年12月24日2023年12月24日

A-Frameを使ったWebARにクロマキー処理のスクリプトを利用するとホログラム動画が再生できるよう
完成したのがこちら
https://webar-senior.glitch.me/holo.html

クロマキー処理のスクリプト

<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

video配置時にmaterialを追加するだけでいいよう

    <a-video
      src="#vid"
      position="0 0 -7"
      rotation="0 0 0"
      width="6"
      height="1.7"
      material="shader: chromakey; src: #vid; color:0.1 0.9 0.2"
    >
    </a-video>

WebAR動画配置の解説動画

投稿日2023年12月24日2023年12月24日

WebARでの動画配置について丁寧に解説してくれている動画をyoutubeで見かけました

詳しくかつ丁寧に説明されています
ここでも方法としては、前画像を配置・クリックすることで動画再生させるjavascriptになってますね

やはりこの方法が、一番安定しているようで

これまでで解決できない問題
WebAR上に配置したオブジェクトを個別にクリックすることができません
MindARのテンプレートでは可能となってますので、何かやり方が間違っているようです

マーカーなしWeARの作成

投稿日2023年12月18日2023年12月18日

今回のミッションは、マーカーなしWebARの作成

A-FrameやAR.jsを使い、HiroマーカーやMindARなどでマーカーを使ったWebARの作成は一通りできるようになったが、マーカーなしのWebARは勝手が違うようで何かと難しい

今回の目標は、
・マーカーなしでWebARを実現
・動画を配置
・動画が読み込まれるまで真っ黒になるのを防止
→動画が読み込まれる前にプレビュー画像を動画の前に配置し、プレビュー画像のクリックでプレビュー画像を非表示すると同時に動画再生するようjavascriptsを調整
・動画再生後、案内画像クリックでyoutube動画にページ遷移
→先のスクリプトがプレビュー画像のクリックではなく画面のクリックで発火する（修正できなかった）ため、動画再生後、location.hrefでurl遷移するように調整した

と、一応は解決したのがこちら

今後、オブジェクトごとのクリックについて研究してみたい