<p data-line="0" class="code-line">こんにちは！<a href="https://zenn.dev/jigjp_engineer/articles/dbebf0077f0a6c" target="_blank">jig.jp Advent Calender 2024</a>の16日目の記事を担当します はたはた です。</p>
<p data-line="2" class="code-line">最近<a href="https://lookingglassfactory.com/looking-glass-go-spatial-photo-frame" target="_blank" rel="nofollow noopener noreferrer">Looking Glass Go</a>というガジェットを手に入れました。<br>
手元のディスプレイで立体的な3D映像を体験することができるガジェットで、3DSを想像してもらえれば分かりやすいかと思います。</p>
<p data-line="5" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/b1aa8cb9e192-20241216.webp" loading="lazy" class="md-img"><br>
<em>出典:<a href="https://greenfunding.jp/kibidango/projects/7956" target="_blank" rel="nofollow noopener noreferrer">https://greenfunding.jp/kibidango/projects/7956</a></em></p>
<p data-line="8" class="code-line">今回は、このLooking Glass Goを使ったUnityでの開発セットアップを紹介するとともに、その特性を活かした簡単なゲームを作成してみたいと思います。</p>
<p data-line="10" class="code-line">開発環境<br>
OS: Windows<br>
Unity: 2022.3.21f1<br>
Looking Glass Go Firmware: ver 1.0.44</p>
<h1 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" data-line="15" class="code-line">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h1>
<h2 id="looking-glass-go%E3%81%A8pc%E3%81%AE%E6%8E%A5%E7%B6%9A" data-line="16" class="code-line">
<a class="header-anchor-link" href="#looking-glass-go%E3%81%A8pc%E3%81%AE%E6%8E%A5%E7%B6%9A" aria-hidden="true"></a> Looking Glass GoとPCの接続</h2>
<p data-line="17" class="code-line">Looking Glass GoはDisplayPort Alternate Modeを使って映像入力を行います。<br>
ノートPC等でDisplayPort Alternate Modeに対応していれば問題ありませんが、自分のデスクトップPCは対応していませんでした。<br>
HDMI to TypeC では当然電源供給が無いので動かず、公式で売っているこちらのケーブルを使うことで動作させることに成功しました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d1f829be29506" src="https://embed.zenn.studio/card#zenn-embedded__d1f829be29506" data-content="https%3A%2F%2Fcheckout.lookingglassfactory.com%2Fproducts%2Flooking-glass-go-hdmi-cable%3Fvariant%3D41145833488473" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://checkout.lookingglassfactory.com/products/looking-glass-go-hdmi-cable?variant=41145833488473" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://checkout.lookingglassfactory.com/products/looking-glass-go-hdmi-cable?variant=41145833488473</a><br style="display:none">
注文してから約1週間で届きました。</p>
<h2 id="looking-glass-bridge-%E3%81%AE%E5%B0%8E%E5%85%A5" data-line="23" class="code-line">
<a class="header-anchor-link" href="#looking-glass-bridge-%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> Looking Glass Bridge の導入</h2>
<p data-line="24" class="code-line">以下のURLから最新のLooking Glass Bridgeをインストールします。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__19cf1bb9d2e48" src="https://embed.zenn.studio/card#zenn-embedded__19cf1bb9d2e48" data-content="https%3A%2F%2Flookingglassfactory.com%2Fsoftware%2Flooking-glass-bridge" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://lookingglassfactory.com/software/looking-glass-bridge" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://lookingglassfactory.com/software/looking-glass-bridge</a></p>
<p data-line="27" class="code-line">ケーブルを適切に繋ぎ、PCとLooking Glass Goを繋げます。<br>
接続後電源ランプが青点滅するので、短く一度電源ボタンを押すとモニターとして認識されます。<br>
YouTubeなどの通常の映像も表示できますが当然3Dにはなりません。</p>
<p data-line="31" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/578220703afa-20241216.jpg" width="250" loading="lazy" class="md-img"></p>
<h2 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" data-line="33" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h2>
<p data-line="34" class="code-line">下記サイトに接続してTest your Looking Glass ボタンを押し、キットカット(綿あめ味)の画像が表示されていれば成功です。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__01c72993e0ff1" src="https://embed.zenn.studio/card#zenn-embedded__01c72993e0ff1" data-content="https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Fdetect-a-looking-glass-l5o9d" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://codesandbox.io/p/sandbox/detect-a-looking-glass-l5o9d" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://codesandbox.io/p/sandbox/detect-a-looking-glass-l5o9d</a></p>
<p data-line="37" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/7843dcda6846-20241216.jpg" width="250" loading="lazy" class="md-img"></p>
<h1 id="unity%E3%81%A7%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" data-line="39" class="code-line">
<a class="header-anchor-link" href="#unity%E3%81%A7%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" aria-hidden="true"></a> Unityでの開発環境構築</h1>
<h2 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" data-line="40" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロジェクトの作成</h2>
<p data-line="41" class="code-line">Unityで適当な3Dプロジェクトを新規作成します。<br>
下記サイトからLooking Glass Unity Plugin をDLしてプロジェクトにインポートします。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b9fa1d43e446d" src="https://embed.zenn.studio/card#zenn-embedded__b9fa1d43e446d" data-content="https%3A%2F%2Flookingglassfactory.com%2Fsoftware%2Flooking-glass-unity-plugin" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://lookingglassfactory.com/software/looking-glass-unity-plugin" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://lookingglassfactory.com/software/looking-glass-unity-plugin</a></p>
<p data-line="45" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/b8c48b11db32-20241216.png" loading="lazy" class="md-img"></p>
<p data-line="47" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/017a6df1b807-20241216.png" loading="lazy" class="md-img"></p>
<p data-line="49" class="code-line">インポート後に表示されるダイアログはApply Changesを選択</p>
<p data-line="51" class="code-line">LookingGlass/Examples にあるサンプルはどれも興味深いので一度は見ておくのがおすすめです！</p>
<h1 id="%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%B2%E3%83%BC%E3%83%A0%E4%BD%9C%E6%88%90" data-line="53" class="code-line">
<a class="header-anchor-link" href="#%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%B2%E3%83%BC%E3%83%A0%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 簡単なゲーム作成</h1>
<p data-line="54" class="code-line">Looking Glass Goの側面についている3つのボタンは入力検知可能なので使っていきます。<br>
3D感を感じたいものの、ボタン3つでは大したアクションもできないのでレトロチックなレースゲームを作ろうかと思います。</p>
<p data-line="57" class="code-line">再配布の予定も無いのでフリーアセットの下記を使わせて頂きました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__77904f9f5a4ef" src="https://embed.zenn.studio/card#zenn-embedded__77904f9f5a4ef" data-content="https%3A%2F%2Fassetstore.unity.com%2Fpackages%2F3d%2Fenvironments%2Fsimplepoly-city-low-poly-assets-58899" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://assetstore.unity.com/packages/3d/environments/simplepoly-city-low-poly-assets-58899" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://assetstore.unity.com/packages/3d/environments/simplepoly-city-low-poly-assets-58899</a><br style="display:none">
このアセットはかわいいのでテストのときによく使っています。おすすめです。</p>
<p data-line="61" class="code-line">シーンにHologram Cameraを配置し、元のカメラを削除します。<br>
Hologram Cameraでキャプチャされたものがレンダリング処理され、Looking Glass Goに映し出されます。<br>
気をつけたいこととして、レンダリング負荷軽減のためHologram CameraはFar Clip Factorに設定した値より遠くの描画を行いません。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="65">using LookingGlass;

InputManager.GetButtonDown(HardwareButton.Forward)    // ⏭️ボタン
InputManager.GetButtonDown(HardwareButton.PlayPause)  // ⏯️ボタン
InputManager.GetButtonDown(HardwareButton.Back)       // ⏮️ボタン
</code></pre></div><p data-line="73" class="code-line">これでハードウェアボタンの入力を取ることができます。<br>
ただし、長押し判定は取れませんでした。そもそもゲームの入力なんかに使われることを想定していないのでしょうがないですね。</p>
<p data-line="76" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/6d8e69ed8206-20241216.jpg" width="250" loading="lazy" class="md-img"></p>
<p data-line="78" class="code-line">背景の設定に少し手こずりました。<br>
Hologram CameraのRender StackにあるStepsを調整することで描画順を制御できます。要素の値が大きいほど先に描画されます。<br>
このあたりはLookingGlass/Examples/8-RenderStacking が参考になりました。<br>
デフォルトではHologram Cameraの背景色が 000000FF(不透明) になっており、下層の要素が表示されません。背景の透明度を100％に設定することで解決しました。</p>
<p data-line="83" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/ff0e051b6156-20241216.png" loading="lazy" class="md-img"></p>
<p data-line="85" class="code-line">適当な画像をAIで作成し、Generic Textureを選択し背景として設定します。</p>
<p data-line="87" class="code-line">完成したものがこちら</p>
<p data-line="89" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9fa4b34a36d6-20241216.webp" loading="lazy" class="md-img"><br>
<br>
動画だと3D感が伝わりづらいですが、おおむね思った通りにできました。画面の小ささの割には臨場感があります。<br>
側面のボタンで左右に移動するため操作性が極悪です。普通にキーボード入力で良かった気がします。</p>
<h1 id="%E6%84%9F%E6%83%B3" data-line="94" class="code-line">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h1>
<p data-line="95" class="code-line">買ってから少し放置していたガジェットだったのでこの機会に触れて良かったです。<br>
Unityプラグインはサンプル等も含め思った以上に整備されており扱いやすいと感じました。<br>
ただ、奥行きを強調しすぎると映像がぼやけてしまい、逆に奥行きを浅くすると3D特有の迫力が失われるのが難しいところです。<br>
使ってみて問題点として挙げられるのはレンダリングの負荷が高く、自分のノートPCでは動作が厳しいため、外に持ち出して遊んだり人に見せたりできない点です。</p>
<p data-line="100" class="code-line">出典<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4cb58505bf61e" src="https://embed.zenn.studio/card#zenn-embedded__4cb58505bf61e" data-content="https%3A%2F%2Fdocs.lookingglassfactory.com%2Fsoftware-tools%2Flooking-glass-bridge%2Fdisplay-settings-on-windows" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.lookingglassfactory.com/software-tools/looking-glass-bridge/display-settings-on-windows" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.lookingglassfactory.com/software-tools/looking-glass-bridge/display-settings-on-windows</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__45a276fd0f43c" src="https://embed.zenn.studio/card#zenn-embedded__45a276fd0f43c" data-content="https%3A%2F%2Fdocs.lookingglassfactory.com%2Fdeveloper-tools%2Findex%2Ftutorial" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.lookingglassfactory.com/developer-tools/index/tutorial" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.lookingglassfactory.com/developer-tools/index/tutorial</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__185ef022920e8" src="https://embed.zenn.studio/card#zenn-embedded__185ef022920e8" data-content="https%3A%2F%2Fdocs.lookingglassfactory.com%2Fdeveloper-tools%2Findex%2Fsetting-up" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.lookingglassfactory.com/developer-tools/index/setting-up" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.lookingglassfactory.com/developer-tools/index/setting-up</a></p>


Looking Glass Goで飛び出す3Dゲームを作る

Discussion