PlayCanvas Engine

PlayCanvas Engineは、ウェブ向けのオープンソース3Dエンジンです。最新のブラウザであれば、デスクトップでもモバイルでもWebGPUまたはWebGL 2でレンダリングでき、Editor、PlayCanvas React、Web Componentsもこのエンジンの上に構築されています。

はじめる →サンプルを見る APIリファレンス

最初のアプリ

これは完全なEngineアプリです。このページ上で実際に動いていて、編集することもできます。入力するとプレビューが再実行されます。

ライブサンプル

import * as pc from 'playcanvas';

// WebGL 2よりWebGPUを優先してグラフィックスデバイスを作成します
const canvas = document.getElementById('application');
const device = await pc.createGraphicsDevice(canvas, {
    deviceTypes: [pc.DEVICETYPE_WEBGPU]
});
device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);

// 使用するコンポーネントシステムを指定してアプリケーションを作成します
const options = new pc.AppOptions();
options.graphicsDevice = device;
options.componentSystems = [
    pc.RenderComponentSystem,
    pc.CameraComponentSystem,
    pc.LightComponentSystem
];

const app = new pc.AppBase(canvas);
app.init(options);
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
window.addEventListener('resize', () => app.resizeCanvas());
app.start();

// シーン全体をやわらかく照らします
app.scene.ambientLight = new pc.Color(0.3, 0.3, 0.35);

// グリッドの中央を見下ろすカメラを作成します
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
    clearColor: new pc.Color(0.12, 0.14, 0.17)
});
camera.setPosition(0, 7, 17);
camera.lookAt(0, 0, 0);
app.root.addChild(camera);

// 影を落とす太陽を作成します
const light = new pc.Entity('light');
light.addComponent('light', {
    castShadows: true,
    shadowDistance: 40,
    shadowBias: 0.2,
    normalOffsetBias: 0.05
});
light.setEulerAngles(45, 30, 0);
app.root.addChild(light);

// 中央のオレンジから端の紫へと色が変わるボックスのグリッドを作成します
const size = 10;
const orange = new pc.Color(1, 0.4, 0.1);
const purple = new pc.Color(0.4, 0.2, 1);
const boxes = [];
for (let x = -size; x <= size; x++) {
    for (let z = -size; z <= size; z++) {
        const material = new pc.StandardMaterial();
        material.diffuse.lerp(orange, purple, Math.hypot(x, z) / (size * 1.5));
        material.update();

        const box = new pc.Entity();
        box.addComponent('render', { type: 'box', material: material });
        box.setPosition(x, 0, z);
        app.root.addChild(box);
        boxes.push(box);
    }
}

// 毎フレーム、ボックスの高さを中央から外側へ波打たせます
let time = 0;
app.on('update', (dt) => {
    time += dt;
    for (const box of boxes) {
        const { x, z } = box.getPosition();
        const height = 2.2 + 2 * Math.sin(time * 3 - Math.hypot(x, z) * 0.5);
        box.setLocalScale(0.9, height, 0.9);
    }
});

最初の数行は、どのEngineアプリでも同じです。createGraphicsDeviceはWebGPUを要求し、ブラウザが対応していない場合はWebGL 2にフォールバックします。AppBaseはアプリケーション本体で、フレームループを実行しますが、動かすのは登録したコンポーネントシステムだけなので、バンドラーはそれ以外をビルドから除外できます。シーン内のすべてはapp.rootの下の階層に置かれたエンティティで、コンポーネントが各エンティティに能力を与えます。ここでは、カメラ、影を落とす太陽、そしてそれぞれ専用のマテリアルで描画される441個のボックスです。updateイベントは毎フレーム、前のフレームからの経過時間をコードに渡し、コードはそれを使ってボックスを波打たせます。次のような変更を試してみてください。

time * 3の3を大きくして波を速くする。0.5を大きくすると、波の輪の間隔が狭まります。
orangeとpurpleを好きな2色に変える。
sizeを20に変えてグリッドを広げる。ボックスは1,681個になります。
type: 'cylinder'でボックスを円柱に変える。

このようなアプリを自分のマシンで作るには、npm create playcanvas@latestを実行してEngine形式を選ぶか、Engineをスタンドアロンで使用するの手順に従ってプロジェクトを手動でセットアップしてください。

作れるもの

Engineのアプリはブラウザで動くため、作ったものはどんなデバイスからでも、リンクひとつで誰にでも届けられます。開発者がこのエンジンで作っているものの一例を紹介します。

ゲーム

インストール不要で、リンクからすぐに遊べるブラウザゲームやモバイルゲーム。この攻城ゲームは、すべてエンジンで作られています。

プロダクトコンフィギュレーター

製品のスタイルを、購入者がリアルタイムで変更できます。このシューズは、3D空間に描画されたHTMLパネルから、glTFのマテリアルバリアントを切り替えます。

Gaussian Splatアプリ

写実的なキャプチャをもとにしたビューアー、ツアー、ゲーム。このスケートパークは、移動に合わせて詳細度（LOD）ごとにストリーミングされます。

XRアプリ

WebXRでリンクから直接開けるVRとAR。ヘッドセットでもスマートフォンでも動作し、コントローラーとハンドトラッキングに対応します。

プレイアブル広告

カタパルトのようなゲームをインタラクティブな広告としてパッケージ化し、EditorからFacebookやSnapchat向けに書き出せます。

教育

インタラクティブな教材や解説。スクロールで太陽系を巡るこのツアーは、Web Componentsで作られた1つのHTMLページです。

サンプルブラウザには、ボリュメトリックフォグやダイナミックスカイから、数千人のキャラクターがアニメーションする群衆まで、編集できるソースコード付きのライブサンプルが250以上あります。

モデル: ElinによるTropical Island（ページ上部のデモ）、AlexJJによるCatapult、DazによるLow Poly Lumberjack、ShopifyによるMaterials Variants Shoe（いずれもCC BY 4.0）。スケートパークのスプラットはChristoph Schindelarによるものです。