Engine API の使用

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

開始点

2つのファイル、HTMLファイルとJavaScriptファイルでプロジェクトをセットアップしましょう。

まず、index.htmlファイルを作成します。

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            body { margin: 0; overflow: hidden; }
        </style>
        <script type="importmap">
        {
            "imports": {
                "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas/+esm"
            }
        }
        </script>
    </head>
    <body>
        <script type="module" src="main.js"></script>
    </body>
</html>

次に、基本的なPlayCanvasアプリケーション設定でmain.jsファイルを作成します。

main.js
import { Application, Asset, AssetListLoader, Entity, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO } from 'playcanvas';

// アプリケーションを作成
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new Application(canvas, {
    graphicsDeviceOptions: {
        antialias: false
    }
});
app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
app.setCanvasResolution(RESOLUTION_AUTO);
app.start();

window.addEventListener('resize', () => app.resizeCanvas());

これは、Applicationクラスを使用して、以下のキャンバスを持つ空の3Dシーンを作成します。

ブラウザウィンドウ全体を埋めます (FILLMODE_FILL_WINDOW)
デバイスのピクセル比率に基づいて解像度を自動的に調整します (RESOLUTION_AUTO)
ウィンドウのサイズ変更時に適切にリサイズされます

まだ何もレンダリングされていませんが、アセットをロードし、カメラとコンテンツを追加する必要があります。

パフォーマンスの最適化

最適なsplatレンダリングパフォーマンスのために、グラフィックデバイスオプションでantialiasを無効にしました。この設定は、Gaussian splatレンダリングにおける主要なボトルネックであるフラグメント処理の負荷を軽減するのに役立ちます。パフォーマンスガイドで詳細をご覧ください。

アセットのロード

splatを表示したり、カメラコントロールを追加したりする前に、アプリが使用するアセットをロードする必要があります。アセットを定義するためにAssetクラスを、それらを効率的にロードするためにAssetListLoaderを使用します。コメントに「ここにコードをステップバイステップで追加します」とあるmain.jsにこのコードを追加します。

// アセットをロード
const assets = [
    new Asset('camera-controls', 'script', {
        url: 'https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs'
    }),
    new Asset('toy', 'gsplat', {
        url: 'https://developer.playcanvas.com/assets/toy-cat.compressed.ply'
    })
];

const loader = new AssetListLoader(assets, app.assets);
await new Promise(resolve => loader.load(resolve));

2つのアセットをロードしています：

シーンの周りを軌道移動できるカメラコントロールスクリプト
おもちゃの猫のsplatを含む圧縮されたPLYファイル

AssetListLoaderはすべてのアセットを効率的にロードし、awaitを使用して、続行する前にそれらが完全にロードされていることを確認します。

カメラの追加

シーンを表示するには、Entityクラスを使用してカメラエンティティを作成し、それにカメラコンポーネントを追加する必要があります。アセットのロード後に、このコードをmain.jsに追加します。

// カメラエンティティを作成
const camera = new Entity('Camera');
camera.addComponent('camera');
camera.setPosition(0, 0, -2.5);
app.root.addChild(camera);

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

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

スクリプトコンポーネントを使用してカメラコントロールスクリプトをアタッチし、カメラをインタラクティブにしましょう。カメラの作成後に、このコードをmain.jsに追加します。

// カメラコントロールを追加
camera.addComponent('script');
camera.script.create('cameraControls');

AssetListLoaderを使用してカメラコントロールスクリプトをすでにロードしているため、直接スクリプトコンポーネントを作成できます。カメラコントロールを使用すると、次のことができます：

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

Splatの追加

gsplatコンポーネントを使用して、おもちゃの猫のsplatをシーンに追加しましょう。カメラコントロールの後、このコードをmain.jsに追加します。

// splatエンティティを作成
const splat = new Entity('Toy Cat');
splat.addComponent('gsplat', { asset: assets[1] });
splat.setPosition(0, -0.7, 0);
splat.setEulerAngles(180, 0, 0);
app.root.addChild(splat);

assets[1]（配列内の2番目のアセット）を使用してsplatアセットを参照します。splatを原点よりわずかに下（Y軸で-0.7）に配置し、X軸周りに180度回転させて適切に配置しました。

完全なコード

上記の手順のすべてのコードを含む完成したファイルは次のとおりです：

index.html:

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            body { margin: 0; overflow: hidden; }
        </style>
        <script type="importmap">
        {
            "imports": {
                "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas/+esm"
            }
        }
        </script>
    </head>
    <body>
        <script type="module" src="main.js"></script>
    </body>
</html>

main.js:

main.js
import { Application, Asset, AssetListLoader, Entity, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO } from 'playcanvas';

// アプリケーションを作成
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new Application(canvas, {
    graphicsDeviceOptions: {
        antialias: false
    }
});
app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
app.setCanvasResolution(RESOLUTION_AUTO);
app.start();

window.addEventListener('resize', () => app.resizeCanvas());

// アセットをロード
const assets = [
    new Asset('camera-controls', 'script', {
        url: 'https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs'
    }),
    new Asset('toy', 'gsplat', {
        url: 'https://developer.playcanvas.com/assets/toy-cat.compressed.ply'
    })
];

const loader = new AssetListLoader(assets, app.assets);
await new Promise(resolve => loader.load(resolve));

// カメラエンティティを作成
const camera = new Entity('Camera');
camera.addComponent('camera');
camera.addComponent('script');
camera.script.create('cameraControls');
camera.setPosition(0, 0, -2.5);
app.root.addChild(camera);

// splatエンティティを作成
const splat = new Entity('Toy Cat');
splat.addComponent('gsplat', { asset: assets[1] });
splat.setPosition(0, -0.7, 0);
splat.setEulerAngles(180, 0, 0);
app.root.addChild(splat);

最終結果

上記の手順を完了すると、軌道移動、パン、ズームができるインタラクティブな3Dおもちゃの猫のsplatが表示されるはずです！

自分で試してみましょう

上記の2つのファイル（index.htmlとmain.js）を同じディレクトリに作成し、ブラウザでindex.htmlを開いて、最初のsplatアプリが動作するのを見てみましょう！その後、PlayCanvas Engineの全機能を使用して、好きなように拡張してください！

開始点​

アセットのロード​

カメラの追加​

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

Splatの追加​

完全なコード​

最終結果​

開始点