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

Webコンポーネントの使用

PlayCanvas Webコンポーネントを使用して、簡単なGaussian splatアプリケーションをステップバイステップで構築しましょう。回転できるインタラクティブな3Dの猫のオモチャのスプラットがあるシーンを作成します。

開始点​

index.htmlという新しいファイルを作成し、WebコンポーネントのボイラープレートHTMLをそこにコピーすることから始めます。

次に、<pc-app>および<pc-scene>要素を使用して、アプリケーションの基本構造をHTMLのbodyに追加しましょう。

<pc-app antialias="false" high-resolution="false">
    <pc-scene>
    </pc-scene>
</pc-app>

これにより、空の3Dシーンが作成されます。しかし、まだ何もレンダリングされたものは見えません。そのためには、カメラとスプラットを追加する必要があります。

パフォーマンス最適化

スプラットのレンダリングパフォーマンスを最適化するため、<pc-app>要素のantialiasとhigh-resolutionを無効にしました。これらの設定は、Gaussian splatレンダリングの主要なボトルネックであるフラグメント処理の負荷を軽減するのに役立ちます。詳細については、パフォーマンスガイドを参照してください。

アセットの読み込み​

スプラットを表示したり、カメラコントロールを追加したりする前に、アプリが使用するアセットを定義する必要があります。<pc-asset>要素を使用して、カメラコントロールスクリプトとスプラットアセットを追加しましょう。

<pc-app antialias="false" high-resolution="false">
    <pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs" preload></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
    <pc-scene>
    </pc-scene>
</pc-app>

2つのアセットを追加しました:

  • シーンの周りを周回できるようにするカメラコントロールスクリプト
  • 猫のオモチャのスプラットを含む圧縮PLYファイル

カメラの追加​

シーンを見るにはカメラが必要です。これは<pc-entity>および<pc-camera>要素を使用して追加できます。

<pc-app antialias="false" high-resolution="false">
    <pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs" preload></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
    <pc-scene>
        <pc-entity position="0 0 -2.5">
            <pc-camera></pc-camera>
        </pc-entity>
    </pc-scene>
</pc-app>

カメラをZ軸の負の方向に2.5単位配置しました。デフォルトでは、カメラはZ軸の負の方向を見ているため、カメラはスプラットを配置する原点を見ています。

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

次に、<pc-scripts>および<pc-script>要素を使用してカメラコントロールスクリプトを追加し、カメラをインタラクティブにしましょう。

<pc-app antialias="false" high-resolution="false">
    <pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs" preload></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
    <pc-scene>
        <pc-entity position="0 0 -2.5">
            <pc-camera></pc-camera>
            <pc-scripts>
                <pc-script name="cameraControls"></pc-script>
            </pc-scripts>
        </pc-entity>
    </pc-scene>
</pc-app>

カメラコントロールスクリプトを使用すると、次のことができます:

  • マウス左ドラッグ: ターゲットの周りを周回
  • マウス右ドラッグ: カメラをパン
  • マウスホイール: ズームイン/ズームアウト

スプラットの追加​

次に、<pc-splat>要素を使用して、猫のオモチャのスプラットをシーンに追加しましょう。

<pc-app antialias="false" high-resolution="false">
    <pc-asset id="camera-controls" src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs" preload></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.compressed.ply"></pc-asset>
    <pc-scene>
        <pc-entity position="0 0 -2.5">
            <pc-camera></pc-camera>
            <pc-scripts>
                <pc-script name="cameraControls"></pc-script>
            </pc-scripts>
        </pc-entity>
        <pc-entity position="0 -0.7 0" rotation="180 0 0">
            <pc-splat asset="toy"></pc-splat>
        </pc-entity>
    </pc-scene>
</pc-app>

スプラットを原点よりわずかに下（Y軸で-0.7）に配置し、X軸を中心に180度回転させて適切に方向付けました。asset="toy"属性は、先に定義したスプラットアセットを参照しています。

最終結果​

上記のステップを完了すると、周回、パン、ズームができるインタラクティブな3Dの猫のオモチャのスプラットが表示されるはずです！

自分で試してみよう

上記の最終HTMLコードをHTMLファイルにコピーし、ブラウザで開いて、初めてのスプラットアプリが動作するのを見てみましょう！その後、PlayCanvas Engineの全てのパワーを使って、好きなように拡張してください！