【alive連動企画】Live2Dモデルを投影できるホログラムスタンドを作ってみた

2023年11月30日 19:00

こんにちは、Live2D Cubism SDKチームです。

今回はCubism SDKを活用した事例としてLive2Dモデルを投影できるホログラムスタンドを作ってみました。
名付けて「飛び出す！Live2Dホログラムスタンド」です♪

今回は alive 2023 のリアル展示ブース「Live2D Cubism 展示」で、必要な材料をまとめた「工作キット」を数量限定で無料配布しております。
来場の際はぜひお手に取ってみてください！

工作キットを手に入れられなかった方や追加で作りたい方など、誰でもお試しいただけるように型紙のデータや作り方も掲載しましたのでぜひご覧ください！

ホログラムスタンドはAndroid、iPhoneどちらでもご利用いただけます。
また、AndroidはアプリのAPKも公開しております。

※作成したUnityのプロジェクトをWebGLに書き出す場合
詳細は過去の各お試しガイドで説明しておりますのでそちらをご覧ください。
Cubism WebAR お試しガイド
 Cubism 4 SDK for Unity お試しガイド (3/4)
Cubism 4 SDK for Unity お試しガイド (4/4)

概要と機能

このように、好きなLive2Dモデルを机の上に置いておくことができます。
モデルが浮かび上がる姿はまるでSF映画！

そしてケースの側面から指を入れ、モデルをつつくと反応してくれます。

仕組みの解説

このグッズでは、「ペッパーズゴースト」と呼ばれるトリックを活用しています。
ペッパーズゴーストとは透明な板状のものに映像を反射させることで、空間に浮かび上がっているかのような映像表現が可能となる技法です。
例えば地下鉄で窓の外を見ると、窓の外に自分が浮いているように見えたことはありませんか？それがペッパーズゴーストです！

今回はその現象をスマートフォンとアクリル板で再現してみました。ケース上部にスマートフォンが入っており、その映像をアクリル板に反射させています。
また、スマートフォンの内側カメラの映像を取得することで、指でモデルを触った際にインタラクションが発生するようになっています。

作り方

皆さんの手元でもお試しいただけるよう、作り方をご紹介します。

〇用意するもの　

・A4コピー用紙
・工作用紙 (厚紙でA4以上、厚さ0.5mmを推奨)
・反射する半透明な板 (80mm x 170mm、厚さ0.5mmを推奨)
※写真では透明な塩ビ板 0.5mmを使用
・はさみ、カッター、セロハンテープ、のり、定規などの工作道具

〇準備

1.型紙を3枚ともそれぞれA4用紙にプリントアウトします。
必要に応じて厚紙を貼ったり、厚紙自体に印刷するなどしてください。
※工作キットをお持ちの方は、同梱の型紙をそのまま利用可能です。
【ダウンロード　型紙】

2.印刷されたすべてのパーツを実線にそって切り取ります。

3.型紙の点線の部分に定規やカッターの背などを使って折り目をつけておきます。

以上で準備は完了です！

〇組み立て

写真のように、①と②と⑤を貼り合わせます。

①②⑤を貼り合わせた状態。
糊で接着した場合は工程ごとにしっかり乾燥させてください！

2.手順1の下部に③を貼り合わせます。

①②③を接着した状態。
③手前側の角は裏側からテープで接着しています。
ここだけのりしろがありませんのでご注意ください。

3.手順2の後部に、④の穴が下になるように貼り合わせます。

4.手順3の下部にパーツ⑨を、左右に90度に折り曲げた⑦を貼り付けます。

⑦の位置は①②の下辺に合わせると安定しやすくなります。
⑨の位置は写真の位置を参考に接着します。

5.パーツ⑥の短辺片側にパーツ⑧を3つ重ねたものを貼り合わせます。

6.手順5を、パーツ⑧を貼り付けた側が手前下側（上記画像の上側）になるように本体上部に差し込み、本体ののりしろ（上記画像の赤枠部分）と貼り合わせます。

7.投影する板を本体に差し込んだら完成です。

使ってみよう

使用するスマートフォンのブラウザで以下のページを開きます。

【サンプルページを開く】

2.画面右上の設定ボタンをタップし、モデルの位置や大きさを変更します。

3.本体にセットしてみて、位置が合わなければ手順2に戻り、再度設定しなおします。

これで完成です！

※Android端末に、サンプルのAPKをインストールして実行する場合は、上記の手順1でページを開く代わりに以下の手順を行います。

不明なアプリをインストールできるようAndroidの設定を変更します。
※端末やOSごとに設定方法は異なります。

2.Android端末からAndroid用アプリケーション(APK)をダウンロードし、インストールします。

【ダウンロード　Android用アプリケーション(APK)】

3.インストールしたアプリを実行します。
実行時に写真と動画の撮影の許可を聞かれるので許可します。

以上です。

さいごに

いかがでしたでしょうか？
今回ご紹介したように、Live2D Cubism SDKには様々な活用方法があります。
こちらのホログラムスタンドも上記の使い方以外にも色々な使い方ができると思います。
皆さんもぜひお好みのモデルを飾ったり、ホログラムスタンド本体を改造したり、表示するアプリをカスタマイズしたりして楽しんでみてください！

作成されたホログラムスタンドの感想や写真などはハッシュタグ「#Live2D_alive2023」を付けてSNSに共有していただけると嬉しいです！
今後の情報などもLive2D 開発チームの公式X(旧Twitter)アカウントなどで発信しますので、是非フォローをお願いします。

Cubism SDKの使い方の詳細についてはCubism SDK マニュアル、Cubism SDK チュートリアルをご覧ください。

Cubism SDK製品へのご意見、ご要望はクリエイターズフォーラムへ、Cubism SDKに関する感想等はハッシュタグ「#Cubism_SDK」を付けてポストしてください。
今後とも Cubism製品を始め、弊社製品のご愛顧のほどよろしくお願いいたします。

株式会社Live2D
Cubism SDKチーム

★おまけ★

〇応用編（自分でビルドしてみよう）
ビルド済みのAPKだけでなく、元のUnityプロジェクトも公開しています。
こちらを利用していただくことで、モデルを差し替えたり、Android以外のプラットフォームに対応させることが可能です。
基本的な使用方法は以下の手順になります。
※こちらの手順はUnityの基本的な使用方法を習得している方を対象としています。

1.Unityをインストールします。インストール時にAndroid Build Supportを同時にインストールしておきます。