既存スタックを活かす！ソフトウェアエンジニアが知るべきPlayCanvas Engineの魅力と実践

playcanvas/engine

PlayCanvas Engineは、一言で言えば「ウェブベースのパワフルなグラフィックスランタイム」です。WebGL、WebGPU、WebXRといった最新のウェブ技術を駆使して、ブラウザ上で高性能な3Dコンテンツやゲームを実現するための心臓部となるライブラリです。

なぜ私たちがこれに注目すべきなのか？それは、単なるゲーム開発ツール以上の可能性を秘めているからです。

つまり、既存のウェブ技術スタックを活かしつつ、リッチでインタラクティブな3D体験をユーザーに提供できる、まさに「ウェブのフロンティア」を開拓するための最高のツールなんです！

PlayCanvas Engineをプロジェクトに組み込む方法はいくつかありますが、Node.js環境での開発を考えると、npmを使った導入が最も一般的でエンジニアフレンドリーです。

まずは新しいプロジェクトフォルダを作成し、初期化します。

mkdir playcanvas-adventure
cd playcanvas-adventure
npm init -y

@playcanvas/engineパッケージをインストールします。

npm install @playcanvas/engine

PlayCanvas Engine自体はESモジュールとして提供されています。モダンな開発では、WebpackやRollupなどのバンドラーを使って、依存関係を解決し、ブラウザで実行できる単一のJavaScriptファイルにコンパイルするのが一般的です。

この例では、ビルドステップの具体的な設定は省略しますが、最終的にバンドルされたファイルをHTMLファイルで読み込むことになります。

// index.js (または app.js) に PlayCanvas のコードを記述
// ↓
// バンドラーで bundle.js に変換
// ↓
// index.html で <script src="bundle.js"></script> として読み込む

それでは、実際にPlayCanvas Engineを使って、ブラウザのキャンバスに立方体を表示する、最小限の3Dシーンを構築してみましょう。

ファイル
index.js

import { Application, Entity, StandardMaterial, createBox, SceneSettings, Color } from '@playcanvas/engine';

// 1. アプリケーションの初期化
// ブラウザのDOMにキャンバス要素を追加し、PlayCanvasのメインループを開始します。
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new Application(canvas, {
    // オプションがあればここに
});

// キャンバスのサイズをウィンドウに合わせる
app.on('resize', () => app.resizeCanvas(window.innerWidth, window.innerHeight));
window.addEventListener('resize', () => app.fire('resize'));
app.fire('resize');


// 2. シーンの設定
// 背景色を青空のような色に設定
app.scene.ambientLight = new Color(0.2, 0.2, 0.2); // 環境光を設定


// 3. エンティティ (物体) の作成

// A. カメラ (視点) の作成
const camera = new Entity('camera');
camera.addComponent('camera', {
    clearColor: new Color(0.1, 0.1, 0.1) // 背景色
});
// 立方体が見える位置に移動
camera.translate(0, 0, 5); 
app.root.addChild(camera);

// B. ライト (光源) の作成
const light = new Entity('light');
light.addComponent('light', {
    type: 'directional', // 平行光源
    color: new Color(1, 1, 1),
    intensity: 1.0
});
// 斜め上から照らすように回転
light.setEulerAngles(45, 30, 0); 
app.root.addChild(light);

// C. 立方体 (主役) の作成
const box = createBox(app.graphicsDevice); // ジオメトリデータを作成
const material = new StandardMaterial();
material.diffuse = new Color(1.0, 0.5, 0.5); // 赤っぽい色を設定
material.update(); // マテリアルを更新

const cube = new Entity('cube');
cube.addComponent('render', {
    meshInstances: [
        new pc.MeshInstance(box, material)
    ]
});
cube.setLocalScale(1, 1, 1); // サイズを設定
app.root.addChild(cube);


// 4. メインループ (アニメーション)
// 毎フレーム実行される更新関数を定義します。
app.on('update', (deltaTime) => {
    // deltaTimeは前回のフレームからの経過時間（秒）
    // 毎秒30度でY軸を中心に回転させる
    cube.rotate(0, 30 * deltaTime, 0); 
});

// 5. アプリケーションの開始
app.start();

Application
PlayCanvas Engineの中心となるクラスで、描画コンテキストの管理、メインループ（updateイベント）の発火、イベントシステムの提供を行います。

Entity
シーン内のすべてのオブジェクト（カメラ、ライト、モデルなど）を表すノードです。位置、回転、スケールを持ちます。

addComponent('camera', ...)
エンティティに特定の機能（コンポーネント）を追加します。この場合、エンティティが「カメラ」として振る舞うようになります。

createBox / StandardMaterial
3Dの形状データ（メッシュ）と、その見た目を定義するマテリアルを作成しています。

app.on('update', ...)
ここがゲーム/アプリのロジックを記述する場所です。deltaTimeを使ってフレームレートに依存しない動きを実現しています。

このシンプルなコードで、ブラウザ上をさまよう、自転する赤い立方体が誕生します。あとは、あなたの創造力とJavaScriptの力で、このフロンティアをさらに広げていくだけです！楽しんで探検してくださいね！