JPEG-compressed Cloud Optimized GeoTIFF (COG) displays incorrectly

Describe the bug When displaying JPEG-compressed Cloud Optimized GeoTIFF it seems that the RGB channel ordering is wrong. I’m guessing it displays BGR instead of RGB for JPEG-compressed COGs.

Openlayers COG: Windows Gallery ( or any other TIFF-viewer, QGIS etc. )

To Reproduce Steps to reproduce the behavior:

1. Upload any JPEG-compressed COG to say an S3-bucket, and use the COG example in the examples list.
2. See that the RGB ordering is wrong.

Expected behavior Expected behavior is that the RGB channels are ordered correct.

Example Data:

S3-COG: https://tmp-asger-public.s3.eu-central-1.amazonaws.com/jpegtest.cog.tif

Produced with:

gdal_translate -of cog -co blocksize=1024 -co compress=jpeg -co quality=80 -co overview_resampling=cubic -co overviews=IGNORE_EXISTING -co bigtiff=no -mo TIFFTAG_COPYRIGHT="Styrelsen for Dataforsyning og Effektivisering" test.vrt jpegtest.cog.tif

Example code (cog.js)

import GeoTIFF from '../src/ol/source/GeoTIFF.js';
import Map from '../src/ol/Map.js';
import Projection from '../src/ol/proj/Projection.js';
import TileLayer from '../src/ol/layer/WebGLTile.js';
import View from '../src/ol/View.js';
import proj4 from 'proj4';
import {getCenter} from '../src/ol/extent.js';
import {register} from '../src/ol/proj/proj4.js';

proj4.defs('EPSG:25832', '+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs');
register(proj4);

const projection = new Projection({
  code: 'EPSG:25832',
  extent: [265948.8191, 6421521.2254, 677786.3629, 7288831.7014]
});
const sourceExtent = [721707.437, 6190421.675,722266.254, 6190821.675];
let cog_layer = new TileLayer({
  source: new GeoTIFF({
    sources: [
      {
        url: 'https://tmp-asger-public.s3.eu-central-1.amazonaws.com/jpegtest.cog.tif',
      },
    ],
  }),
  extent: sourceExtent,
})
const map = new Map({
  target: 'map',
  layers: [
    cog_layer
  ],
  view: new View({
    center: getCenter(sourceExtent),
    extent: sourceExtent,
    zoom: 1,
    projection: projection,
  }),
});

[ahocevar]

@NicolaiMogensen Thanks for reporting this. We are aware of the problem, and we are waiting for a change in GeoTIFF.js to fix it. Currently we are using the readRasters() function. For GeoTIFFs like in your example, we would need to use readRGB() instead, but that method currently can only return interleaved data. But we need non-interleaved data.

See https://github.com/openlayers/openlayers/pull/12008#discussion_r687741665 and the two following comments.

@constantinius, were you able to think about giving readRGB() an option to return non-interleaved data?

[ahocevar]

I created a codesandbox with the above example: https://codesandbox.io/s/cog-forked-r1lui?file=/main.js