> For the complete documentation index, see [llms.txt](https://portalgraphvr.gitbook.io/portalgraphdokyumento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://portalgraphvr.gitbook.io/portalgraphdokyumento/quick-startke/app-tutorial.md).

# Portalgraphアプリ作成チュートリアル

このページでは、開発者向けに最もシンプルなPortalgraphアプリの作成方法を解説します。PCの内蔵カメラ、または外付けUSBカメラを使い、アナグリフ（赤青）3Dメガネで見る方法を解説します。

Portalgraphは3Dプロジェクター/3Dテレビ/通常モニター＋赤青メガネ、カメラトラッキング/VIVEトラッカー等の違いを問わず、同一のバイナリで表示することが可能です。今回は通常モニター＋赤青メガネとカメラトラッキングで解説しますが、作成されたアプリは他の環境でも動作可能です。

### 必要なもの

* Webカメラ付きでUnityが動くPC（GPU搭載、または過去5年以内のIntel Coreシリーズ程度のCPU）
* Portalgraphランタイムのインストール <https://portalgraph.booth.pm/items/6256749>
* Unity 6以降
* 赤青3Dメガネ\
  [https://www.stereoeye.jp/shop/index.html](http://toy-box.shop-pro.jp/?pid=4563970) (推奨)\
  <https://amzn.asia/d/438qF7P>

## アセット使用手順

### プロジェクトの作成

まだ作成してない場合は、Unity Hubから新規プロジェクトを作成します。テンプレートはUniversal 3Dを選択してください（Build-in、HDRPも使用可能）。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2F6p9eylUMZ5xSWMeIMDif%2Fimage.png?alt=media&amp;token=2effe997-b738-4772-84f1-b7c52a5c231a" alt=""><figcaption></figcaption></figure>

### アセットのインポート

### Portalgraphアセットのインポート

メニューのAssets→Import Packages→Custom Packageからportalgraph.unitypackageを選択して、プロジェクトにアセットをインポートする。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FINxkLQrmqYBci3QO7GCh%2Fimage.png?alt=media&amp;token=908f9be4-115c-4987-abb9-18b807f2c9af" alt=""><figcaption></figcaption></figure>

#### TextMesh Pro設定

TextMesh ProのEssential Resourcesをインポートする。メニューのWindow→TextMeshPro→Import TMP Essential Resourcesをクリックしてインポートする。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FN2j37xCxOHsAwafQdgjT%2Fimage.png?alt=media&amp;token=85fa0451-cd9b-40cc-9160-1341622b5728" alt=""><figcaption></figcaption></figure>

### URP使用時のアナグリフ設定

URP使用時のみ、アナグリフ用レンダラーの設定が必要です。以下を参考に設定してください。

{% content-ref url="/pages/VvVVWRlMrBAt8mUM29gr" %}
[URP用アナグリフレンダラー設定（必須）](/portalgraphdokyumento/kedokyumento/urp-anaglyph-renderer.md)
{% endcontent-ref %}

### シーンの作成

Unity上でシーンを作成し、座標(0,0,0)にProject内のPortalgraphのプレハブを配置します。**Assets/Portalgraph/PortalgraphURP\_2023-6**をシーン内に配置してください。Portalgraph/ScreenCenterの座標が、表示画面の中心点になります。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FO9X4UXi1urJj22ubvhTL%2Fimage.png?alt=media&amp;token=b65be59e-e847-4546-b44c-755aeb4499af" alt=""><figcaption></figcaption></figure>

※配置するプレハブは、Unityのバージョン、レンダリングパイプラインによって異なります。

* Build-inの場合……Portalgraph
* URPでUnity 2022以前の場合……PortalgraphURP\_2020-22
* URPでUnity 2023、6以降の場合……PortalgraphURP\_2023-6
* HDRPの場合……PortalgraphHDRP

![](https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2Fg4G9EjgtdxJWixcI6YVM%2Fimage.png?alt=media\&token=3ea10637-8a1d-4623-8367-92f5ec5a27cd)

**また、元からシーンにあったMain Cameraは不要ですので、削除してください。**

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FORQn0OH2nUpWJjAuyX49%2Fimage.png?alt=media&amp;token=ae12f443-0492-444a-b99f-29f070040791" alt=""><figcaption></figcaption></figure>

座標(0,0,0)に**サイズが(0.1, 0.1, 0.1)のCube**を配置します。\
※PortalgraphではUnity上で入力したサイズで物体が現実に見えます。ですので、表示する物体はあなたのPC画面より小さい必要があるため、サイズを(0.1, 0.1, 0.1)にします。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FFkz6K1xQ7y2Htv6uq7ed%2Fimage.png?alt=media&amp;token=7bf5f712-b875-4539-86c0-6b27c8aaeb64" alt=""><figcaption></figcaption></figure>

### ビルド

メニューのFile→Build Settingsをクリックします。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FINTivvoAOBS2p1lw3yGo%2Fimage.png?alt=media&amp;token=d47b67c4-3ff9-47c8-be6c-acc4e1b93fad" alt=""><figcaption></figcaption></figure>

Sceme ListタブでAdd Open Scenesをクリックして現在のシーンをScenes in Buildに追加し、WindowsタブでBuildをクリックしてビルドします。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FamB4ozAWS7CSJtwXgBsr%2Fimage.png?alt=media&amp;token=a52665d3-01f9-4255-a5b4-9c5dec107e3b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FXZTfC2QJYLKZtdh9TiKJ%2Fimage.png?alt=media&amp;token=ef913ad8-26ab-4bb9-9870-252b2872a49c" alt=""><figcaption></figcaption></figure>

### 実行

Portalgraphアプリケーションの実行にはPortalgraphランタイムのインストールが必要です。\
ランタイムのインストール後に出力された実行ファイルを実行すると、自動でカメラトラッキングアプリが起動します。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FINya2B8TMmkXPCDTa545%2Fcamerapg.png?alt=media&amp;token=4bb9c9a4-5b35-40a7-b4ab-39fbe601117a" alt=""><figcaption></figcaption></figure>

カメラドロップダウンから使用するWebカメラを選択し、「適用」をクリックすれば顔の座標を追跡します。\
キャリブレーションをクリックするとカウントダウンが始まるので、カメラ真正面50cmの場所に目が来るように待機すれば自動で数値が設定されます。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FCB72gJJtC3gZNAc2iyek%2Fimage.png?alt=media&amp;token=a7dc372f-15db-45c6-be9f-4a4a797d044b" alt=""><figcaption></figcaption></figure>

作成したアプリの画面に戻ると、初めてPortalgraphを実行する場合は、自動で設定画面が「カメラ」タブの状態で表示されます（初めてではない場合はF12を押して「カメラ」タブを選択）。画面サイズを入力すれば設定完了です（フォーカスを外すと自動で反映されるので、ボタンを押す必要はありません）。設定画面を閉じます。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FvxFceQVMCWO9FbsTpu0P%2Fimage.png?alt=media&amp;token=9282453b-511d-4da1-bbc2-e653a30adb38" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FJEkE2s6rQEgWjjxjeAV7%2Fimage.png?alt=media&amp;token=b362367d-56e1-404b-af02-25b168153e6b" alt=""><figcaption></figcaption></figure>

以上で、様々な角度から3Dで見ることが出来るPortalgraphアプリケーションが出来ます。アナグリフ（赤青）3Dメガネを掛けて体験を楽しんでください。

操作は、\
\
WASDRF…前後左右上下移動（Shiftと同時押しで低速移動）\
QE TG ZC…左右、上下、傾き回転（Ctrlと同時押しで90度回転）\
12…スケール変更（Shiftと同時押しで低速化）\
3…スケールリセット

画面のサイズ、傾きに合わせてちょうどいいカメラ位置、角度、スケールに合わせてください。

#### うまく動かないときのチェックポイント

* カメラトラッキングアプリが動かない場合は、最新版のVC++ランタイムをインストールしてください。 <https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170>
* 何も表示されない場合\
  画面に配置したCubeのサイズは(0.1, 0.1, 0.1)になっていますか？Portalgraphは実際のサイズで表示するので、画面より大きい物体は表示できません。1キーを押すとスケールが縮小されるので、試してみてください。