@figliolia/ripples/dist/mjs/ImageLoader.js

WebGL ripples based on the clever work of Pim Schreurs

export class ImageLoader {
    Textures;
    GL;
    constructor(Textures) {
        this.Textures = Textures;
        this.GL = this.Textures.GL;
    }
    load(src, crossOrigin) {
        const image = new Image();
        return new Promise((resolve, reject) => {
            image.onload = () => {
                this.textureIze(image);
                resolve(image);
            };
            image.onerror = () => {
                this.Textures.setTransparent();
                reject();
            };
            image.crossOrigin = this.isDataUri(src) ? null : crossOrigin;
            image.src = src;
        });
    }
    textureIze(image) {
        const wrapping = this.isPowerOfTwo(image.width) && this.isPowerOfTwo(image.height)
            ? this.GL.REPEAT
            : this.GL.CLAMP_TO_EDGE;
        this.GL.bindTexture(this.GL.TEXTURE_2D, this.Textures.backgroundTexture);
        this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_WRAP_S, wrapping);
        this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_WRAP_T, wrapping);
        this.GL.texImage2D(this.GL.TEXTURE_2D, 0, this.GL.RGBA, this.GL.RGBA, this.GL.UNSIGNED_BYTE, image);
    }
    isDataUri(url) {
        return url.match(/^data:/);
    }
    isPowerOfTwo(x) {
        return (x & (x - 1)) == 0;
    }
}