Failing to load COG as tiles with CDN OpenLayers?

I have a 250 MB, 9 band Cloud Optimized GeoTIFF in an Azure Container which I am trying to retrieve overviews from to display in a browser with CDN OpenLayers, but I keep running in errors with every permutation I've tried.

I've validated the COG using this GDAL referenced script.

My HTML tags for loading the CDN version of OpenLayers look like

 <script src="https://cdn.jsdelivr.net/npm/geotiff"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script> 

My JavaScript looks like:

 const tiffLayer = new ol.layer.WebGLTile({ source: new ol.source.GeoTIFF({ sources: [{ url: '/cog/test.tif/', // This URL calls the Django view to serve the COG overviews: true, }], }) }); const map = new ol.Map({ target: 'map', layers: [ baseLayer, tiffLayer ], view: new ol.View({ projection: 'EPSG:3857', center: ol.proj.fromLonLat([-70.2980, 41.7779]), // Adjust the center based on the COG location zoom: 10 }) }); 

How can I quickly load overviews from the COG into the browser?

After @user30184's comments, I reprocessed the COG using:

rio cogeo create --zoom-level 19 --overview-resampling cubic -w -b 5,3,2 test.tif test2.tif 

Note that the COG is now three bands, RGB. Although I used the COG example above, I thought trying the COG Blob option might work and used this example. My code now looks like:

 fetch('/cog/test2.tif') .then((response) => response.blob()) .then((blob) => { const source = new ol.source.GeoTIFF({ sources: [{ blob: blob, overviews: true, }], convertToRGB: true, }); const baseLayer = new ol.layer.Tile({ source: new ol.source.OSM(), }); const map = new ol.Map({ target: 'map', layers: [ baseLayer, new ol.layer.WebGLTile({ source: source, }), ], view: new ol.View({ center: ol.proj.fromLonLat([-70.2980, 41.7779]), zoom: 10 }) }); }); 

While this plots the COG over an OSM baselayer, the COG is a solid black box although I've confirmed, in ArcGIS Pro, that the image isn't entirely black. Also, it seems as if the entire image is being retrieved rater than just the tiled overviews.

How can I get the image to display the colors correctly and read the overviews as tiles?