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

WebGL ripples based on the clever work of Pim Schreurs

import { ImageLoader } from "./ImageLoader.js";
import { Options } from "./Options.js";
import { Shaders } from "./Shaders.js";
import { StyleCache } from "./StyleCache.js";
import { Textures } from "./Textures.js";
export class WebGL extends Options {
    Shaders;
    Textures;
    quad;
    target;
    canvas;
    GL;
    StyleCache = new StyleCache();
    imageSource = null;
    constructor(target, ...rest) {
        super(...rest);
        this.target = target;
        this.canvas = document.createElement("canvas");
        this.positionCanvas();
        this.GL = this.createGL(this.canvas);
        this.Shaders = new Shaders(this.GL, this.resolution);
        this.Textures = new Textures(this.GL);
    }
    initializeWebGL() {
        this.Textures.initialize(this.resolution);
        this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array([-1, -1, +1, -1, +1, +1, -1, +1]), this.GL.STATIC_DRAW);
        this.Textures.setTransparent();
        void this.loadImage().then(() => {
            this.onInitialized?.();
        });
        this.GL.clearColor(0, 0, 0, 0);
        this.GL.blendFunc(this.GL.SRC_ALPHA, this.GL.ONE_MINUS_SRC_ALPHA);
    }
    hideCSSBackground() {
        const inlineCSS = this.target.style.backgroundImage;
        if (inlineCSS === "none") {
            return;
        }
        this.StyleCache.set("originalInlineCSS", inlineCSS);
        this.StyleCache.set("originalCSSBackgroundImage", window.getComputedStyle(this.target).backgroundImage);
        this.target.style.backgroundImage = "none";
    }
    render() {
        this.GL.bindFramebuffer(this.GL.FRAMEBUFFER, null);
        this.GL.viewport(0, 0, this.canvas.width, this.canvas.height);
        this.GL.enable(this.GL.BLEND);
        this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
        this.GL.useProgram(this.Shaders.renderProgram.id);
        this.bindTexture(this.Textures.backgroundTexture, 0);
        this.bindTexture(this.Textures.firstTexture, 1);
        this.Shaders.render(this.perturbance);
        this.Textures.drawQuad();
        this.GL.disable(this.GL.BLEND);
    }
    update() {
        this.GL.viewport(0, 0, this.resolution, this.resolution);
        this.GL.bindFramebuffer(this.GL.FRAMEBUFFER, this.Textures.writeFrame);
        this.bindTexture(this.Textures.readTexture);
        this.GL.useProgram(this.Shaders.updateProgram.id);
        this.Textures.drawQuad();
        this.Textures.swapBufferIndices();
    }
    isPercentage(str) {
        return str[str.length - 1] == "%";
    }
    bindTexture(texture, unit = 0) {
        this.GL.activeTexture(this.GL.TEXTURE0 + (unit || 0));
        this.GL.bindTexture(this.GL.TEXTURE_2D, texture);
    }
    positionCanvas() {
        this.canvas.width = this.target.offsetWidth;
        this.canvas.height = this.target.offsetHeight;
        this.canvas.style.position = "absolute";
        this.canvas.style.top = "0";
        this.canvas.style.right = "0";
        this.canvas.style.bottom = "0";
        this.canvas.style.left = "0";
        this.canvas.style.zIndex = "-1";
        this.target.appendChild(this.canvas);
    }
    createGL(canvas) {
        return (canvas.getContext("webgl") ||
            canvas.getContext("experimental-webgl"));
    }
    async loadImage() {
        const { backgroundImage } = window.getComputedStyle(this.target);
        const newImageSource = this.imageUrl ||
            this.extractUrl(this.StyleCache.get("originalCSSBackgroundImage")) ||
            this.extractUrl(backgroundImage);
        if (newImageSource == this.imageSource) {
            return;
        }
        this.imageSource = newImageSource;
        if (!this.imageSource) {
            this.Textures.setTransparent();
            return;
        }
        try {
            const loader = new ImageLoader(this.Textures);
            const image = await loader.load(this.imageSource, this.crossOrigin);
            this.StyleCache.set("backgroundWidth", image.width);
            this.StyleCache.set("backgroundHeight", image.height);
            this.hideCSSBackground();
        }
        catch (error) {
            // silence
        }
    }
}