Auto Draft

3
(2)
Created on September 03, 2019, Last modified on June 08, 2021

You may add and use your own reusable texture types by extending lng.Texture:

class MyNoiseTexture extends lng.Texture {

    constructor(stage) {
        super(stage);

        this._w = 100;
        this._h = 100;
    }

    get w() {
        return this._w;
    }

    set w(l) {
        this._w = l;
        this._changed();
    }

    get h() {
        return this._h;
    }

    set h(l) {
        this._h = l;
        this._changed();
    }

    _getLookupId() {
        return '__noise_' + this._w + 'x' + this._h;
    }

    _getSourceLoader() {
        // We need to scope these to protect them from modifications while loading (which may be async).
        const w = this._w;
        const h = this._h;

        const gl = this.stage.gl;
        return function(cb) {
            const noise = new Uint8Array(w * h * 4);
            for (let i = 0; i < w * h * 4; i+=4) {
                const v = Math.round(Math.floor(Math.random() * 256));
                noise[i] = v;
                noise[i+1] = v;
                noise[i+2] = v;
                noise[i+3] = 255;
            }

            cb(null, {source: noise, w: w, h: h});
        }
    }
}

class CustomTextureExample extends lng.Application {
    static _template() {
        return {
            Example: {
                texture: {type: MyNoiseTexture, w: 100, h: 200}
            }
        }
    }
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new CustomTextureExample(options);
document.body.appendChild(app.stage.getCanvas());

Details

Notice that _getLookupId() is not required, but can be used to identify if the same texture was already generated and can be reused, which saves memory and performance when using it from multiple views. _getSourceLoader() is responsible for returning a function that is able to load the texture itself. The source may be an instance of any uploadable type (ImageData, HTMLImageElememnt, HTMLCanvasElement, HTMLVideoElement, ImageBitmap, ArrayBufferView). It is important to call the super method _changed() to make sure that the texture is reloaded when it should.

Give feedback

Rating - 3 / 5. . Reviews - 2

No votes so far! Be the first to rate this post.

Go To Top