@aguacerowx/mapsgl 0.0.57 → 0.0.58

package/src/SatelliteShaderManager.js

@@ -1,1000 +1,1000 @@
-import { DEFAULT_BASIS_BASE_URL } from './defaultBasisBaseUrl.js';
-import mapboxgl from 'mapbox-gl';
-import proj4 from 'proj4';
-import { createProgram } from './satelliteShader.js';
-import {
-    DEFAULT_SATELLITE_LONGWAVE_IR_COLORMAP,
-    DEFAULT_SATELLITE_WATER_VAPOR_COLORMAP,
-} from './satelliteDefaultColormaps.js';
-
-const wgs84 = 'EPSG:4326';
-
-/** Default GOES-East CONUS mesh bounds in geos coordinates (meters). */
-const GOES_CONUS_EXTENT_M = [-3627020.7, 1583424.2, 1382521.8, 4588949.1];
-
-/** Kelvin ranges for IR/WV colormap generation (matches aguacero-frontend utilityFunctions RANGES). */
-const RANGES = {
-    IR: { minK: 180, maxK: 330, label: 'IR' },
-    WV: { minK: 183, maxK: 288, label: 'WV' },
-    VIS: { minK: 0, maxK: 1, label: 'VIS' },
-};
-
-export class SatelliteShaderManager {
-    constructor(workerPool, findBestFormatFn, options = {}) {
-        this.id = 'satellite-layer';
-        this.type = 'custom';
-        this.renderingMode = '2d';
-
-        this.workerPool = workerPool;
-        this.findBestFormat = findBestFormatFn;
-        this.basisBaseUrl = options.basisBaseUrl ?? DEFAULT_BASIS_BASE_URL;
-
-        this.frames = new globalThis.Map();
-        this.activeFrameKey = null;
-        this.targetFrameKey = null;
-
-        this.currentOpacity = 1.0; 
-        this.isVisible = true; 
-
-        this.repaintTimeout = null;
-
-        // Track the attrib locations used in the last render so onRemove can disable them,
-        // preventing GL state leakage that would break other layers (e.g. radar) after removal.
-        this._lastPosAttrib = -1;
-        this._lastTexCoordAttrib = -1;
-
-        /** Merged layer settings (opacity, colormap overrides, etc.). */
-        this.currentSettings = {};
-    }
-
-    onAdd(map, gl) {
-        this.map = map;
-        this.gl = gl;
-
-        this.initializeWorkers();
-
-        const vertexSource = `
-            attribute vec2 a_pos;
-            attribute vec2 a_texCoord;
-            uniform mat4 u_matrix;
-            uniform vec4 u_uv_transform; 
-            varying vec2 v_texCoord;
-            void main() {
-                gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
-                v_texCoord = a_texCoord * u_uv_transform.xy + u_uv_transform.zw;
-            }`;
-
-        const fragmentSource = `
-            precision mediump float;
-            varying vec2 v_texCoord;
-            uniform sampler2D u_texture;
-            uniform sampler2D u_colormap;
-            uniform bool u_is_true_color;
-            uniform bool u_use_colormap;
-            uniform float u_opacity;
-
-            void main() {
-                vec4 texColor = texture2D(u_texture, v_texCoord);
-                vec3 rawColor = texColor.rgb; 
-
-                if (u_is_true_color) {
-                    gl_FragColor = vec4(rawColor, texColor.a * u_opacity);
-                } 
-                else {
-                    float luminance = rawColor.r;
-
-                    if (u_use_colormap) {
-                        float intensity = clamp(luminance, 0.0, 1.0);
-                        vec3 colorMapped = texture2D(u_colormap, vec2(intensity, 0.5)).rgb;
-                        gl_FragColor = vec4(colorMapped, u_opacity);
-                    }
-                    else {
-                        float val = luminance * 1.7;
-
-                        // if (val < 0.001) {
-                        //     discard;
-                        // }
-
-                        val = clamp(val, 0.0, 1.0);
-                        gl_FragColor = vec4(val, val, val, u_opacity);
-                    }
-                }
-            }`;
-
-        this.program = createProgram(gl, vertexSource, fragmentSource);
-
-        this.isTrueColorLocation = gl.getUniformLocation(this.program, "u_is_true_color");
-        this.useColormapLocation = gl.getUniformLocation(this.program, "u_use_colormap");
-        this.colormapSamplerLocation = gl.getUniformLocation(this.program, "u_colormap");
-        this.uvTransformLocation = gl.getUniformLocation(this.program, "u_uv_transform");
-        this.interpolateColormapLocation = gl.getUniformLocation(this.program, "u_interpolate_colormap");
-        this.opacityLocation = gl.getUniformLocation(this.program, "u_opacity");
-
-        this.irColormapTexture = this._generateTextureFromColormapData(
-            gl,
-            DEFAULT_SATELLITE_LONGWAVE_IR_COLORMAP,
-            'IR',
-            true
-        );
-        this.wvColormapTexture = this._generateTextureFromColormapData(
-            gl,
-            DEFAULT_SATELLITE_WATER_VAPOR_COLORMAP,
-            'WV',
-            true
-        );
-    }
-
-    onRemove() {
-        if (this.repaintTimeout) {
-            cancelAnimationFrame(this.repaintTimeout);
-            this.repaintTimeout = null;
-        }
-
-        // Disable any vertex attribute arrays we may have left enabled during the last render.
-        // This is critical: leaving enabled attrib arrays that reference deleted buffers causes
-        // INVALID_OPERATION on subsequent drawArrays/drawElements calls from other layers (e.g. radar).
-        if (this.gl) {
-            if (this._lastPosAttrib >= 0) {
-                this.gl.disableVertexAttribArray(this._lastPosAttrib);
-                this._lastPosAttrib = -1;
-            }
-            if (this._lastTexCoordAttrib >= 0) {
-                this.gl.disableVertexAttribArray(this._lastTexCoordAttrib);
-                this._lastTexCoordAttrib = -1;
-            }
-            // Unbind buffers so nothing else accidentally reads stale bindings.
-            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
-            this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
-        }
-
-        for (const frame of this.frames.values()) {
-            if (frame.tile) {
-                this._destroyTile(frame.tile);
-            }
-        }
-        this.frames.clear();
-
-        if (this.gl && this.program) {
-            this.gl.deleteProgram(this.program);
-        }
-        this.program = null;
-        if (this.gl) {
-            if (this.irColormapTexture) this.gl.deleteTexture(this.irColormapTexture);
-            if (this.wvColormapTexture) this.gl.deleteTexture(this.wvColormapTexture);
-            if (this.userColormapTexture) this.gl.deleteTexture(this.userColormapTexture);
-        }
-        this.irColormapTexture = null;
-        this.wvColormapTexture = null;
-        this.userColormapTexture = null;
-        this._destroyReadoutPipeline();
-    }
-
-    _parseProjectionFromFileName(fileName) {
-        const match = fileName.match(/_proj_([-\d\.eE]+)_([-\d\.eE]+)_([-\d\.eE]+)/);
-        if (match) {
-            const scale = parseFloat(match[3]);
-            return {
-                h: 35786023.0,
-                lon0: -75.0,
-                xOff: parseFloat(match[1]),
-                yOff: parseFloat(match[2]),
-                xScale: scale,
-                yScale: -scale 
-            };
-        }
-        return null;
-    }
-
-    addFrame(supercompressedBuffer, frameKey, fileName) {
-        if (this.frames.has(frameKey)) {
-            return;
-        }
-
-        let meshSubdivisions = 50;
-        let frameProjString = "+proj=geos +h=35786023.0 +lon_0=-75.0 +sweep=x +no_defs";
-        let frameExtent = [...GOES_CONUS_EXTENT_M];
-
-        let isMesoscale = false;
-
-        if (fileName.startsWith('F_') || fileName.includes('MCMIPF') || fileName.includes('CMIPF')) {
-            frameProjString = "+proj=geos +h=35786023.0 +lon_0=-75.0 +sweep=x +no_defs";
-            frameExtent =[-5434894.885056, -5434894.885056, 5434894.885056, 5434894.885056];
-            meshSubdivisions = 100; 
-        } else if (fileName.startsWith('M1_') || fileName.startsWith('M2_') || fileName.includes('MCMIPM') || fileName.includes('CMIPM')) {
-            isMesoscale = true;
-            meshSubdivisions = 30;
-        } 
-
-        const customProj = this._parseProjectionFromFileName(fileName);
-
-        if (isMesoscale && !customProj) {
-            console.warn(
-                '[SatelliteLayer] Mesoscale file name is missing _proj_xOff_yOff_scale (see single-band M1/M2 keys). ' +
-                    'RGB pipeline should use the same segment as C## products for correct placement:',
-                fileName
-            );
-        }
-
-        const isTrueColor = fileName.includes('_truecolor_') || fileName.includes('_geocolor_') || fileName.includes('_firetemperature_') || fileName.includes('_dust_') || fileName.includes('_simplewatervapor_') || fileName.includes('_ntmicro_') || fileName.includes('_daycloudphase_')  || fileName.includes('_daylandcloudfire_') || fileName.includes('_airmass_') || fileName.includes('_sandwich_');
-
-        let colormapType = 'none';
-        if (fileName.includes('C13') || fileName.includes('C14') || fileName.includes('C15') || fileName.includes('C16')) {
-            colormapType = 'ir';
-        } else if (fileName.includes('C08') || fileName.includes('C09') || fileName.includes('C10')) {
-            colormapType = 'wv';
-        }
-        
-        const brightnessMultiplier = 1.0; 
-        
-        const frame = {
-            supercompressedBuffer,
-            isTrueColor,
-            colormapType,
-            brightnessMultiplier,
-            ktx2Metadata: null,
-            fullTranscodedData: null,
-            tile: null,
-            ktx2MetadataPromise: null,
-            customProj,
-            isMesoscale,
-            meshSubdivisions,
-            projString: frameProjString,
-            extent: frameExtent,
-            sourceFileName: fileName,
-        };
-
-        let resolvePromise;
-        frame.ktx2MetadataPromise = new Promise(resolve => { resolvePromise = resolve; });
-        frame.ktx2MetadataPromise.resolve = resolvePromise;
-
-        this.frames.set(frameKey, frame);
-        
-        if (this.targetFrameKey === frameKey) {
-            this.setActiveFrame(frameKey);
-        } else if (this.targetFrameKey === null && this.activeFrameKey === null) {
-            this.setActiveFrame(frameKey);
-        }
-        
-        this.workerPool.execute({
-            type: 'INITIAL_LOAD',
-            ktx2Buffer: supercompressedBuffer,
-            downsampleRate: 1,
-            frameKey,
-            basisBaseUrl: this.basisBaseUrl,
-        })
-        .then(result => {
-            if (!this.frames.has(frameKey)) {
-                return;
-            }
-
-            frame.supercompressedBuffer = null;
-
-            if (result.error || !result.ktx2Metadata) {
-                console.warn(`[ShaderManager] Worker failed for frame ${frameKey}:`, result.error);
-                frame.ktx2Metadata = null; 
-                frame.ktx2MetadataPromise.resolve(null);
-                return; 
-            }
-            
-            const { ktx2Metadata, fullTranscodedData } = result;
-            const { fullWidth, fullHeight } = ktx2Metadata;
-    
-            if (frame.customProj) {
-                const { h, lon0, xOff, yOff, xScale, yScale } = frame.customProj;
-                frame.projString = `+proj=geos +h=${h} +lon_0=${lon0} +sweep=x +no_defs`;
-
-                const xMinRad = xOff;
-                const xMaxRad = xOff + (fullWidth * xScale);
-                const yMinRad = yOff + (fullHeight * yScale); 
-                const yMaxRad = yOff;
-
-                frame.extent =[
-                    Math.min(xMinRad, xMaxRad) * h,
-                    Math.min(yMinRad, yMaxRad) * h,
-                    Math.max(xMinRad, xMaxRad) * h,
-                    Math.max(yMinRad, yMaxRad) * h
-                ];
-            }
-            
-            const s3tc = this.gl.getExtension('WEBGL_compressed_texture_s3tc');
-            const etc1 = this.gl.getExtension('WEBGL_compressed_texture_etc1');
-            const astc = this.gl.getExtension('WEBGL_compressed_texture_astc');
-            const bptc = this.gl.getExtension('EXT_texture_compression_bptc');
-
-            const formatInfo = ktx2Metadata.formatInfo;
-            switch (formatInfo.webglFormatName) {
-                case 'COMPRESSED_RGBA_ASTC_4x4_KHR':
-                    if (astc) formatInfo.webglFormatEnum = astc.COMPRESSED_RGBA_ASTC_4x4_KHR;
-                    break;
-                case 'COMPRESSED_RGBA_BPTC_UNORM_EXT':
-                    if (bptc) formatInfo.webglFormatEnum = bptc.COMPRESSED_RGBA_BPTC_UNORM_EXT;
-                    break;
-                case 'COMPRESSED_RGBA_S3TC_DXT5_EXT':
-                    if (s3tc) formatInfo.webglFormatEnum = s3tc.COMPRESSED_RGBA_S3TC_DXT5_EXT;
-                    break;
-                case 'COMPRESSED_RGB_S3TC_DXT1_EXT':
-                    if (s3tc) formatInfo.webglFormatEnum = s3tc.COMPRESSED_RGB_S3TC_DXT1_EXT;
-                    break;
-                case 'COMPRESSED_RGB_ETC1_WEBGL':
-                    if (etc1) formatInfo.webglFormatEnum = etc1.COMPRESSED_RGB_ETC1_WEBGL;
-                    break;
-                case 'RGBA':
-                    formatInfo.webglFormatEnum = this.gl.RGBA;
-                    formatInfo.webglTypeEnum = this.gl.UNSIGNED_BYTE;
-                    break;
-                default:
-                    console.error("Could not resolve WebGL format from worker string:", formatInfo.webglFormatName);
-                    frame.ktx2Metadata = null; 
-                    frame.ktx2MetadataPromise.resolve(null);
-                    return; 
-            }
-
-            if (!formatInfo.webglFormatEnum) {
-                console.error(`Format ${formatInfo.webglFormatName} is not supported by this GPU.`);
-                frame.ktx2Metadata = null;
-                frame.ktx2MetadataPromise.resolve(null);
-                return;
-            }
-
-            frame.ktx2Metadata = ktx2Metadata;
-            frame.fullTranscodedData = fullTranscodedData;
-            frame.ktx2MetadataPromise.resolve(ktx2Metadata);
-
-            const texture = this._createTexture(fullTranscodedData, ktx2Metadata);
-            if (texture) {
-                const { vertices, indices } = this._createMeshGeometry(
-                    frame.projString, 
-                    frame.extent, 
-                    frame.meshSubdivisions
-                );
-                
-                const vertexBuffer = this.gl.createBuffer();
-                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
-                this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
-                const indexBuffer = this.gl.createBuffer();
-                this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-                this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, indices, this.gl.STATIC_DRAW);
-
-                frame.tile = {
-                    vertexBuffer,
-                    indexBuffer,
-                    texture: texture,
-                    indexCount: indices.length,
-                    uvTransform:[1.0, 1.0, 0.0, 0.0] 
-                };
-            }
-
-            this.scheduleRepaint();
-        })
-        .catch((error) => {
-            if (!this.frames.has(frameKey)) {
-                return;
-            }
-            console.error(`[ShaderManager] Worker promise REJECTED for INITIAL_LOAD of frame ${frameKey}:`, error);
-        });
-    }
-
-    _ensureReadoutPipeline() {
-        const gl = this.gl;
-        if (!gl || this._readoutProgram) return;
-
-        const vs = `attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0.0,1.0); }`;
-        const fs = `precision mediump float;
-uniform sampler2D u_tex;
-uniform vec2 u_uv;
-void main(){
-  float L = texture2D(u_tex, u_uv).r;
-  gl_FragColor = vec4(L, L, L, 1.0);
-}`;
-        this._readoutProgram = createProgram(gl, vs, fs);
-        this._readoutUuv = gl.getUniformLocation(this._readoutProgram, 'u_uv');
-        this._readoutUtex = gl.getUniformLocation(this._readoutProgram, 'u_tex');
-
-        this._readoutTriBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._readoutTriBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-        this._readoutTex = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, this._readoutTex);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-
-        this._readoutFbo = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this._readoutFbo);
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._readoutTex, 0);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-
-    _destroyReadoutPipeline() {
-        const gl = this.gl;
-        if (!gl) return;
-        if (this._readoutProgram) {
-            gl.deleteProgram(this._readoutProgram);
-            this._readoutProgram = null;
-        }
-        if (this._readoutTriBuffer) {
-            gl.deleteBuffer(this._readoutTriBuffer);
-            this._readoutTriBuffer = null;
-        }
-        if (this._readoutTex) {
-            gl.deleteTexture(this._readoutTex);
-            this._readoutTex = null;
-        }
-        if (this._readoutFbo) {
-            gl.deleteFramebuffer(this._readoutFbo);
-            this._readoutFbo = null;
-        }
-    }
-
-    /** Sample active frame texture at UV (0–1). Uses a 1×1 FBO + readPixels so compressed GPU textures work. */
-    _sampleLuminanceAtUv(tu, tv) {
-        const gl = this.gl;
-        if (!gl || !this._readoutProgram) return null;
-        const frame = this.frames.get(this.activeFrameKey);
-        if (!frame?.tile?.texture) return null;
-
-        const prevFb = gl.getParameter(gl.FRAMEBUFFER_BINDING);
-        const prevVp = gl.getParameter(gl.VIEWPORT);
-        const prevProg = gl.getParameter(gl.CURRENT_PROGRAM);
-        const prevActiveUnit = gl.getParameter(gl.ACTIVE_TEXTURE);
-        gl.activeTexture(gl.TEXTURE0);
-        const prevTex0 = gl.getParameter(gl.TEXTURE_BINDING_2D);
-
-        try {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, this._readoutFbo);
-            gl.viewport(0, 0, 1, 1);
-            gl.useProgram(this._readoutProgram);
-            gl.disable(gl.DEPTH_TEST);
-            gl.disable(gl.BLEND);
-            gl.colorMask(true, true, true, true);
-            gl.clearColor(0, 0, 0, 0);
-            gl.clear(gl.COLOR_BUFFER_BIT);
-
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, frame.tile.texture);
-            gl.uniform1i(this._readoutUtex, 0);
-            gl.uniform2f(this._readoutUuv, tu, tv);
-
-            const posLoc = gl.getAttribLocation(this._readoutProgram, 'a_pos');
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._readoutTriBuffer);
-            gl.enableVertexAttribArray(posLoc);
-            gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
-            gl.drawArrays(gl.TRIANGLES, 0, 3);
-            gl.disableVertexAttribArray(posLoc);
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-            const pix = new Uint8Array(4);
-            gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pix);
-            return pix[0] / 255;
-        } finally {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, prevFb);
-            gl.viewport(prevVp[0], prevVp[1], prevVp[2], prevVp[3]);
-            gl.useProgram(prevProg);
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, prevTex0);
-            gl.activeTexture(prevActiveUnit);
-        }
-    }
-
-    getValueAtLatLon(lat, lon) {
-        if (!this.gl || !this.activeFrameKey || !this.frames.has(this.activeFrameKey)) return null;
-        if (!this.isVisible || (this.currentOpacity ?? 0) <= 0) return null;
-
-        const frame = this.frames.get(this.activeFrameKey);
-        if (!frame.tile?.texture || !frame.ktx2Metadata) return null;
-
-        let projX;
-        let projY;
-        try {
-            [projX, projY] = proj4(wgs84, frame.projString, [lon, lat]);
-        } catch {
-            return null;
-        }
-
-        const [xmin, ymin, xmax, ymax] = frame.extent;
-        if (!Number.isFinite(projX) || !Number.isFinite(projY)) return null;
-
-        const pad = 1e-3 * Math.max(xmax - xmin, ymax - ymin, 1);
-        if (projX < xmin - pad || projX > xmax + pad || projY < ymin - pad || projY > ymax + pad) return null;
-
-        let u = (projX - xmin) / (xmax - xmin);
-        let v = (ymax - projY) / (ymax - ymin);
-        u = Math.min(1, Math.max(0, u));
-        v = Math.min(1, Math.max(0, v));
-
-        const t = frame.tile.uvTransform || [1, 1, 0, 0];
-        const tu = u * t[0] + t[2];
-        const tv = v * t[1] + t[3];
-        if (tu < -1e-3 || tu > 1 + 1e-3 || tv < -1e-3 || tv > 1 + 1e-3) return null;
-
-        this._ensureReadoutPipeline();
-        const lum = this._sampleLuminanceAtUv(tu, tv);
-        if (lum == null || !Number.isFinite(lum)) return null;
-
-        return {
-            isTrueColor: frame.isTrueColor,
-            colormapType: frame.colormapType,
-            luminance: lum,
-            sourceFileName: frame.sourceFileName,
-        };
-    }
-
-    removeFrame(frameKey) {
-        if (!this.frames.has(frameKey)) {
-            return;
-        }
-
-        const frame = this.frames.get(frameKey);
-
-        if (frame.tile) {
-            this._destroyTile(frame.tile);
-        }
-
-        this.workerPool.broadcast({
-            type: 'CLEANUP_FRAME',
-            frameKey: frameKey
-        });
-        
-        this.frames.delete(frameKey);
-
-        if (this.activeFrameKey === frameKey) {
-            this.activeFrameKey = null;
-        }
-
-        this.map.triggerRepaint();
-    }
-
-    _updateTextureFiltering() {
-        const gl = this.gl;
-        const filterMode = this.currentSmoothing === 1 ? gl.LINEAR : gl.NEAREST;
-        
-        for (const frame of this.frames.values()) {
-            if (frame.tile && frame.tile.texture) {
-                gl.bindTexture(gl.TEXTURE_2D, frame.tile.texture);
-                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
-                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
-            }
-        }
-        
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-
-    updateLayerSettings(settings) {
-        this.currentSettings = { ...this.currentSettings, ...settings };
-
-        const s = this.currentSettings;
-        const oldSmoothing = this.currentSmoothing;
-
-        if (s.fillSmoothing !== undefined) {
-            this.currentSmoothing = s.fillSmoothing;
-        }
-
-        if (s.satelliteOpacity !== undefined) {
-            this.currentOpacity = s.satelliteOpacity;
-        }
-
-        if (s.satelliteVisibility !== undefined) {
-            this.isVisible = s.satelliteVisibility;
-        }
-
-        if (s.interpolateColormap !== undefined) {
-            this.interpolateColormap = s.interpolateColormap;
-        }
-
-        if (oldSmoothing !== this.currentSmoothing) {
-            this._updateTextureFiltering();
-        }
-
-        this._applySatelliteColormapFromSettings();
-
-        this.map.triggerRepaint();
-    }
-
-    initializeWorkers() {
-        const gl = this.gl;
-        const getExtension = (name) => gl.getExtension(name) || gl.getExtension(`WEBKIT_${name}`) || gl.getExtension(`MOZ_${name}`);
-
-        const supportedFormats = {
-            s3tc: !!getExtension('WEBGL_compressed_texture_s3tc'),
-            etc1: !!getExtension('WEBGL_compressed_texture_etc1'),
-            astc: !!getExtension('WEBGL_compressed_texture_astc'),
-            bc7: !!getExtension('EXT_texture_compression_bptc'),
-            rgtc: !!getExtension('EXT_texture_compression_rgtc'),
-        };
-
-        const msg = {
-            type: 'INIT_WORKER',
-            supportedFormats,
-            basisBaseUrl: this.basisBaseUrl,
-        };
-
-        // Every Worker instance must receive INIT (including replacements after errors). broadcast() alone
-        // missed workers created in WorkerPool._replaceWorker → Basis saw undefined transcoder enums.
-        this.workerPool.setWorkerBootstrap((worker) => {
-            worker.postMessage(msg);
-        });
-    }
-
-    scheduleRepaint() {
-        if (this.repaintTimeout) return;
-        this.repaintTimeout = requestAnimationFrame(() => {
-            this.map.triggerRepaint();
-            this.repaintTimeout = null;
-        });
-    }
-
-    setActiveFrame(frameKey) {
-        this.targetFrameKey = frameKey;
-
-        if (this.activeFrameKey === frameKey) {
-            return; 
-        }
-
-        if (!this.frames.has(frameKey)) {
-            // Avoid showing a stale frame while the new timestep / product is still loading or decoding.
-            this.activeFrameKey = null;
-            this.scheduleRepaint();
-            return;
-        }
-        this.activeFrameKey = frameKey;
-
-        this._applySatelliteColormapFromSettings();
-
-        this.scheduleRepaint();
-    }
-
-    /**
-     * Builds `userColormapTexture` from `currentSettings` and the active frame’s IR vs WV kind.
-     * Prefer `satelliteColormapIR` / `satelliteColormapWV` when set; otherwise `satelliteColormap` (legacy one array).
-     */
-    _applySatelliteColormapFromSettings() {
-        const gl = this.gl;
-        if (!gl) return;
-
-        const settings = this.currentSettings || {};
-        const activeFrame = this.activeFrameKey ? this.frames.get(this.activeFrameKey) : null;
-        const ct = activeFrame?.colormapType;
-
-        let stops = null;
-        let channelType = 'IR';
-
-        if (ct === 'wv' && settings.satelliteColormapWV?.length > 0) {
-            stops = settings.satelliteColormapWV;
-            channelType = 'WV';
-        } else if (ct === 'ir' && settings.satelliteColormapIR?.length > 0) {
-            stops = settings.satelliteColormapIR;
-            channelType = 'IR';
-        } else if (settings.satelliteColormap?.length > 0) {
-            stops = settings.satelliteColormap;
-            channelType = ct === 'wv' ? 'WV' : 'IR';
-        }
-
-        const shouldInterpolate = settings.interpolateColormap !== false;
-        const cacheKey = JSON.stringify({ stops, channelType, iv: shouldInterpolate, ct });
-
-        if (cacheKey === this.lastColormapCacheKey) {
-            return;
-        }
-        this.lastColormapCacheKey = cacheKey;
-
-        if (this.userColormapTexture) {
-            gl.deleteTexture(this.userColormapTexture);
-            this.userColormapTexture = null;
-        }
-
-        if (stops?.length) {
-            this.userColormapTexture = this._generateTextureFromColormapData(
-                gl,
-                stops,
-                channelType,
-                shouldInterpolate
-            );
-        }
-    }
-
-    _createTexture(data, ktx2Metadata) {
-        const gl = this.gl;
-        const { fullWidth, fullHeight, formatInfo } = ktx2Metadata;
-
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        const filterMode = this.currentSmoothing === 1 ? gl.LINEAR : gl.NEAREST;
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
-        
-        if (formatInfo.isCompressed) {
-            gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-            gl.compressedTexImage2D(
-                gl.TEXTURE_2D,
-                0, 
-                formatInfo.webglFormatEnum,
-                fullWidth,
-                fullHeight,
-                0, 
-                data
-            );
-        } else {
-            gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4); 
-            gl.texImage2D(
-                gl.TEXTURE_2D,
-                0,
-                formatInfo.webglFormatEnum, 
-                fullWidth,
-                fullHeight,
-                0,
-                formatInfo.webglFormatEnum,
-                formatInfo.webglTypeEnum,
-                data
-            );
-        }
-        
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        return texture;
-    }
-    
-    _destroyTile(tile) {
-        if (!tile) return;
-        
-        if (tile.texture) {
-            this.gl.deleteTexture(tile.texture);
-        }
-        if (tile.vertexBuffer) {
-            this.gl.deleteBuffer(tile.vertexBuffer);
-        }
-        if (tile.indexBuffer) {
-            this.gl.deleteBuffer(tile.indexBuffer);
-        }
-    }
-
-    _createMeshGeometry(projectionString, extent, subdivisions = 50) {
-        const[x_min, y_min, x_max, y_max] = extent;
-        const vertices = [];
-        const indices =[];
-
-        for (let row = 0; row <= subdivisions; row++) {
-            for (let col = 0; col <= subdivisions; col++) {
-                const u = col / subdivisions;
-                const v = row / subdivisions;
-
-                const proj_x = x_min + u * (x_max - x_min);
-                const proj_y = y_max - v * (y_max - y_min); 
-
-                try {
-                    const [lon, lat] = proj4(projectionString, wgs84,[proj_x, proj_y]);
-                    if (Math.abs(lon) > 180 || Math.abs(lat) > 90) throw new Error("Out of bounds");
-                    const mercator = mapboxgl.MercatorCoordinate.fromLngLat({ lon, lat }, 0);
-                    vertices.push(mercator.x, mercator.y, u, v);
-                } catch (e) {
-                    vertices.push(NaN, NaN, NaN, NaN);
-                }
-            }
-        }
-
-        for (let row = 0; row < subdivisions; row++) {
-            for (let col = 0; col < subdivisions; col++) {
-                const i00 = row * (subdivisions + 1) + col;
-                const i10 = i00 + 1;
-                const i01 = (row + 1) * (subdivisions + 1) + col;
-                const i11 = i01 + 1;
-                
-                if (!isNaN(vertices[i00 * 4]) && !isNaN(vertices[i10 * 4]) && !isNaN(vertices[i01 * 4]) && !isNaN(vertices[i11 * 4])) {
-                    indices.push(i00, i01, i10);
-                    indices.push(i10, i01, i11);
-                }
-            }
-        }
-        
-        return {
-            vertices: new Float32Array(vertices),
-            indices: new Uint32Array(indices)
-        };
-    }
-
-    render(gl, matrix) {
-        if (!this.activeFrameKey || !this.frames.has(this.activeFrameKey)) {
-            return;
-        }
-
-        const activeFrame = this.frames.get(this.activeFrameKey);
-        
-        if (!activeFrame.tile) {
-            return;
-        }
-        
-        const effectiveOpacity = this.isVisible ? (this.currentOpacity ?? 1.0) : 0.0;
-        
-        if (effectiveOpacity === 0) {
-            return;
-        }
-        
-        gl.useProgram(this.program);
-        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
-
-        gl.uniform1i(this.isTrueColorLocation, activeFrame.isTrueColor ? 1 : 0);
-        
-        let useColormap = activeFrame.colormapType !== 'none';
-        
-        if (this.userColormapTexture) {
-            gl.activeTexture(gl.TEXTURE1);
-            gl.bindTexture(gl.TEXTURE_2D, this.userColormapTexture);
-            gl.uniform1i(this.colormapSamplerLocation, 1);
-            useColormap = true;
-        } else if (activeFrame.colormapType !== 'none') {
-            gl.activeTexture(gl.TEXTURE1);
-            if (activeFrame.colormapType === 'wv') {
-                gl.bindTexture(gl.TEXTURE_2D, this.wvColormapTexture);
-            } else {
-                gl.bindTexture(gl.TEXTURE_2D, this.irColormapTexture);
-            }
-            gl.uniform1i(this.colormapSamplerLocation, 1);
-        }
-
-        gl.uniform1i(this.useColormapLocation, useColormap ? 1 : 0);
-        gl.uniform1i(this.isTrueColorLocation, activeFrame.isTrueColor ? 1 : 0);
-        
-        const shouldInterpolate = this.currentSettings?.interpolateColormap !== false;
-        gl.uniform1i(this.interpolateColormapLocation, shouldInterpolate ? 1 : 0);
-        
-        const posAttrib = gl.getAttribLocation(this.program, "a_pos");
-        const texCoordAttrib = gl.getAttribLocation(this.program, "a_texCoord");
-
-        // Remember these for onRemove cleanup in case the layer is torn down before next render.
-        this._lastPosAttrib = posAttrib;
-        this._lastTexCoordAttrib = texCoordAttrib;
-
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.disable(gl.DEPTH_TEST);
-
-        this.drawTile(activeFrame.tile, posAttrib, texCoordAttrib, effectiveOpacity);
-
-        // Restore vertex attribute array state. Mapbox GL does NOT automatically reset these
-        // between custom layer renders, so leaving them enabled causes INVALID_OPERATION when
-        // the layer is removed (buffers deleted) and another layer (e.g. radar) calls drawArrays.
-        gl.disableVertexAttribArray(posAttrib);
-        gl.disableVertexAttribArray(texCoordAttrib);
-
-        // Unbind buffers and textures to leave GL in a clean state for subsequent layers.
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        gl.activeTexture(gl.TEXTURE1);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-
-    drawTile(tile, posAttrib, texCoordAttrib, opacity = 1.0) {
-        const gl = this.gl;
-        gl.bindBuffer(gl.ARRAY_BUFFER, tile.vertexBuffer);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tile.indexBuffer);
-        
-        gl.enableVertexAttribArray(posAttrib);
-        gl.vertexAttribPointer(posAttrib, 2, gl.FLOAT, false, 16, 0);
-
-        gl.enableVertexAttribArray(texCoordAttrib);
-        gl.vertexAttribPointer(texCoordAttrib, 2, gl.FLOAT, false, 16, 8);
-        
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, tile.texture);
-        gl.uniform1i(gl.getUniformLocation(this.program, "u_texture"), 0);
-
-        const transform = tile.uvTransform ||[1, 1, 0, 0];
-        gl.uniform4fv(this.uvTransformLocation, transform);
-        
-        const opacityLocation = gl.getUniformLocation(this.program, "u_opacity");
-        gl.uniform1f(opacityLocation, opacity);
-
-        gl.drawElements(gl.TRIANGLES, tile.indexCount, gl.UNSIGNED_INT, 0);
-    }
-    
-    _generateTextureFromColormapData(gl, colormapData, channelType = 'IR', interpolate = true) {
-        if (!colormapData || colormapData.length < 2) {
-            console.log('Invalid colormap data, returning null');
-            return null;
-        }
-
-        const width = 256;
-        const height = 1;
-        const data = new Uint8Array(width * height * 4);
-        
-        const range = RANGES[channelType] || RANGES.IR;
-
-        const parsedStops =[];
-        for (let i = 0; i < colormapData.length; i += 2) {
-            const normVal = colormapData[i]; 
-            const hex = colormapData[i + 1];
-            
-            const r = parseInt(hex.slice(1, 3), 16);
-            const g = parseInt(hex.slice(3, 5), 16);
-            const b = parseInt(hex.slice(5, 7), 16);
-            
-            let texCoord;
-            let kelvin;
-            let celsius;
-            
-            if (channelType === 'VIS') {
-                texCoord = normVal / 100;
-                kelvin = null;
-                celsius = null;
-            } else {
-                const fraction = normVal / 100;
-                kelvin = range.maxK - (fraction * (range.maxK - range.minK));
-                celsius = kelvin - 273.15;
-                texCoord = (range.maxK - kelvin) / (range.maxK - range.minK);
-            }
-            parsedStops.push({ texCoord, color: [r, g, b], normVal, kelvin, celsius });
-        }
-
-        parsedStops.sort((a, b) => a.texCoord - b.texCoord);
-
-        for (let i = 0; i < width; i++) {
-            const t = i / (width - 1);
-            
-            let r, g, b;
-            
-            if (interpolate) {
-                let c1 = parsedStops[0];
-                let c2 = parsedStops[parsedStops.length - 1];
-
-                for (let j = 0; j < parsedStops.length - 1; j++) {
-                    if (t >= parsedStops[j].texCoord && t <= parsedStops[j + 1].texCoord) {
-                        c1 = parsedStops[j];
-                        c2 = parsedStops[j + 1];
-                        break;
-                    }
-                }
-
-                const segmentRange = c2.texCoord - c1.texCoord;
-
-                if (segmentRange < 0.00001) {
-                    r = c1.color[0]; 
-                    g = c1.color[1]; 
-                    b = c1.color[2];
-                } else {
-                    const f = (t - c1.texCoord) / segmentRange;
-                    r = Math.round(c1.color[0] + f * (c2.color[0] - c1.color[0]));
-                    g = Math.round(c1.color[1] + f * (c2.color[1] - c1.color[1]));
-                    b = Math.round(c1.color[2] + f * (c2.color[2] - c1.color[2]));
-                }
-            } else {
-                let chosenStop = parsedStops[0];
-                
-                for (let j = 0; j < parsedStops.length; j++) {
-                    if (t >= parsedStops[j].texCoord) {
-                        chosenStop = parsedStops[j];
-                    } else {
-                        break;
-                    }
-                }
-                
-                r = chosenStop.color[0];
-                g = chosenStop.color[1];
-                b = chosenStop.color[2];
-            }
-
-            const offset = i * 4;
-            data[offset] = r;
-            data[offset + 1] = g;
-            data[offset + 2] = b;
-            data[offset + 3] = 255;
-        }
-
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
-        
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        
-        const filterMode = interpolate ? gl.LINEAR : gl.NEAREST;
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
-
-        return texture;
-    }
-}
+import { DEFAULT_BASIS_BASE_URL } from './defaultBasisBaseUrl.js';
+import mapboxgl from 'mapbox-gl';
+import proj4 from 'proj4';
+import { createProgram } from './satelliteShader.js';
+import {
+    DEFAULT_SATELLITE_LONGWAVE_IR_COLORMAP,
+    DEFAULT_SATELLITE_WATER_VAPOR_COLORMAP,
+} from './satelliteDefaultColormaps.js';
+
+const wgs84 = 'EPSG:4326';
+
+/** Default GOES-East CONUS mesh bounds in geos coordinates (meters). */
+const GOES_CONUS_EXTENT_M = [-3627020.7, 1583424.2, 1382521.8, 4588949.1];
+
+/** Kelvin ranges for IR/WV colormap generation (matches aguacero-frontend utilityFunctions RANGES). */
+const RANGES = {
+    IR: { minK: 180, maxK: 330, label: 'IR' },
+    WV: { minK: 183, maxK: 288, label: 'WV' },
+    VIS: { minK: 0, maxK: 1, label: 'VIS' },
+};
+
+export class SatelliteShaderManager {
+    constructor(workerPool, findBestFormatFn, options = {}) {
+        this.id = 'satellite-layer';
+        this.type = 'custom';
+        this.renderingMode = '2d';
+
+        this.workerPool = workerPool;
+        this.findBestFormat = findBestFormatFn;
+        this.basisBaseUrl = options.basisBaseUrl ?? DEFAULT_BASIS_BASE_URL;
+
+        this.frames = new globalThis.Map();
+        this.activeFrameKey = null;
+        this.targetFrameKey = null;
+
+        this.currentOpacity = 1.0; 
+        this.isVisible = true; 
+
+        this.repaintTimeout = null;
+
+        // Track the attrib locations used in the last render so onRemove can disable them,
+        // preventing GL state leakage that would break other layers (e.g. radar) after removal.
+        this._lastPosAttrib = -1;
+        this._lastTexCoordAttrib = -1;
+
+        /** Merged layer settings (opacity, colormap overrides, etc.). */
+        this.currentSettings = {};
+    }
+
+    onAdd(map, gl) {
+        this.map = map;
+        this.gl = gl;
+
+        this.initializeWorkers();
+
+        const vertexSource = `
+            attribute vec2 a_pos;
+            attribute vec2 a_texCoord;
+            uniform mat4 u_matrix;
+            uniform vec4 u_uv_transform; 
+            varying vec2 v_texCoord;
+            void main() {
+                gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+                v_texCoord = a_texCoord * u_uv_transform.xy + u_uv_transform.zw;
+            }`;
+
+        const fragmentSource = `
+            precision mediump float;
+            varying vec2 v_texCoord;
+            uniform sampler2D u_texture;
+            uniform sampler2D u_colormap;
+            uniform bool u_is_true_color;
+            uniform bool u_use_colormap;
+            uniform float u_opacity;
+
+            void main() {
+                vec4 texColor = texture2D(u_texture, v_texCoord);
+                vec3 rawColor = texColor.rgb; 
+
+                if (u_is_true_color) {
+                    gl_FragColor = vec4(rawColor, texColor.a * u_opacity);
+                } 
+                else {
+                    float luminance = rawColor.r;
+
+                    if (u_use_colormap) {
+                        float intensity = clamp(luminance, 0.0, 1.0);
+                        vec3 colorMapped = texture2D(u_colormap, vec2(intensity, 0.5)).rgb;
+                        gl_FragColor = vec4(colorMapped, u_opacity);
+                    }
+                    else {
+                        float val = luminance * 1.7;
+
+                        // if (val < 0.001) {
+                        //     discard;
+                        // }
+
+                        val = clamp(val, 0.0, 1.0);
+                        gl_FragColor = vec4(val, val, val, u_opacity);
+                    }
+                }
+            }`;
+
+        this.program = createProgram(gl, vertexSource, fragmentSource);
+
+        this.isTrueColorLocation = gl.getUniformLocation(this.program, "u_is_true_color");
+        this.useColormapLocation = gl.getUniformLocation(this.program, "u_use_colormap");
+        this.colormapSamplerLocation = gl.getUniformLocation(this.program, "u_colormap");
+        this.uvTransformLocation = gl.getUniformLocation(this.program, "u_uv_transform");
+        this.interpolateColormapLocation = gl.getUniformLocation(this.program, "u_interpolate_colormap");
+        this.opacityLocation = gl.getUniformLocation(this.program, "u_opacity");
+
+        this.irColormapTexture = this._generateTextureFromColormapData(
+            gl,
+            DEFAULT_SATELLITE_LONGWAVE_IR_COLORMAP,
+            'IR',
+            true
+        );
+        this.wvColormapTexture = this._generateTextureFromColormapData(
+            gl,
+            DEFAULT_SATELLITE_WATER_VAPOR_COLORMAP,
+            'WV',
+            true
+        );
+    }
+
+    onRemove() {
+        if (this.repaintTimeout) {
+            cancelAnimationFrame(this.repaintTimeout);
+            this.repaintTimeout = null;
+        }
+
+        // Disable any vertex attribute arrays we may have left enabled during the last render.
+        // This is critical: leaving enabled attrib arrays that reference deleted buffers causes
+        // INVALID_OPERATION on subsequent drawArrays/drawElements calls from other layers (e.g. radar).
+        if (this.gl) {
+            if (this._lastPosAttrib >= 0) {
+                this.gl.disableVertexAttribArray(this._lastPosAttrib);
+                this._lastPosAttrib = -1;
+            }
+            if (this._lastTexCoordAttrib >= 0) {
+                this.gl.disableVertexAttribArray(this._lastTexCoordAttrib);
+                this._lastTexCoordAttrib = -1;
+            }
+            // Unbind buffers so nothing else accidentally reads stale bindings.
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+            this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
+        }
+
+        for (const frame of this.frames.values()) {
+            if (frame.tile) {
+                this._destroyTile(frame.tile);
+            }
+        }
+        this.frames.clear();
+
+        if (this.gl && this.program) {
+            this.gl.deleteProgram(this.program);
+        }
+        this.program = null;
+        if (this.gl) {
+            if (this.irColormapTexture) this.gl.deleteTexture(this.irColormapTexture);
+            if (this.wvColormapTexture) this.gl.deleteTexture(this.wvColormapTexture);
+            if (this.userColormapTexture) this.gl.deleteTexture(this.userColormapTexture);
+        }
+        this.irColormapTexture = null;
+        this.wvColormapTexture = null;
+        this.userColormapTexture = null;
+        this._destroyReadoutPipeline();
+    }
+
+    _parseProjectionFromFileName(fileName) {
+        const match = fileName.match(/_proj_([-\d\.eE]+)_([-\d\.eE]+)_([-\d\.eE]+)/);
+        if (match) {
+            const scale = parseFloat(match[3]);
+            return {
+                h: 35786023.0,
+                lon0: -75.0,
+                xOff: parseFloat(match[1]),
+                yOff: parseFloat(match[2]),
+                xScale: scale,
+                yScale: -scale 
+            };
+        }
+        return null;
+    }
+
+    addFrame(supercompressedBuffer, frameKey, fileName) {
+        if (this.frames.has(frameKey)) {
+            return;
+        }
+
+        let meshSubdivisions = 50;
+        let frameProjString = "+proj=geos +h=35786023.0 +lon_0=-75.0 +sweep=x +no_defs";
+        let frameExtent = [...GOES_CONUS_EXTENT_M];
+
+        let isMesoscale = false;
+
+        if (fileName.startsWith('F_') || fileName.includes('MCMIPF') || fileName.includes('CMIPF')) {
+            frameProjString = "+proj=geos +h=35786023.0 +lon_0=-75.0 +sweep=x +no_defs";
+            frameExtent =[-5434894.885056, -5434894.885056, 5434894.885056, 5434894.885056];
+            meshSubdivisions = 100; 
+        } else if (fileName.startsWith('M1_') || fileName.startsWith('M2_') || fileName.includes('MCMIPM') || fileName.includes('CMIPM')) {
+            isMesoscale = true;
+            meshSubdivisions = 30;
+        } 
+
+        const customProj = this._parseProjectionFromFileName(fileName);
+
+        if (isMesoscale && !customProj) {
+            console.warn(
+                '[SatelliteLayer] Mesoscale file name is missing _proj_xOff_yOff_scale (see single-band M1/M2 keys). ' +
+                    'RGB pipeline should use the same segment as C## products for correct placement:',
+                fileName
+            );
+        }
+
+        const isTrueColor = fileName.includes('_truecolor_') || fileName.includes('_geocolor_') || fileName.includes('_firetemperature_') || fileName.includes('_dust_') || fileName.includes('_simplewatervapor_') || fileName.includes('_ntmicro_') || fileName.includes('_daycloudphase_')  || fileName.includes('_daylandcloudfire_') || fileName.includes('_airmass_') || fileName.includes('_sandwich_');
+
+        let colormapType = 'none';
+        if (fileName.includes('C13') || fileName.includes('C14') || fileName.includes('C15') || fileName.includes('C16')) {
+            colormapType = 'ir';
+        } else if (fileName.includes('C08') || fileName.includes('C09') || fileName.includes('C10')) {
+            colormapType = 'wv';
+        }
+        
+        const brightnessMultiplier = 1.0; 
+        
+        const frame = {
+            supercompressedBuffer,
+            isTrueColor,
+            colormapType,
+            brightnessMultiplier,
+            ktx2Metadata: null,
+            fullTranscodedData: null,
+            tile: null,
+            ktx2MetadataPromise: null,
+            customProj,
+            isMesoscale,
+            meshSubdivisions,
+            projString: frameProjString,
+            extent: frameExtent,
+            sourceFileName: fileName,
+        };
+
+        let resolvePromise;
+        frame.ktx2MetadataPromise = new Promise(resolve => { resolvePromise = resolve; });
+        frame.ktx2MetadataPromise.resolve = resolvePromise;
+
+        this.frames.set(frameKey, frame);
+        
+        if (this.targetFrameKey === frameKey) {
+            this.setActiveFrame(frameKey);
+        } else if (this.targetFrameKey === null && this.activeFrameKey === null) {
+            this.setActiveFrame(frameKey);
+        }
+        
+        this.workerPool.execute({
+            type: 'INITIAL_LOAD',
+            ktx2Buffer: supercompressedBuffer,
+            downsampleRate: 1,
+            frameKey,
+            basisBaseUrl: this.basisBaseUrl,
+        })
+        .then(result => {
+            if (!this.frames.has(frameKey)) {
+                return;
+            }
+
+            frame.supercompressedBuffer = null;
+
+            if (result.error || !result.ktx2Metadata) {
+                console.warn(`[ShaderManager] Worker failed for frame ${frameKey}:`, result.error);
+                frame.ktx2Metadata = null; 
+                frame.ktx2MetadataPromise.resolve(null);
+                return; 
+            }
+            
+            const { ktx2Metadata, fullTranscodedData } = result;
+            const { fullWidth, fullHeight } = ktx2Metadata;
+    
+            if (frame.customProj) {
+                const { h, lon0, xOff, yOff, xScale, yScale } = frame.customProj;
+                frame.projString = `+proj=geos +h=${h} +lon_0=${lon0} +sweep=x +no_defs`;
+
+                const xMinRad = xOff;
+                const xMaxRad = xOff + (fullWidth * xScale);
+                const yMinRad = yOff + (fullHeight * yScale); 
+                const yMaxRad = yOff;
+
+                frame.extent =[
+                    Math.min(xMinRad, xMaxRad) * h,
+                    Math.min(yMinRad, yMaxRad) * h,
+                    Math.max(xMinRad, xMaxRad) * h,
+                    Math.max(yMinRad, yMaxRad) * h
+                ];
+            }
+            
+            const s3tc = this.gl.getExtension('WEBGL_compressed_texture_s3tc');
+            const etc1 = this.gl.getExtension('WEBGL_compressed_texture_etc1');
+            const astc = this.gl.getExtension('WEBGL_compressed_texture_astc');
+            const bptc = this.gl.getExtension('EXT_texture_compression_bptc');
+
+            const formatInfo = ktx2Metadata.formatInfo;
+            switch (formatInfo.webglFormatName) {
+                case 'COMPRESSED_RGBA_ASTC_4x4_KHR':
+                    if (astc) formatInfo.webglFormatEnum = astc.COMPRESSED_RGBA_ASTC_4x4_KHR;
+                    break;
+                case 'COMPRESSED_RGBA_BPTC_UNORM_EXT':
+                    if (bptc) formatInfo.webglFormatEnum = bptc.COMPRESSED_RGBA_BPTC_UNORM_EXT;
+                    break;
+                case 'COMPRESSED_RGBA_S3TC_DXT5_EXT':
+                    if (s3tc) formatInfo.webglFormatEnum = s3tc.COMPRESSED_RGBA_S3TC_DXT5_EXT;
+                    break;
+                case 'COMPRESSED_RGB_S3TC_DXT1_EXT':
+                    if (s3tc) formatInfo.webglFormatEnum = s3tc.COMPRESSED_RGB_S3TC_DXT1_EXT;
+                    break;
+                case 'COMPRESSED_RGB_ETC1_WEBGL':
+                    if (etc1) formatInfo.webglFormatEnum = etc1.COMPRESSED_RGB_ETC1_WEBGL;
+                    break;
+                case 'RGBA':
+                    formatInfo.webglFormatEnum = this.gl.RGBA;
+                    formatInfo.webglTypeEnum = this.gl.UNSIGNED_BYTE;
+                    break;
+                default:
+                    console.error("Could not resolve WebGL format from worker string:", formatInfo.webglFormatName);
+                    frame.ktx2Metadata = null; 
+                    frame.ktx2MetadataPromise.resolve(null);
+                    return; 
+            }
+
+            if (!formatInfo.webglFormatEnum) {
+                console.error(`Format ${formatInfo.webglFormatName} is not supported by this GPU.`);
+                frame.ktx2Metadata = null;
+                frame.ktx2MetadataPromise.resolve(null);
+                return;
+            }
+
+            frame.ktx2Metadata = ktx2Metadata;
+            frame.fullTranscodedData = fullTranscodedData;
+            frame.ktx2MetadataPromise.resolve(ktx2Metadata);
+
+            const texture = this._createTexture(fullTranscodedData, ktx2Metadata);
+            if (texture) {
+                const { vertices, indices } = this._createMeshGeometry(
+                    frame.projString, 
+                    frame.extent, 
+                    frame.meshSubdivisions
+                );
+                
+                const vertexBuffer = this.gl.createBuffer();
+                this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
+                this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+                const indexBuffer = this.gl.createBuffer();
+                this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+                this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, indices, this.gl.STATIC_DRAW);
+
+                frame.tile = {
+                    vertexBuffer,
+                    indexBuffer,
+                    texture: texture,
+                    indexCount: indices.length,
+                    uvTransform:[1.0, 1.0, 0.0, 0.0] 
+                };
+            }
+
+            this.scheduleRepaint();
+        })
+        .catch((error) => {
+            if (!this.frames.has(frameKey)) {
+                return;
+            }
+            console.error(`[ShaderManager] Worker promise REJECTED for INITIAL_LOAD of frame ${frameKey}:`, error);
+        });
+    }
+
+    _ensureReadoutPipeline() {
+        const gl = this.gl;
+        if (!gl || this._readoutProgram) return;
+
+        const vs = `attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0.0,1.0); }`;
+        const fs = `precision mediump float;
+uniform sampler2D u_tex;
+uniform vec2 u_uv;
+void main(){
+  float L = texture2D(u_tex, u_uv).r;
+  gl_FragColor = vec4(L, L, L, 1.0);
+}`;
+        this._readoutProgram = createProgram(gl, vs, fs);
+        this._readoutUuv = gl.getUniformLocation(this._readoutProgram, 'u_uv');
+        this._readoutUtex = gl.getUniformLocation(this._readoutProgram, 'u_tex');
+
+        this._readoutTriBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._readoutTriBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        this._readoutTex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this._readoutTex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+        this._readoutFbo = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._readoutFbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._readoutTex, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+
+    _destroyReadoutPipeline() {
+        const gl = this.gl;
+        if (!gl) return;
+        if (this._readoutProgram) {
+            gl.deleteProgram(this._readoutProgram);
+            this._readoutProgram = null;
+        }
+        if (this._readoutTriBuffer) {
+            gl.deleteBuffer(this._readoutTriBuffer);
+            this._readoutTriBuffer = null;
+        }
+        if (this._readoutTex) {
+            gl.deleteTexture(this._readoutTex);
+            this._readoutTex = null;
+        }
+        if (this._readoutFbo) {
+            gl.deleteFramebuffer(this._readoutFbo);
+            this._readoutFbo = null;
+        }
+    }
+
+    /** Sample active frame texture at UV (0–1). Uses a 1×1 FBO + readPixels so compressed GPU textures work. */
+    _sampleLuminanceAtUv(tu, tv) {
+        const gl = this.gl;
+        if (!gl || !this._readoutProgram) return null;
+        const frame = this.frames.get(this.activeFrameKey);
+        if (!frame?.tile?.texture) return null;
+
+        const prevFb = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+        const prevVp = gl.getParameter(gl.VIEWPORT);
+        const prevProg = gl.getParameter(gl.CURRENT_PROGRAM);
+        const prevActiveUnit = gl.getParameter(gl.ACTIVE_TEXTURE);
+        gl.activeTexture(gl.TEXTURE0);
+        const prevTex0 = gl.getParameter(gl.TEXTURE_BINDING_2D);
+
+        try {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._readoutFbo);
+            gl.viewport(0, 0, 1, 1);
+            gl.useProgram(this._readoutProgram);
+            gl.disable(gl.DEPTH_TEST);
+            gl.disable(gl.BLEND);
+            gl.colorMask(true, true, true, true);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, frame.tile.texture);
+            gl.uniform1i(this._readoutUtex, 0);
+            gl.uniform2f(this._readoutUuv, tu, tv);
+
+            const posLoc = gl.getAttribLocation(this._readoutProgram, 'a_pos');
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._readoutTriBuffer);
+            gl.enableVertexAttribArray(posLoc);
+            gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+            gl.disableVertexAttribArray(posLoc);
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+            const pix = new Uint8Array(4);
+            gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pix);
+            return pix[0] / 255;
+        } finally {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, prevFb);
+            gl.viewport(prevVp[0], prevVp[1], prevVp[2], prevVp[3]);
+            gl.useProgram(prevProg);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, prevTex0);
+            gl.activeTexture(prevActiveUnit);
+        }
+    }
+
+    getValueAtLatLon(lat, lon) {
+        if (!this.gl || !this.activeFrameKey || !this.frames.has(this.activeFrameKey)) return null;
+        if (!this.isVisible || (this.currentOpacity ?? 0) <= 0) return null;
+
+        const frame = this.frames.get(this.activeFrameKey);
+        if (!frame.tile?.texture || !frame.ktx2Metadata) return null;
+
+        let projX;
+        let projY;
+        try {
+            [projX, projY] = proj4(wgs84, frame.projString, [lon, lat]);
+        } catch {
+            return null;
+        }
+
+        const [xmin, ymin, xmax, ymax] = frame.extent;
+        if (!Number.isFinite(projX) || !Number.isFinite(projY)) return null;
+
+        const pad = 1e-3 * Math.max(xmax - xmin, ymax - ymin, 1);
+        if (projX < xmin - pad || projX > xmax + pad || projY < ymin - pad || projY > ymax + pad) return null;
+
+        let u = (projX - xmin) / (xmax - xmin);
+        let v = (ymax - projY) / (ymax - ymin);
+        u = Math.min(1, Math.max(0, u));
+        v = Math.min(1, Math.max(0, v));
+
+        const t = frame.tile.uvTransform || [1, 1, 0, 0];
+        const tu = u * t[0] + t[2];
+        const tv = v * t[1] + t[3];
+        if (tu < -1e-3 || tu > 1 + 1e-3 || tv < -1e-3 || tv > 1 + 1e-3) return null;
+
+        this._ensureReadoutPipeline();
+        const lum = this._sampleLuminanceAtUv(tu, tv);
+        if (lum == null || !Number.isFinite(lum)) return null;
+
+        return {
+            isTrueColor: frame.isTrueColor,
+            colormapType: frame.colormapType,
+            luminance: lum,
+            sourceFileName: frame.sourceFileName,
+        };
+    }
+
+    removeFrame(frameKey) {
+        if (!this.frames.has(frameKey)) {
+            return;
+        }
+
+        const frame = this.frames.get(frameKey);
+
+        if (frame.tile) {
+            this._destroyTile(frame.tile);
+        }
+
+        this.workerPool.broadcast({
+            type: 'CLEANUP_FRAME',
+            frameKey: frameKey
+        });
+        
+        this.frames.delete(frameKey);
+
+        if (this.activeFrameKey === frameKey) {
+            this.activeFrameKey = null;
+        }
+
+        this.map.triggerRepaint();
+    }
+
+    _updateTextureFiltering() {
+        const gl = this.gl;
+        const filterMode = this.currentSmoothing === 1 ? gl.LINEAR : gl.NEAREST;
+        
+        for (const frame of this.frames.values()) {
+            if (frame.tile && frame.tile.texture) {
+                gl.bindTexture(gl.TEXTURE_2D, frame.tile.texture);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
+            }
+        }
+        
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+
+    updateLayerSettings(settings) {
+        this.currentSettings = { ...this.currentSettings, ...settings };
+
+        const s = this.currentSettings;
+        const oldSmoothing = this.currentSmoothing;
+
+        if (s.fillSmoothing !== undefined) {
+            this.currentSmoothing = s.fillSmoothing;
+        }
+
+        if (s.satelliteOpacity !== undefined) {
+            this.currentOpacity = s.satelliteOpacity;
+        }
+
+        if (s.satelliteVisibility !== undefined) {
+            this.isVisible = s.satelliteVisibility;
+        }
+
+        if (s.interpolateColormap !== undefined) {
+            this.interpolateColormap = s.interpolateColormap;
+        }
+
+        if (oldSmoothing !== this.currentSmoothing) {
+            this._updateTextureFiltering();
+        }
+
+        this._applySatelliteColormapFromSettings();
+
+        this.map.triggerRepaint();
+    }
+
+    initializeWorkers() {
+        const gl = this.gl;
+        const getExtension = (name) => gl.getExtension(name) || gl.getExtension(`WEBKIT_${name}`) || gl.getExtension(`MOZ_${name}`);
+
+        const supportedFormats = {
+            s3tc: !!getExtension('WEBGL_compressed_texture_s3tc'),
+            etc1: !!getExtension('WEBGL_compressed_texture_etc1'),
+            astc: !!getExtension('WEBGL_compressed_texture_astc'),
+            bc7: !!getExtension('EXT_texture_compression_bptc'),
+            rgtc: !!getExtension('EXT_texture_compression_rgtc'),
+        };
+
+        const msg = {
+            type: 'INIT_WORKER',
+            supportedFormats,
+            basisBaseUrl: this.basisBaseUrl,
+        };
+
+        // Every Worker instance must receive INIT (including replacements after errors). broadcast() alone
+        // missed workers created in WorkerPool._replaceWorker → Basis saw undefined transcoder enums.
+        this.workerPool.setWorkerBootstrap((worker) => {
+            worker.postMessage(msg);
+        });
+    }
+
+    scheduleRepaint() {
+        if (this.repaintTimeout) return;
+        this.repaintTimeout = requestAnimationFrame(() => {
+            this.map.triggerRepaint();
+            this.repaintTimeout = null;
+        });
+    }
+
+    setActiveFrame(frameKey) {
+        this.targetFrameKey = frameKey;
+
+        if (this.activeFrameKey === frameKey) {
+            return; 
+        }
+
+        if (!this.frames.has(frameKey)) {
+            // Avoid showing a stale frame while the new timestep / product is still loading or decoding.
+            this.activeFrameKey = null;
+            this.scheduleRepaint();
+            return;
+        }
+        this.activeFrameKey = frameKey;
+
+        this._applySatelliteColormapFromSettings();
+
+        this.scheduleRepaint();
+    }
+
+    /**
+     * Builds `userColormapTexture` from `currentSettings` and the active frame’s IR vs WV kind.
+     * Prefer `satelliteColormapIR` / `satelliteColormapWV` when set; otherwise `satelliteColormap` (legacy one array).
+     */
+    _applySatelliteColormapFromSettings() {
+        const gl = this.gl;
+        if (!gl) return;
+
+        const settings = this.currentSettings || {};
+        const activeFrame = this.activeFrameKey ? this.frames.get(this.activeFrameKey) : null;
+        const ct = activeFrame?.colormapType;
+
+        let stops = null;
+        let channelType = 'IR';
+
+        if (ct === 'wv' && settings.satelliteColormapWV?.length > 0) {
+            stops = settings.satelliteColormapWV;
+            channelType = 'WV';
+        } else if (ct === 'ir' && settings.satelliteColormapIR?.length > 0) {
+            stops = settings.satelliteColormapIR;
+            channelType = 'IR';
+        } else if (settings.satelliteColormap?.length > 0) {
+            stops = settings.satelliteColormap;
+            channelType = ct === 'wv' ? 'WV' : 'IR';
+        }
+
+        const shouldInterpolate = settings.interpolateColormap !== false;
+        const cacheKey = JSON.stringify({ stops, channelType, iv: shouldInterpolate, ct });
+
+        if (cacheKey === this.lastColormapCacheKey) {
+            return;
+        }
+        this.lastColormapCacheKey = cacheKey;
+
+        if (this.userColormapTexture) {
+            gl.deleteTexture(this.userColormapTexture);
+            this.userColormapTexture = null;
+        }
+
+        if (stops?.length) {
+            this.userColormapTexture = this._generateTextureFromColormapData(
+                gl,
+                stops,
+                channelType,
+                shouldInterpolate
+            );
+        }
+    }
+
+    _createTexture(data, ktx2Metadata) {
+        const gl = this.gl;
+        const { fullWidth, fullHeight, formatInfo } = ktx2Metadata;
+
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        const filterMode = this.currentSmoothing === 1 ? gl.LINEAR : gl.NEAREST;
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
+        
+        if (formatInfo.isCompressed) {
+            gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+            gl.compressedTexImage2D(
+                gl.TEXTURE_2D,
+                0, 
+                formatInfo.webglFormatEnum,
+                fullWidth,
+                fullHeight,
+                0, 
+                data
+            );
+        } else {
+            gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4); 
+            gl.texImage2D(
+                gl.TEXTURE_2D,
+                0,
+                formatInfo.webglFormatEnum, 
+                fullWidth,
+                fullHeight,
+                0,
+                formatInfo.webglFormatEnum,
+                formatInfo.webglTypeEnum,
+                data
+            );
+        }
+        
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+    
+    _destroyTile(tile) {
+        if (!tile) return;
+        
+        if (tile.texture) {
+            this.gl.deleteTexture(tile.texture);
+        }
+        if (tile.vertexBuffer) {
+            this.gl.deleteBuffer(tile.vertexBuffer);
+        }
+        if (tile.indexBuffer) {
+            this.gl.deleteBuffer(tile.indexBuffer);
+        }
+    }
+
+    _createMeshGeometry(projectionString, extent, subdivisions = 50) {
+        const[x_min, y_min, x_max, y_max] = extent;
+        const vertices = [];
+        const indices =[];
+
+        for (let row = 0; row <= subdivisions; row++) {
+            for (let col = 0; col <= subdivisions; col++) {
+                const u = col / subdivisions;
+                const v = row / subdivisions;
+
+                const proj_x = x_min + u * (x_max - x_min);
+                const proj_y = y_max - v * (y_max - y_min); 
+
+                try {
+                    const [lon, lat] = proj4(projectionString, wgs84,[proj_x, proj_y]);
+                    if (Math.abs(lon) > 180 || Math.abs(lat) > 90) throw new Error("Out of bounds");
+                    const mercator = mapboxgl.MercatorCoordinate.fromLngLat({ lon, lat }, 0);
+                    vertices.push(mercator.x, mercator.y, u, v);
+                } catch (e) {
+                    vertices.push(NaN, NaN, NaN, NaN);
+                }
+            }
+        }
+
+        for (let row = 0; row < subdivisions; row++) {
+            for (let col = 0; col < subdivisions; col++) {
+                const i00 = row * (subdivisions + 1) + col;
+                const i10 = i00 + 1;
+                const i01 = (row + 1) * (subdivisions + 1) + col;
+                const i11 = i01 + 1;
+                
+                if (!isNaN(vertices[i00 * 4]) && !isNaN(vertices[i10 * 4]) && !isNaN(vertices[i01 * 4]) && !isNaN(vertices[i11 * 4])) {
+                    indices.push(i00, i01, i10);
+                    indices.push(i10, i01, i11);
+                }
+            }
+        }
+        
+        return {
+            vertices: new Float32Array(vertices),
+            indices: new Uint32Array(indices)
+        };
+    }
+
+    render(gl, matrix) {
+        if (!this.activeFrameKey || !this.frames.has(this.activeFrameKey)) {
+            return;
+        }
+
+        const activeFrame = this.frames.get(this.activeFrameKey);
+        
+        if (!activeFrame.tile) {
+            return;
+        }
+        
+        const effectiveOpacity = this.isVisible ? (this.currentOpacity ?? 1.0) : 0.0;
+        
+        if (effectiveOpacity === 0) {
+            return;
+        }
+        
+        gl.useProgram(this.program);
+        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
+
+        gl.uniform1i(this.isTrueColorLocation, activeFrame.isTrueColor ? 1 : 0);
+        
+        let useColormap = activeFrame.colormapType !== 'none';
+        
+        if (this.userColormapTexture) {
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, this.userColormapTexture);
+            gl.uniform1i(this.colormapSamplerLocation, 1);
+            useColormap = true;
+        } else if (activeFrame.colormapType !== 'none') {
+            gl.activeTexture(gl.TEXTURE1);
+            if (activeFrame.colormapType === 'wv') {
+                gl.bindTexture(gl.TEXTURE_2D, this.wvColormapTexture);
+            } else {
+                gl.bindTexture(gl.TEXTURE_2D, this.irColormapTexture);
+            }
+            gl.uniform1i(this.colormapSamplerLocation, 1);
+        }
+
+        gl.uniform1i(this.useColormapLocation, useColormap ? 1 : 0);
+        gl.uniform1i(this.isTrueColorLocation, activeFrame.isTrueColor ? 1 : 0);
+        
+        const shouldInterpolate = this.currentSettings?.interpolateColormap !== false;
+        gl.uniform1i(this.interpolateColormapLocation, shouldInterpolate ? 1 : 0);
+        
+        const posAttrib = gl.getAttribLocation(this.program, "a_pos");
+        const texCoordAttrib = gl.getAttribLocation(this.program, "a_texCoord");
+
+        // Remember these for onRemove cleanup in case the layer is torn down before next render.
+        this._lastPosAttrib = posAttrib;
+        this._lastTexCoordAttrib = texCoordAttrib;
+
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.disable(gl.DEPTH_TEST);
+
+        this.drawTile(activeFrame.tile, posAttrib, texCoordAttrib, effectiveOpacity);
+
+        // Restore vertex attribute array state. Mapbox GL does NOT automatically reset these
+        // between custom layer renders, so leaving them enabled causes INVALID_OPERATION when
+        // the layer is removed (buffers deleted) and another layer (e.g. radar) calls drawArrays.
+        gl.disableVertexAttribArray(posAttrib);
+        gl.disableVertexAttribArray(texCoordAttrib);
+
+        // Unbind buffers and textures to leave GL in a clean state for subsequent layers.
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+
+    drawTile(tile, posAttrib, texCoordAttrib, opacity = 1.0) {
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, tile.vertexBuffer);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tile.indexBuffer);
+        
+        gl.enableVertexAttribArray(posAttrib);
+        gl.vertexAttribPointer(posAttrib, 2, gl.FLOAT, false, 16, 0);
+
+        gl.enableVertexAttribArray(texCoordAttrib);
+        gl.vertexAttribPointer(texCoordAttrib, 2, gl.FLOAT, false, 16, 8);
+        
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, tile.texture);
+        gl.uniform1i(gl.getUniformLocation(this.program, "u_texture"), 0);
+
+        const transform = tile.uvTransform ||[1, 1, 0, 0];
+        gl.uniform4fv(this.uvTransformLocation, transform);
+        
+        const opacityLocation = gl.getUniformLocation(this.program, "u_opacity");
+        gl.uniform1f(opacityLocation, opacity);
+
+        gl.drawElements(gl.TRIANGLES, tile.indexCount, gl.UNSIGNED_INT, 0);
+    }
+    
+    _generateTextureFromColormapData(gl, colormapData, channelType = 'IR', interpolate = true) {
+        if (!colormapData || colormapData.length < 2) {
+            console.log('Invalid colormap data, returning null');
+            return null;
+        }
+
+        const width = 256;
+        const height = 1;
+        const data = new Uint8Array(width * height * 4);
+        
+        const range = RANGES[channelType] || RANGES.IR;
+
+        const parsedStops =[];
+        for (let i = 0; i < colormapData.length; i += 2) {
+            const normVal = colormapData[i]; 
+            const hex = colormapData[i + 1];
+            
+            const r = parseInt(hex.slice(1, 3), 16);
+            const g = parseInt(hex.slice(3, 5), 16);
+            const b = parseInt(hex.slice(5, 7), 16);
+            
+            let texCoord;
+            let kelvin;
+            let celsius;
+            
+            if (channelType === 'VIS') {
+                texCoord = normVal / 100;
+                kelvin = null;
+                celsius = null;
+            } else {
+                const fraction = normVal / 100;
+                kelvin = range.maxK - (fraction * (range.maxK - range.minK));
+                celsius = kelvin - 273.15;
+                texCoord = (range.maxK - kelvin) / (range.maxK - range.minK);
+            }
+            parsedStops.push({ texCoord, color: [r, g, b], normVal, kelvin, celsius });
+        }
+
+        parsedStops.sort((a, b) => a.texCoord - b.texCoord);
+
+        for (let i = 0; i < width; i++) {
+            const t = i / (width - 1);
+            
+            let r, g, b;
+            
+            if (interpolate) {
+                let c1 = parsedStops[0];
+                let c2 = parsedStops[parsedStops.length - 1];
+
+                for (let j = 0; j < parsedStops.length - 1; j++) {
+                    if (t >= parsedStops[j].texCoord && t <= parsedStops[j + 1].texCoord) {
+                        c1 = parsedStops[j];
+                        c2 = parsedStops[j + 1];
+                        break;
+                    }
+                }
+
+                const segmentRange = c2.texCoord - c1.texCoord;
+
+                if (segmentRange < 0.00001) {
+                    r = c1.color[0]; 
+                    g = c1.color[1]; 
+                    b = c1.color[2];
+                } else {
+                    const f = (t - c1.texCoord) / segmentRange;
+                    r = Math.round(c1.color[0] + f * (c2.color[0] - c1.color[0]));
+                    g = Math.round(c1.color[1] + f * (c2.color[1] - c1.color[1]));
+                    b = Math.round(c1.color[2] + f * (c2.color[2] - c1.color[2]));
+                }
+            } else {
+                let chosenStop = parsedStops[0];
+                
+                for (let j = 0; j < parsedStops.length; j++) {
+                    if (t >= parsedStops[j].texCoord) {
+                        chosenStop = parsedStops[j];
+                    } else {
+                        break;
+                    }
+                }
+                
+                r = chosenStop.color[0];
+                g = chosenStop.color[1];
+                b = chosenStop.color[2];
+            }
+
+            const offset = i * 4;
+            data[offset] = r;
+            data[offset + 1] = g;
+            data[offset + 2] = b;
+            data[offset + 3] = 255;
+        }
+
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+        
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        
+        const filterMode = interpolate ? gl.LINEAR : gl.NEAREST;
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
+
+        return texture;
+    }
+}