WebGL Module Setup

index.js

const webglProcessing = new WebGLModule({
    // htmlControlsId: "div-id",  //if set, shader realtime controls are available 
    // htmlShaderPartHeader: callback, //function that handles HTML rendering for each layer
    // debug: t/f,
    // for other control options, see WebGLModule class
});

const seaGL = new OpenSeadragon.BridgeGL(viewer, webglProcessing, true); //true to enable cache, false to disable
seaGL.addVisualisation({
    //here you want to add a visualization with compulsory member "shaders" - object that defines what postprocessing is applied
    //note that for vanilla OSD protocols, you will not use more than first dataReferences index, example:
    "name": "My first postprocessing",
    "shaders": {
        "id_1": {
            "name": "Render with heatmap",
            "type": "heatmap", 
            "visible": "1", 
            "dataSources": [0], //always 0 with vanilla OSD
            "fixed": false,
            "params": {} //let defaults
        }
    }
});


//we access index 0 in dataSources, so we add URL string to the data we render, this can be anything,
//it is not internally used, it just tells us what data is being requested in what order if we have defined
//multiple but did not access some, this does not happen in our case so we do not use it, newer version
//will not require you to specify it if you do not need it
seaGL.addData('--not--used--');

//requires open event to be fired on OSD, if not, fire it manually
seaGL.initBeforeOpen();

//or after open event:
// seaGL.loadShaders(0, () => {
//     seaGL.initAfterOpen();
// });

//to attach TiledImage to the renderer, simply call (once TiledImage at given index exists)
seaGL.addLayer( index );