PlayCanvas のシンプルな Hello World のサンプルを p5.js Web Editor上で動かしてみる #JavaScript

この記事の内容は、タイトルのとおり、p5.js Web Editor上で PlayCanvas のシンプルな Hello World のサンプルを動かしてみた話です。

余談

余談ですが、他に PixiJS・three.js と、p5.js とを組み合わせるというのを試してみたことがあります。

PlayCanvas のシンプルな Hello World のサンプル

今回のメインとなる、PlayCanvas のシンプルな Hello World のサンプルについて、まずは記載します。具体的には、以下に掲載されたサンプルです。

●engine/README-ja.md at main · playcanvas/engine · GitHub
　https://github.com/playcanvas/engine/blob/main/README-ja.md

具体的には、以下の内容です。また、この内容は「The Hello World of 3D」というタイトルの CodePen のページにアクセスすれば、簡単に動作を確認することもできます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
</head>
<body>
    <canvas id='application'></canvas>
    <script>
        // create a PlayCanvas application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas);
        // fill the available space at full resolution
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);
        // ensure canvas is resized when window changes size
        window.addEventListener('resize', () => app.resizeCanvas());
        // create box entity
        const box = new pc.Entity('cube');
        box.addComponent('model', {
            type: 'box'
        });
        app.root.addChild(box);
        // create camera entity
        const camera = new pc.Entity('camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });
        app.root.addChild(camera);
        camera.setPosition(0, 0, 3);
        // create directional light entity
        const light = new pc.Entity('light');
        light.addComponent('light');
        app.root.addChild(light);
        light.setEulerAngles(45, 0, 0);
        // rotate the box according to the delta time since the last frame
        app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));
        app.start();
    </script>
</body>
</html>

これを p5.js Web Editor で動かしていきます。

p5.js Web Editor でとりあえず動作させる

上記のサンプルを p5.js Web　Editor で動かす際に、HTML・JavaScript（index.html と sketch.js）を書きかえます。

HTML

p5.js Web Editor のデフォルトの HTML に関して、変更した部分は以下の 2つです。

CDN からのライブラリの読み込みの実行
PlayCanvas用のキャンバス要素の追加

具体的には、以下のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <main><canvas id="application"></canvas></main>
    <script src="sketch.js"></script>
  </body>
</html>

JavaScript

p5.js Web Editor でデフォルトで用意される JavaScript に関して、変更した主な内容は以下のとおりです。

上記の PlayCanvas のサンプルのほとんどを、setup() の中に記載
オブジェクトを回転させる処理を draw() の中に記載

let box;

function setup() {
  createCanvas(20, 20);

  const canvas = document.getElementById("application");
  const app = new pc.Application(canvas);

  app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
  app.setCanvasResolution(pc.RESOLUTION_AUTO);

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

  box = new pc.Entity("cube");
  box.addComponent("model", {
    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),
  });
  app.root.addChild(camera);
  camera.setPosition(0, 0, 3);

  const light = new pc.Entity("light");
  light.addComponent("light");
  app.root.addChild(light);
  light.setEulerAngles(45, 0, 0);

  app.start();
}

function draw() {
  background(220);

  box.rotate(0.5, 1, 1.5);
}

ここまでは、p5.js のキャンバスは利用せず、PlayCanvas用に用意したキャンバス上での描画を行っています。これを、p5.js のキャンバスに描画する形に変更していきます。

p5.js のキャンバス上で描画させる

PlayCanvas の描画結果を、p5.js のキャンバス上で描画させてみます。

HTML はそのままで、JavaScript に少し変更を加えます。

let canvasPS;
let box;

function setup() {
  createCanvas(windowWidth, windowHeight);

  canvasPS = document.getElementById("application");
  canvasPS.style.visibility = "hidden";
  canvasPS.style.position = "absolute";

  const app = new pc.Application(canvasPS);

  app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
  app.setCanvasResolution(pc.RESOLUTION_AUTO);

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

  box = new pc.Entity("cube");
  box.addComponent("model", {
    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),
  });
  app.root.addChild(camera);
  camera.setPosition(0, 0, 3);

  const light = new pc.Entity("light");
  light.addComponent("light");
  app.root.addChild(light);
  light.setEulerAngles(45, 0, 0);

  app.start();
}

function draw() {
  background(220);
  drawingContext.drawImage(canvasPS, 0, 0, width, height);

  box.rotate(0.5, 1, 1.5);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

上記で行った主な対応は以下の通りです。

p5.js のキャンバスのサイズを、PlayCanvas のキャンバスと同様に画面いっぱいになるように変更（リサイズ時のサイズ変更も追加）
PlayCanvas のキャンバスを不可視に
PlayCanvas のキャンバスの描画内容を、 drawingContext.drawImage() で p5.js のキャンバスに描画

実行結果

実行結果は、このようになりました。