Создание текстуры с Canvas2D

Если вам нужно создавать текстуры во время выполнения, чтобы динамически рисовать на них, вы можете воспользоваться CanvasRenderingContext2D, набором методов рисования 2D в браузерах для элемента <canvas>.

В Wonderland Engine создайте текстуру из canvas с помощью API TextureManager.create(): this.engine.textures.create(canvas).

Пример

Ниже представлен пример с страницы MDN по CanvasRenderingContext2D, интегрированный в 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();

        /* Создайте текстуру из canvas через TextureManager */
        this.canvasTexture = this.engine.textures.create(canvas);
        /* Примените текстуру к материалу (используйте сгенерированный сеттер) */
        this.material.setDiffuseTexture(this.canvasTexture);
    }
}

Обновление после изменений

После внесения изменений в canvas после создания первоначальной текстуры, убедитесь, что обновили текстуру, чтобы отразить изменения.

Для приведенного выше примера, выполните:

this.canvasTexture.update();

Чтобы обновить только подрегион для улучшения производительности, используйте Texture.updateSubImage() вместо этого:

// Обновление региона размером 100x60 в месте назначения (0, 0) из источника (28, 4)
this.canvasTexture.updateSubImage(28, 4, 100, 60, 0, 0, canvas);