メインコンテンツまでスキップ

エディタの使用

PlayCanvas Editor を使用して、シンプルな Gaussian splat アプリケーションを段階的に構築しましょう。インタラクティブな3Dの猫のおもちゃのsplatを回転させることができるシーンを作成します。

ビデオウォークスルー​

アプリを構築する完全なプロセスは、この短いビデオにあります。

以下に、ビデオで示されたアクションを、あなたが従うことができる一連のステップとして示します。

新しいプロジェクトの作成​

まず、新しいPlayCanvasプロジェクトを作成しましょう。

  1. playcanvas.com にアクセスし、アカウントにサインインします
  2. 「NEW」 をクリックして新しいプロジェクトを作成します
  3. 「Blank Project」 テンプレートを選択します
  4. 「My First Splat App」のような名前を入力します
  5. 「CREATE」 をクリックしてプロジェクトを作成します

新しいプロジェクトのダッシュボードに移動します。EDITORボタンをクリックすると、カメラ、ディレクショナルライト、キューブ、プレーンのみを含む空のシーンでエディタが開きます。

パフォーマンス最適化

最適なsplatレンダリングパフォーマンスのためには、アンチエイリアシングとデバイスピクセル比を無効にしてください。設定 → レンダリング に移動し、「Anti-Alias」 と 「Device Pixel Ratio」 の両方のチェックを外します。これにより、Gaussian splatレンダリングにおける主要なボトルネックであるフラグメント処理の負荷を軽減できます。詳細については、パフォーマンス ガイドを参照してください。

Splatアセットのアップロード​

まず、猫のおもちゃのsplatをローカルファイルシステムにダウンロードします。https://developer.playcanvas.com/assets/toy-cat.compressed.ply

次に、ダウンロードしたsplatをプロジェクトに追加しましょう。

  1. ASSETS パネル (画面下部) で、+ アイコンをクリックします
  2. ポップアップメニューから 「アップロード」 を選択します
  3. ファイルを開くダイアログで、toy-cat.compressed.ply を見つけて選択します

PLYファイルは処理され、あなたのAssetsパネルにGSplatアセットとして表示されます。

Splatエンティティの作成​

splatを表示するためのエンティティを作成しましょう。

  1. HIERARCHY パネル (左側) で、+ アイコンをクリックします
  2. ポップアップメニューから 「Entity」 を選択して新しいエンティティを作成します
  3. 新しいエンティティが選択された状態で、INSPECTOR パネル (右側) で「Toy Cat」に名前を変更します

GSplatコンポーネントの追加​

次に、Gaussian splatを表示するコンポーネントを追加します。

  1. 「Toy Cat」エンティティが選択された状態で、INSPECTOR パネルを下にスクロールします
  2. 「ADD COMPONENT」 をクリックします
  3. コンポーネントリストから 「Gaussian Splat」 を選択します

GSplatコンポーネントがエンティティに追加されます。

アセットの割り当て​

アップロードしたsplatアセットをコンポーネントに接続しましょう。

  1. GSplatコンポーネントのプロパティで、Asset属性の アセットピッカー (鉛筆アイコン) をクリックします
  2. 先ほどアップロードした猫のおもちゃのPLYアセットを選択します
  3. splatがビューポートに表示されるはずです！

Splatの配置​

splatが正しく配置されていません。その変換を調整しましょう。

  1. 「Toy Cat」エンティティがまだ選択された状態で、Inspectorの ENTITY ヘッダーセクションを確認します
  2. Rotation を 0, 0, 180 に設定します (正しい向きに反転させます)
  3. Position を 0, -0.7, 0 に設定します (原点に中央揃えします)

カメラコントロールの追加​

シーンをインタラクティブにするために、Asset Storeからカメラコントロールスクリプトをインポートしましょう。

  1. ASSETS パネルで、「ASSET STORE」 ボタンをクリックします
  2. Asset Storeで、SCRIPTS でフィルタリングします
  3. PlayCanvasによる Orbit Camera スクリプトを見つけて選択し、IMPORT をクリックします
  4. x アイコン (右上) をクリックしてAsset Storeパネルを閉じます

スクリプトはプロジェクトのAssetsパネルに追加されます。

次に、スクリプトをカメラにアタッチしましょう。

  1. Hierarchyで 「Camera」 エンティティを選択します
  2. Inspectorで、「ADD COMPONENT」 をクリックし、「Script」 を選択します
  3. Scriptコンポーネントで、「スクリプトを追加」 ドロップダウンをクリックします
  4. リストから 「orbitCamera」 を選択します (ドロップダウンに表示されているはずです)
  5. リストから 「orbitCameraInputMouse」 を選択します
  6. リストから 「orbitCameraInputTouch」 を選択します

カメラコントロールスクリプトがアタッチされ、使用準備ができました！

シーンのテスト​

次に、インタラクティブなsplatシーンをテストしましょう。

  1. ビューポートのツールバーにある 「LAUNCH」 ボタンをクリックしてプロジェクトを実行します
  2. ブラウザに猫のおもちゃのsplatが表示されるはずです
  3. 操作してみてください。
    • 左マウスクリック＆ドラッグ: splatの周りをオービット
    • マウスホイール: ズームイン、ズームアウト

最終結果​

おめでとうございます！PlayCanvas Editor を使用して、インタラクティブな Gaussian splat アプリケーションを正常に作成できました。

次のステップ

動作するsplatアプリができたので、以下を試してみてください。

  • 猫のおもちゃのPLYファイルを自分のものと交換する
  • ユーザーインターフェースを追加する
  • スクリプトでより複雑なインタラクションを構築する