From Elevation Models to Shader Dreams: PostGIS + WebGL Glitch Art¶

// main.js
class PostGISWebGLArt {
    constructor() {
        this.canvas = document.getElementById('glitch');
        this.gl = this.canvas.getContext('webgl2') || this.canvas.getContext('webgl');
        this.program = null;
        this.texture = null;
        this.animationId = null;
        this.time = 0;
        this.glitchEnabled = true;
        this.shaderIndex = 0;

        this.init();
    }

    init() {
        if (!this.gl) {
            console.error('WebGL not supported');
            return;
        }

        this.setupShaders();
        this.setupGeometry();
        this.render();
    }

    setupShaders() {
        const vertexShaderSource = `
            attribute vec2 a_position;
            attribute vec2 a_texCoord;
            varying vec2 v_texCoord;

            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
                v_texCoord = a_texCoord;
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform sampler2D u_image;
            uniform float u_time;
            uniform bool u_glitch;
            varying vec2 v_texCoord;

            void main() {
                vec2 coord = v_texCoord;

                if (u_glitch) {
                    // Glitch effect
                    float glitch = sin(50.0 * v_texCoord.y + u_time * 5.0) * 0.1;
                    coord.x += glitch;

                    // Color shift
                    float shift = sin(u_time * 3.0) * 0.1;
                    coord.y += shift;
                }

                vec4 color = texture2D(u_image, coord);

                // Apply color effects
                color.r += sin(u_time * 2.0) * 0.1;
                color.g += cos(u_time * 1.5) * 0.1;
                color.b += sin(u_time * 3.0) * 0.1;

                gl_FragColor = color;
            }
        `;

        const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexShaderSource);
        const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);

        this.program = this.createProgram(vertexShader, fragmentShader);
        this.gl.useProgram(this.program);
    }

    createShader(type, source) {
        const shader = this.gl.createShader(type);
        this.gl.shaderSource(shader, source);
        this.gl.compileShader(shader);

        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
            console.error('Shader compilation error:', this.gl.getShaderInfoLog(shader));
            this.gl.deleteShader(shader);
            return null;
        }

        return shader;
    }

    createProgram(vertexShader, fragmentShader) {
        const program = this.gl.createProgram();
        this.gl.attachShader(program, vertexShader);
        this.gl.attachShader(program, fragmentShader);
        this.gl.linkProgram(program);

        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
            console.error('Program linking error:', this.gl.getProgramInfoLog(program));
            this.gl.deleteProgram(program);
            return null;
        }

        return program;
    }

    setupGeometry() {
        // Create quad covering entire canvas
        const positions = new Float32Array([
            -1, -1,
             1, -1,
            -1,  1,
             1,  1
        ]);

        const texCoords = new Float32Array([
            0, 0,
            1, 0,
            0, 1,
            1, 1
        ]);

        // Position buffer
        const positionBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);

        const positionLocation = this.gl.getAttribLocation(this.program, 'a_position');
        this.gl.enableVertexAttribArray(positionLocation);
        this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 0, 0);

        // Texture coordinate buffer
        const texCoordBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, texCoordBuffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, texCoords, this.gl.STATIC_DRAW);

        const texCoordLocation = this.gl.getAttribLocation(this.program, 'a_texCoord');
        this.gl.enableVertexAttribArray(texCoordLocation);
        this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, false, 0, 0);
    }

    async loadTexture(url) {
        try {
            const response = await fetch(url);
            const blob = await response.blob();
            const imageBitmap = await createImageBitmap(blob);

            const texture = this.gl.createTexture();
            this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, imageBitmap);
            this.gl.generateMipmap(this.gl.TEXTURE_2D);

            this.texture = texture;
            console.log('Texture loaded successfully');

        } catch (error) {
            console.error('Error loading texture:', error);
        }
    }

    render() {
        this.time += 0.016; // ~60 FPS

        this.gl.clear(this.gl.COLOR_BUFFER_BIT);

        if (this.texture) {
            this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);

            // Set uniforms
            const timeLocation = this.gl.getUniformLocation(this.program, 'u_time');
            this.gl.uniform1f(timeLocation, this.time);

            const glitchLocation = this.gl.getUniformLocation(this.program, 'u_glitch');
            this.gl.uniform1i(glitchLocation, this.glitchEnabled);

            // Draw quad
            this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
        }

        this.animationId = requestAnimationFrame(() => this.render());
    }

    toggleGlitch() {
        this.glitchEnabled = !this.glitchEnabled;
        console.log('Glitch enabled:', this.glitchEnabled);
    }

    changeShader() {
        this.shaderIndex = (this.shaderIndex + 1) % 3;
        console.log('Shader index:', this.shaderIndex);
        // Implement different shader variations
    }
}

// Initialize the art application
const art = new PostGISWebGLArt();

// Global functions for controls
window.loadRaster = (rid) => {
    art.loadTexture(`/tile/${rid}/png`);
};

window.toggleGlitch = () => {
    art.toggleGlitch();
};

window.changeShader = () => {
    art.changeShader();
};

// Animated landscape controller
class AnimatedLandscape {
    constructor(gl, program) {
        this.gl = gl;
        this.program = program;
        this.time = 0;
        this.animationSpeed = 1.0;
        this.breathingEnabled = true;
    }

    update() {
        this.time += 0.016 * this.animationSpeed;

        // Update time uniform
        const timeLocation = this.gl.getUniformLocation(this.program, 'u_time');
        this.gl.uniform1f(timeLocation, this.time);

        // Update breathing effect
        if (this.breathingEnabled) {
            const breathingLocation = this.gl.getUniformLocation(this.program, 'u_breathing');
            this.gl.uniform1f(breathingLocation, Math.sin(this.time * 2.0) * 0.1 + 1.0);
        }
    }

    setAnimationSpeed(speed) {
        this.animationSpeed = speed;
    }

    toggleBreathing() {
        this.breathingEnabled = !this.breathingEnabled;
    }
}

// Performance optimization
class OptimizedRenderer {
    constructor() {
        this.frameCount = 0;
        this.lastTime = 0;
        this.fps = 60;
    }

    render() {
        const currentTime = performance.now();
        const deltaTime = currentTime - this.lastTime;

        // Limit to 60 FPS
        if (deltaTime >= 1000 / this.fps) {
            this.update();
            this.draw();
            this.lastTime = currentTime;
            this.frameCount++;
        }

        requestAnimationFrame(() => this.render());
    }

    update() {
        // Update shader uniforms
        this.updateUniforms();
    }

    draw() {
        // Render frame
        this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
    }
}

// Essential PostGIS WebGL patterns
postgis_webgl_patterns = {
    "raster_export": "ST_AsGDALRaster makes easy export from PostGIS",
    "texture_loading": "Browser fetch → WebGL texture for shader processing",
    "shader_effects": "Fragment shaders transform raster data into art",
    "performance": "Keep fragment programs simple to hit 60 FPS",
    "security": "Sandbox DB/API, don't expose raw queries to browsers",
    "creativity": "Use elevation, NDVI, and spectral data as creative inputs"
}

// Essential PostGIS WebGL operations
// 1. Load raster into PostGIS
INSERT INTO dem(rast) SELECT ST_AddBand(ST_MakeEmptyRaster(256,256, 0,0,30,-30,0,0,4326), '32BF'::text, 0, NULL);

// 2. Export raster via API
fetch('/tile/1/png').then(response => response.blob()).then(blob => createImageBitmap(blob));

// 3. Create WebGL texture
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageBitmap);

// 4. Apply shader effects
gl.uniform1f(timeLocation, time);
gl.uniform1i(glitchLocation, glitchEnabled);

// 5. Render frame
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);