Three.jsでCreate.jsの描画結果をテクスチャとして利用する

はじめに

公式ドキュメントにもある通り、Three.jsでテキストを扱う場合、Canvasを利用するという方法があります。今回はその方法を利用して、Create.jsの描画結果をテクスチャとして利用してみます。

Canvasでテクスチャを作成する

Three.jsではcanvasエレメントを引数にしてTextureインスタンスを生成できます。そのTextureインスタンスをマテリアルに適用すれば、動的に書き換えができるテクスチャになります。

const _canvas = document.createElement("canvas");
_canvas.width = w;
_canvas.height = h;

const texture: THREE.Texture = new THREE.Texture(_canvas);
texture.minFilter = THREE.LinearFilter;//Textureの解像度をPow2に整形
const material = new THREE.SpriteMaterial({
    map: texture,
    blending: THREE.NormalBlending,
    depthTest: false,
    transparent: true,
});

例として、上記のコードでCanvasに紐付けしたSpriteマテリアルができます。Spriteマテリアルは常にカメラ方向を向いてくれるので、ビルボードとして使用できます。

オフスクリーンCanvasにCreate.jsのstageを紐付けする

このcanvasエレメントにCreate.jsのstageを紐づけることでCreate.jsの描画機能を利用できるテクスチャとなります。

const _stage = new createjs.Stage(_canvas);

このstageオブジェクトにchildを追加することでさまざまな描画が行えます。

テクスチャの更新

テクスチャの書き換えを行った場合、Three.jsに結果を反映させるためには、stageの更新とマテリアルの更新の2段階が必要になります。

_stage.update();
material.map.needsUpdate = true;

この処理をThree.jsのrender処理の前に行うことでテクスチャが更新されます。

パフォーマンス上の問題とその対処

テクスチャの更新処理は比較的重い処理となります。毎フレーム更新を行うと全体のパフォーマンスに悪影響を与えるため、stageの更新を行った場合はflagなどに記録を行い、フラグが立っているフレームのみ更新を行うのが現実的です。

また、オフスクリーンcanvasも、Create.jsのグローバル設定によってはDOMイベントの探索対象となります。明示的にDOMイベントの対象外であることを設定しておくことで、パフォーマンスへの影響を減らせます。

_stage.enableDOMEvents(false);