PlayCanvasでブラウザ3Dゲームを作ってみた話

はじめに

ブラウザで3Dゲームが動く時代になったなと、しみじみ感じています。

PlayCanvasはGitHubで14,100スター以上を獲得しているオープンソースのWebGLゲームエンジンです。直近1ヶ月で2,500以上のスターが追加されているので、今まさに注目度が上がっている状況ですね。

正直なところ、最初は「ブラウザで3Dゲームって、パフォーマンス大丈夫なの？」と懐疑的だったんですよ。でも実際に触ってみると、iPhoneでもChromebookでも60FPS出るレベルで動く。30代になって思うのは、技術の進歩を舐めてはいけないということ。

PlayCanvasとは

PlayCanvasは、HTML5とWebGLを使用してモバイルおよびデスクトップブラウザでゲームやインタラクティブな3Dコンテンツを実行するオープンソースのゲームエンジンです。

「Powerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF」がキャッチコピーで、最新のWeb技術をフル活用した高性能なグラフィックスランタイムを提供しています。

MITライセンスで公開されており、商用利用も自由。さらにブラウザベースのエディタも提供されていて、チーム開発にも対応しているのが特徴です。

特徴・メリット

1. WebGL2とWebGPU両対応

これ、意外と重要なんですけど、PlayCanvasはWebGL2だけでなく、次世代APIのWebGPUにも対応しています。将来的な技術移行を考えると、この両対応は安心感があります。

コスパ的に、この先を見据えた技術選定ができるのは大きい。

2. glTF 2.0完全サポート

3Dモデルの標準フォーマットであるglTF 2.0に完全対応。DracoメッシュやBasis圧縮にも対応しているので、アセットの読み込みが速い。

個人的には、この「ロード時間の短さ」がユーザー体験に直結すると思っています。

3. 物理エンジン統合済み

ammo.jsという物理エンジンが統合されているので、3D剛体物理をすぐに使えます。衝突判定とか自前で実装するのは地獄なので、これは助かる。

4. マルチデバイス入力対応

マウス、キーボード、タッチ、ゲームパッド、VRコントローラーまで対応。モバイルからVRまでカバーできるのはQOL上がります。

5. ブラウザエディタがある

ローカル環境構築なしで、ブラウザから直接開発できるエディタが提供されています。リアルタイムプレビューもできるし、チームでの共同編集も可能。

これ、意外と便利で、ちょっとした修正ならエディタから直接できる。

6. TypeScript対応

TypeScriptでスクリプティングできるので、型安全な開発が可能。大規模なプロジェクトでも安心して開発できます。

インストール方法

npmからインストール

npm install playcanvas

これだけで基本的なエンジンは使えます。

CDNから読み込む

簡単なプロトタイプなら、CDNから直接読み込む方法もあります。

<script src="https://cdn.playcanvas.com/playcanvas-stable.min.js"></script>

開発環境のセットアップ

ソースからビルドする場合は以下の手順。

# リポジトリをクローン
git clone https://github.com/playcanvas/engine.git
cd engine

# 依存関係のインストール（Node.js 18以上が必要）
npm install

# ビルド
npm run build

基本的な使い方

最小構成のサンプル

回転するキューブを表示する基本的なコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Basic Example</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <canvas id="application"></canvas>
    <script src="https://cdn.playcanvas.com/playcanvas-stable.min.js"></script>
    <script>
        // キャンバスとアプリケーションの初期化
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas);
        app.start();

        // キャンバスをウィンドウサイズに合わせる
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        // ボックス（キューブ）エンティティを作成
        const box = new pc.Entity('cube');
        box.addComponent('render', {
            type: 'box'
        });
        app.root.addChild(box);

        // カメラエンティティを作成
        const camera = new pc.Entity('camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });
        camera.setPosition(0, 0, 3);
        app.root.addChild(camera);

        // ライトエンティティを作成
        const light = new pc.Entity('light');
        light.addComponent('light');
        light.setEulerAngles(45, 0, 0);
        app.root.addChild(light);

        // 毎フレーム実行される更新処理
        app.on('update', function (dt) {
            box.rotate(10 * dt, 20 * dt, 30 * dt);
        });
    </script>
</body>
</html>

正直、この短さでブラウザに3Dキューブが回転表示できるのは驚き。

TypeScriptでの記述

TypeScriptでスクリプトコンポーネントを書く場合の例。

import * as pc from 'playcanvas';

// スクリプトコンポーネントの定義
class Rotator extends pc.ScriptType {
    speed: pc.Vec3 = new pc.Vec3(10, 20, 30);

    update(dt: number) {
        this.entity.rotate(
            this.speed.x * dt,
            this.speed.y * dt,
            this.speed.z * dt
        );
    }
}

// スクリプトの登録
pc.registerScript(Rotator, 'rotator');

マテリアルの設定

見た目をカスタマイズするマテリアルの設定例。

// スタンダードマテリアルを作成
const material = new pc.StandardMaterial();
material.diffuse = new pc.Color(1, 0.3, 0.3);  // 赤っぽい色
material.metalness = 0.7;
material.gloss = 0.5;
material.update();

// エンティティにマテリアルを適用
box.render.meshInstances[0].material = material;

3Dモデルの読み込み

glTFモデルを読み込む例。

// アセットの読み込み
app.assets.loadFromUrl('model.glb', 'container', function (err, asset) {
    if (err) {
        console.error(err);
        return;
    }

    // モデルエンティティを作成
    const entity = new pc.Entity();
    entity.addComponent('render', {
        type: 'asset',
        asset: asset.resource.renders[0]
    });
    app.root.addChild(entity);
});

実践的なユースケース

ブラウザゲーム開発

PlayCanvasの本領発揮はやはりゲーム開発。Robostormというマルチプレイヤーのロボットバトルゲームが有名な事例です。

高速ロードと60FPSのパフォーマンスが出るので、ストレスのないゲーム体験を提供できます。

製品コンフィギュレーター

自動車メーカーのポラリスが、業界初のリアルタイム3D車両コンフィギュレーターをPlayCanvasで構築した事例があります。

ECサイトで商品を3Dで見せたい、カスタマイズさせたい、という需要にはぴったり。

建築ビジュアライゼーション

建築パースをブラウザで表示して、クライアントに見せる用途。インストール不要でURLを送るだけで見てもらえるのは営業的にも強い。

AR/VR体験

WebXRに対応しているので、ブラウザからVRヘッドセットを使った体験も構築できます。専用アプリのインストールが不要なのが大きなメリット。

インタラクティブ広告

通常のバナー広告とは違う、3Dで動くインタラクティブな広告。ユーザーの注目を集めやすい。

カジノゲーム

オンラインカジノのスロットやテーブルゲームなど。リッチな演出が求められる分野でも使われています。

オンラインエディタの活用

PlayCanvasの特徴的な機能として、ブラウザベースのエディタがあります。

https://playcanvas.com/

ここからアカウントを作成すると、以下のことができます。

シーンエディタ: ドラッグ&ドロップで3Dシーンを構築
アセット管理: モデル、テクスチャ、スクリプトの管理
リアルタイムプレビュー: 変更が即座に反映される
チーム開発: 複数人で同時編集可能
バージョン管理: ビルドの履歴管理
ワンクリックデプロイ: 公開用URLを即座に発行

個人的には、プロトタイピングの速さが気に入っています。アイデアを形にするまでの時間が圧倒的に短い。

パフォーマンス最適化のポイント

PlayCanvasで本番レベルのパフォーマンスを出すためのポイント。

1. アセットの最適化

// Draco圧縮されたglTFを使用
// ファイルサイズが大幅に削減される

// Basis圧縮テクスチャを使用
// GPUメモリの使用量を削減

2. バッチング

// 同じマテリアルを使うオブジェクトはバッチングで描画コール削減
entity.render.batchGroupId = batchGroup.id;

3. LOD（Level of Detail）

距離に応じてモデルの詳細度を切り替える。遠くのオブジェクトは低ポリゴンで表示。

4. カリング

画面外のオブジェクトは描画しない。PlayCanvasは自動でフラスタムカリングを行います。

Unityとの比較

ゲーム開発といえばUnityを思い浮かべる人も多いと思います。

項目	PlayCanvas	Unity
配布方法	URLを共有するだけ	インストールが必要
ファイルサイズ	軽量（数MB〜）	比較的大きい
対応プラットフォーム	ブラウザ全般	ネイティブ中心
学習コスト	JavaScript/TS経験者なら低い	C#の学習が必要
パフォーマンス	Web向けに最適化	ネイティブの方が上