How to get original pixel color before shader

Question

I have an ImageLayer and a RasterSource which uses a shader to manipulate the colors of the image.

While listening to the map's pointermove I get the color of the pixel under the pointer which is the color manipulated by the shader.

How can I get the original color before it was manipulated by the shader?

const extent = [0, 0, 1024, 968]; // the image extent in pixels.
const projection = new Projection({
    code: 'xkcd-image',
    units: 'pixels',
    extent: extent,
});

let staticImage = new Static({ // from 'ol/source/ImageStatic'
  attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
  url: "./assets/map.png",
  projection: projection,
  imageExtent: extent
});

let imageLayer = new ImageLayer({ // from 'ol/layer/Image'
  source: new RasterSource({
    sources: [staticImage],
    operation: function (pixels, data) {
      let p = pixels[0];
      let grayscale = (p[0] + p[1] + p[2]) / 3;
      p[0] = grayscale;
      p[1] = grayscale;
      p[2] = grayscale;
      return p;
    }
  })
});

let map; // Map from 'ol'
map.on('pointermove', (evt) => {
    let pixel = evt.pixel;
    let color = imageLayer.getRenderer().getDataAtPixel(pixel, evt.framestate, 1);
    // color is the one manipulated by the shader
});

More code here:
https://codesandbox.io/s/raster-original-pixel-3mejh9?file=/main.js
Note: because of security restrictions I've had to comment out the shader code which turns the colors gray

Which was adapted from this example:
https://openlayers.org/en/latest/examples/static-image.html

Answer 1

I found a workaround by adding a duplicate RasterLayer with a no-op operation. The trick is to add the layer just after the color manipulated layer, but with an opacity of 0.005 (apparently the lowest possible value) so it's rendered but you don't see it. Then combine the grey color's alpha with the original color's RGB values:

let noopLayer = new ImageLayer({
    opacity: 0.005,
    source: new RasterSource({
        sources: [
            staticImage
        ],
        operation: function (pixels, data) {
            let p = pixels[0];
            return p;
        },
    }),
});

const map = new Map({
    layers: [
        rasterLayer,
        noopLayer,
    ],
    target: 'map',
    view: new View({
        projection: projection,
        center: getCenter(extent),
        zoom: 2,
        maxZoom: 8,
    }),
});

map.on('pointermove', (evt) => {
    const pixel = evt.pixel;
    let grey = rasterLayer.getRenderer().getDataAtPixel(pixel, evt.framestate, 1);
    let noop = noopLayer.getRenderer().getDataAtPixel(pixel, evt.framestate, 1);

    if (grey != null) {
        // [228, 228, 228, 255]
        console.log('grey:', grey[0], grey[1], grey[2], grey[3]);
        // [255, 255, 170, 3]
        console.log('noop:', noop[0], noop[1], noop[2], noop[3]);
        // [255, 255, 170, 255]
        console.log('original:', noop[0], noop[1], noop[2], grey[3]);
    }
});