Appearance
Imagine WebAR
完成品URL：https://webar-demo3-20241204.netlify.app
1.「Imagine WebAR」サンプル動作確認
12/2
1.unity環境構築
Visual Studio2022のインストール
Unity(2022.3.18f1)をダウンロード＆インストール
2.Netlifyサインアップ
unityのインストールに時間がかかりそうだったため、先にNetlifyのサインアップをする。
参考にしたサイト：https://www.techpit.jp/courses/55/curriculums/58/sections/469/parts/1606
とりあえずビルドしたらすぐ試せそうなところまで
12/3
3.実際に作成
このガイドをもとにサンプルを作成。
日本語翻訳版（Google翻訳を使用）：
サンプル動画：
https://www.youtube.com/watch?v=hFw8rZEngP0
（ガイドを動画を用いて説明しているので、こちらのほうがわかりやすいかも）
使用した画像：
4.Netlifyで公開
unityで空のフォルダを作成し、Build And Runするとフォルダ内にいろいろと作成される。
そのフォルダをそのまま画像下「Want to deploy site ~」に入れることでサイトの公開ができる。
作成WebGL（デモ１）：
https://webar-demo-20241203.netlify.app/
カメラで上記の画像を見るとキューブが手前に出現する
実際の動作：
5.Building Demo Samplesを試す
ガイド6ページに「Building Demo Samples」がある。
ガイド通りに実装していき、再びBuild And RunをしてNetlifyでサイトの公開を行った。
作成WebGL（デモ２）：
https://webar-demo2-20241203.netlify.app/
このデモサンプルには、
４つのモードがある。
以下デモの動作
BASIC DEMO
3D MODEL
VIDEO DEMO
実際には画像に合わせて動画が流れている。
TEXTURE EXTRACTION DEMO
もとの画像（下にある画像）に色を付けると出てくる3Dモデルのテクスチャが色がついたものに変わるというもの。下の画像をおえかきとして用意し子供に描いてもらって、それを3D化するなどしたら喜ばれそう…
今回はiPhone13で行ったが、デモ1をした後にデモ2を続けて行うとアニメーションのところから、3Dモデルが現れなくなり、そのままアプリが落ちてしまった。長時間同じデバイスで行うのは厳しそう。ガイドにもその旨に関する記載があった。
2.動画シークバー対応
12/4
1.動画の再生方法の確認
Video Playerっぽい
参考サイト１：https://xr-hub.com/archives/15798
2.3Dオブジェクトのタッチ確認
せっかくなら動画自体にUIをつけたいので、3Dオブジェクトがボタンのようになるやつを探して使用してみる。
とてもよさげなものがあったので採用。
参考サイト2：https://nekojara.city/unity-object-click
とりあえずタッチが反応しているのか確認のため適当なUIを作成してテスト
実装すると、「Sample text」が「touch」に代わることを確認。
3.Video Playerが外のスクリプトから操作できるか確認
[SerializeField] private VideoPlayer videoPlayer;で設定
動作確認をしたところ動画の開始・停止までは実装できた。(UIは簡単なもののまま。再生ボタンの三角形は別で用意しないといけない。）
12/17
4.動画のコマ送りとミュートボタンの実装
ミュートボタンとコマ送りの機能を実装した。
コマ送り機能はYoutubeライクにしたかったので再生画面の左右に配置。ただ、ダブルタップの実装は手間がかかりそうだったのでいったんタップでの実装に。
ただし動画reelそのものが音がないようなので、ちゃんとミュートできているか確認できていない。ミュートのボタンが生きているのは確認できた。
Playに関しては三角形を作るより文字であらわすことに。（後でかえるかも）
すべて再生ボタンの時に使用したコードをそれぞれの機能に変更したもの。
5.シークバーのボタンの位置を変更で得きるように
シークバーのメイン機能を作成する
とりあえずはシークバー上でタッチした場所にボタンが移動するようにする。
x軸のみ変更することでタイムバーからはでないように。
実装してみるとなぜだか再生ボタン付近まで動いてしまう現象を確認。タイムバーに関するたっち を受け付ける範囲をオブジェクトで指定していたはずなのに。。。理由はまだわかっていない。
localPosition.x = Mathf.Clamp(localPosition.x, -2.5f, 4.5f);
を付け足して、ボタンが動ける範囲をプログラム側で指定。想像通りの動作をしてくれるように。
残りはボタンの位置に合わせて動画の時間を変更させる。
6.ボタンの位置と動画時間の同期
-2.5が0秒4.5が動画の終わりになるようにする。
完成。動画が終わった瞬間にまた始まるLoop機能はシークバーがあると不自然にかえって不便なものになるため、OFFに。
デモをしてみると動画が終わると再生が止まる。そのままシークバーで前に戻しても動画は再生されない。そのため、改良。
7.動画に合わせてボタンが動くように
ローカル座標とワールド座標が。。。
試行錯誤しながらなんとか完成。コードが美しくない気もするが動いたので完成とする。
今後は何を使用して動作させるか統一してからコードを書きたい
デモ動画（合計1分ほどあります。）
以下、デモURLとデモ画像
https://webar-demo3-20241204.netlify.app
スマートフォンなどで上記URLを開き、カメラのアクセスを有効にしてください。
ホーム画面でVIDEO DEMOを選択していただけると、作成したシークバーを確認していただけます。
Author: 水上 | Source:
水上\Imagine WebAR 150aba435ee780ee9d16f472a271a2aa.md