隣の部屋からの音漏れをポジティブにするWebARをつくりました。
— 君塚史高 (@ki_230) 2020年7月28日
壁に穴を開け、隣人がUnityちゃんだと思い込むことで、音漏れに対するイライラを和らげます。ダンスを練習してるなら仕方ないな、と。 #ウソ穴 #バーチャルお隣りさんhttps://t.co/K6VrOOmmH5 pic.twitter.com/4fFar3kwUw
こんなものをつくってみました。
usoana-publicというライブラリをつかうと、とても簡単につくれます。
つくりかた
❶ usoana-public をダウンロードします。
❷ usoana5TypeC-movie に移動
❸ parts/movie にvideo.mp4という名前で動画mp4ファイルをいれる
これが穴の中に表示されるムービーになります。
❸ parts/img にtex001.jpg、invisible.pngという名前で画像ファイルを入れる
tex001.jpgは壁の内側の部分のテクスチャです。左右の切れ目が穴の下側で繋がるので、ループ素材にしておくと綺麗です。
僕は壁を写真で撮影して、色を合わせたループ素材をつくりました。
invisible.pngは透過画像です。サイズの指定はないのですが、僕は150px × 150pxにしてみました。
❹ httpsのサーバにアップする
ここまでできたら usoana5TypeC-movie をhttpsのサーバにアップします。
Github Pagesを使っても良いですし、netlifyもおすすめです。
❺ ARマーカーを印刷して壁に貼る
usoana-publicは内部でAR.jsを使っているので、AR.jsのデフォルトのマーカーを用意しておきましょう。
たった、これだけで壁に穴を開けるARの完成です。
あとは、ホスティングしたサイトにアクセスして、カメラで印刷したマーカを見てみましょう。
穴の中にvideo.mp4が映っていたら成功です。
僕は隣の部屋の住人が踊っている様子のムービーが欲しかったので、Unityちゃんを使わせていただきました。
カメラの位置だけ固定して使っています。
