drags-and-nerds/v1-com-officielle/glitcher/lib/glitcher.js

import resizeToFit from 'intrinsic-scale';
import baseVertSource from "./base.vert?raw"
import baseFragSource from "./base.frag?raw"

export class Glitcher {

    /** @type {HTMLCanvasElement} */
    canvas

    /**
     * @param {HTMLCanvasElement} canvas
     */
    constructor(canvas) {
        this.canvas = canvas
        this.init()
    }

    init(){
        this.ctx = this.canvas.getContext("webgl")
        if(!this.ctx){
            throw new Error("WebGL isn't supported")
        }

        let baseVertShader = this.ctx.createShader(this.ctx.VERTEX_SHADER)
        this.ctx.shaderSource(baseVertShader, baseVertSource)
        this.ctx.compileShader(baseVertShader)

        if (!this.ctx.getShaderParameter(baseVertShader, this.ctx.COMPILE_STATUS)) {
            throw new Error(`failed to compile base.vert: ${this.ctx.getShaderInfoLog(baseVertShader)}`)
        }

        let baseFragShader = this.ctx.createShader(this.ctx.FRAGMENT_SHADER)
        this.ctx.shaderSource(baseFragShader, baseFragSource)
        this.ctx.compileShader(baseFragShader)

        if (!this.ctx.getShaderParameter(baseFragShader, this.ctx.COMPILE_STATUS)) {
            throw new Error(`failed to compile base.frag: ${this.ctx.getShaderInfoLog(baseFragShader)}`)
        }

        let baseShaderProgram = this.ctx.createProgram()
        this.ctx.attachShader(baseShaderProgram, baseVertShader)
        this.ctx.attachShader(baseShaderProgram, baseFragShader)
        this.ctx.linkProgram(baseShaderProgram)

        if (!this.ctx.getProgramParameter(baseShaderProgram, this.ctx.LINK_STATUS)) {
            throw new Error(`failed to link base shaders: ${this.ctx.getProgramInfoLog(baseShaderProgram)}`)
        }

        this.baseProgram = baseShaderProgram;
        this.aVertexPosition = this.ctx.getAttribLocation(baseShaderProgram, "aVertexPosition")
        this.aTextureCoord = this.ctx.getAttribLocation(baseShaderProgram, "aTextureCoord")
        this.uImageSampler = this.ctx.getUniformLocation(baseShaderProgram, "uImageSampler")

        let panelPositionBuffer = this.ctx.createBuffer()
        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelPositionBuffer)
        const positions = [
              -1.0,  1.0,
               1.0,  1.0,
              -1.0, -1.0,
               1.0, -1.0,
        ]
        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(positions), this.ctx.STATIC_DRAW)
        this.panelPositionsBuffer = panelPositionBuffer

        let panelUVBuffer = this.ctx.createBuffer()
        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelUVBuffer)
        const uv = [
              0.0, 0.0,
              1.0, 0.0,
              0.0, 1.0,
              1.0, 1.0,
        ]
        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(uv), this.ctx.STATIC_DRAW)
        this.panelUVBuffer = panelUVBuffer

        let imageTexture = this.ctx.createTexture()
        this.imageTexture = imageTexture;
        this.clearImage();
    }

    clearImage(){
        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
        this.ctx.texImage2D(
            this.ctx.TEXTURE_2D,
            0,
            this.ctx.RGBA,
            1, 1,
            0,
            this.ctx.RGBA,
            this.ctx.UNSIGNED_BYTE,
            new Uint8Array([0, 0, 0, 0])
        )
    }

    /**
     * @param {File} imageFile 
     */
    async setImage(imageFile){
        if(imageFile == this.currentImageFile){
            return
        }

        if(this.currentImage){
            URL.revokeObjectURL(this.currentImage.src)
        }

        let image = new Image()
        const loadProm = new Promise((res, rej) => {
            function ok(){
                image.removeEventListener("error", nok)
                res()
            }

            function nok(){
                image.removeEventListener("load", ok)
                rej()
            }

            image.addEventListener("load", ok)
            image.addEventListener("error", nok)
        })
        image.src = URL.createObjectURL(imageFile)

        try {
            await loadProm
        } catch(e) {
            URL.revokeObjectURL(image.src)
            throw e
        }
        this.resize(image.width, image.height)

        this.currentImageFile = imageFile
        this.currentImage = image

        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
        this.ctx.texImage2D(
            this.ctx.TEXTURE_2D,
            0,
            this.ctx.RGBA,
            this.ctx.RGBA,
            this.ctx.UNSIGNED_BYTE,
            this.currentImage
        )

        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
    }

    resize(width, height){
        let computedStyle = window.getComputedStyle(this.canvas)
        let maxWidth = parseFloat(computedStyle["max-width"])
        let maxHeight = parseFloat(computedStyle["max-height"])
        
        if(window.devicePixelRatio){
            maxWidth *= window.devicePixelRatio
            maxHeight *= window.devicePixelRatio
        }

        if(Number.isNaN(maxWidth)){
            maxWidth = width
        }

        if(Number.isNaN(maxHeight)){
            maxHeight = height
        }

        let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})

        this.canvas.width = resize.width
        this.canvas.height = resize.height
        this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
    }

    render(){
        if(!this.ctx){
            throw new Error("Glitcher not initialized, please run init()")
        }

        this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
        this.ctx.clearDepth(1.0)
        this.ctx.enable(this.ctx.DEPTH_TEST)
        this.ctx.enable(this.ctx.LEQUAL)

        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT)

        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelPositionsBuffer)
        this.ctx.vertexAttribPointer(
            this.aVertexPosition,
            2, // N components per iteration
            this.ctx.FLOAT,
            false, //Normalize,
            0, // (stride) how many bytes to get from one set of values to the next
            0, // Start offset
        )
        this.ctx.enableVertexAttribArray(this.aVertexPosition)
        
        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelUVBuffer)
        this.ctx.vertexAttribPointer(
            this.aTextureCoord,
            2,
            this.ctx.FLOAT,
            false,
            0,
            0,
        )
        this.ctx.enableVertexAttribArray(this.aTextureCoord)

        this.ctx.activeTexture(this.ctx.TEXTURE0)
        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
        this.ctx.uniform1i(this.uImageSampler, 0)

        this.ctx.useProgram(this.baseProgram)
        
        this.ctx.drawArrays(
            this.ctx.TRIANGLE_STRIP,
            0, // Vertex offset
            4, // Total vertex
        );
    }
}