はじめに
以前、「自作プロジェクターを作って大きめホログラム映像を見てみた」の記事を書きました。この記事はいいね数が少ないものの、検索ワードに引っかかりやすいのかアクセス数は多いです。
ちなみに3Dホログラムといっても、一昔前に流行ったスマホとCDケースの偽ホログラムの「ペッパーズ・ゴースト」と呼ばれるものです。
ということで、Twitter経由でUnityによるホログラムの質問がきました。
Pepper's Ghost Hologram Pyramid Unity 動画
これは自分が作成したわけでもなくネットで検索して見つけたものです。
https://github.com/KainosSoftwareLtd/PeppersGhostPyramid
作者のGit Hubからダウンロードして「Example.unity」をダブルクリックすればUnityが起動して再生すれば動作します。
それで動かしてみましたけど、ここから初心者向けには教えるには厳しいなと思いました。
偽ホログラムは原理さえ知っていれば手軽るに作成できます。
ホログラム
投影機の作成
100均店で購入した透明クラフトプラパンで、スマホ用(上辺が1cm、高さ3.5cm、底辺6cm)を作りました。
投影機の作成方法はこちらの記事でもいいかと思います。
HTML5 CanvasとiPadで実現する3Dホログラム
投影する映像の素材
素材は背景は黒で静止画ではつまらないので動作でgifファイルということで、今回はtktkさんの「moyasiエフェクト館」の戦闘エフェクト素材の一部を使わせて頂きました。
http://tktknkyo.hatenadiary.jp
投影する映像の作成
画像を上下左右に4つ転写します。転写の際には、投影時に正位置で見えるよう左右反転したものを90度ずつ回転させるのがポイントです。
ソースコード
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<style>
body, canvas {
background-color: #000;
}
.Rotate90{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.Rotate180{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.Rotate270{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
}
</style>
</head>
<body>
<img src="20171231081200.gif" style="position:absolute; top:0px; left:150px" />
<img src="20171231081200.gif" style="position:absolute; top:150px; left:300px" class="Rotate90" />
<img src="20171231081200.gif" style="position:absolute; top:300px; left:150px" class="Rotate180" />
<img src="20171231081200.gif" style="position:absolute; top:150px; left:0px" class="Rotate270" />
</body>
</html>
スマホで確認
Webにアップロードしてスマホから確認します。
今回、作成したのは下記サイトに置きました。
http://yaju.sakura.ne.jp/holo/index.html
スマホで画像の位置を中央に調整してください。
ちなみにGitHubにはWebサーバなくてもWebページ公開できる機能があります。
最後に
投影映像を凝ったものを作りたい場合は映像自体をプログラムで作ればいいと思います。
Unityで作成するにしても2Dでカメラ1つにした方がいいかな、紹介してて何だけど3Dでカメラ4つとか行き過ぎな気がしますしね、それに光源が1つだと他3つと明るさが違ってしまう。