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

ランタイムでテクスチャを作成し、動的に描画したい場合は、ブラウザの<canvas>要素で使用する2D描画メソッドのセットであるCanvasRenderingContext2Dを使用すると良いでしょう。

Wonderland Engineでは、TextureManager.create() APIを介してキャンバスからテクスチャを作成できます： this.engine.textures.create(canvas)。

例

以下は、CanvasRenderingContext2DのMDNページの例をWonderland Engineに統合したものです：

import {Component, Property} from '@wonderlandengine/api';

export class MyCanvasTexture extends Component {
    static TypeName = 'my-canvas-texture';
    static Properties = {
        /* エディタでこのマテリアルを設定します。テクスチャはそれを使用するすべてのオブジェクトに適用されます。 */
        material: Property.material()
    };

    start() {
        const canvas = document.createElement('canvas');
        canvas.width = 300;
        canvas.height = 300;

        const ctx = canvas.getContext('2d');
        /* ここで2D描画を行います (これはMDNからの例です) */

        // 白の背景塗り
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 塗り色を黒に戻す
        ctx.fillStyle = '#000';
        // 線の幅を設定
        ctx.lineWidth = 10;

        // 壁
        ctx.strokeRect(75, 140, 150, 110);

        // ドア
        ctx.fillRect(130, 190, 40, 60);

        // 屋根
        ctx.beginPath();
        ctx.moveTo(50, 140);
        ctx.lineTo(150, 60);
        ctx.lineTo(250, 140);
        ctx.closePath();
        ctx.stroke();

        /* TextureManagerを介してキャンバスからテクスチャを作成します */
        this.canvasTexture = this.engine.textures.create(canvas);
        /* マテリアルにテクスチャを適用します（生成されたセッターを使用） */
        this.material.setDiffuseTexture(this.canvasTexture);
    }
}

変更後の更新

初期のテクスチャを作成した後にキャンバスを変更した場合、テクスチャを更新して変更を反映させることを忘れないでください。

上記の例の場合、次のようにします：

this.canvasTexture.update();

パフォーマンスを向上させるために特定の領域のみを更新するには、Texture.updateSubImage() を代わりに使用します：

// 100x60の領域を、ソース(28, 4)からデスティネーション(0, 0)に更新
this.canvasTexture.updateSubImage(28, 4, 100, 60, 0, 0, canvas);