Multiple Texture Type Errors

[ilan-gold]

Background

In the process of going through @kylebarron's suggestions for viv, I have run into an issue. Specifically, I am trying to make a layer that has both a sampler2D and a usampler2D and it seems to be very fickle. I am fetching an image via loadImage from loaders.gl which serves as the colormap texture, sampler2D, to map the greyscale values of a usampler2D with uint16 datatype. The code for the layer is here. If this isn't a bug and/or no one wants to try to go through our code for the layer, is there any indication from the errors of what is going wrong? Judging by looking up the errors online, it seems like something in the luma.gl codebase.

I have made a reproducible example that does render without warning (unlike the Viv branch I link to); however, when you set luma.log.priority=2, it then does not render and gives the same error.

Actual Result

Nothing renders when you select "viridis" from "Additive Color Mapping" after starting the Viv demo and this error comes out as a warning in Chrome:

[.WebGL-0x7fd02196a600]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Texture bound to texture unit 0 with internal format GL_RGBA is not compatible with sampler type GL_UNSIGNED_INT_SAMPLER_2D

After setting luma.log.priority=2 in Chrome (nothing appears in Firefox, and the issue is contained to WebGL2):

deck: error during update of XRLayer({id: 'XRLayer-32768-32768-65536-0-Tiled-Image-ome-tiff-#detail#-1-0--6'}) Error: Error validating: Validation Failed: Sampler error:
  Samplers of different types use the same texture image unit.
   - or -
  A sampler's texture unit is out of range (greater than max allowed or negative).
    at Program._compileAndLink (program.js:369)
    at Program.initialize (program.js:79)
    at new Program (program.js:39)
    at ProgramManager.get (program-manager.js:163)
    at Model._checkProgram (model.js:417)
    at Model.initialize (model.js:71)
    at new Model (model.js:30)
    at XRLayer._getModel (XRLayer.js:161)
    at XRLayer.updateState (XRLayer.js:121)
    at XRLayer._updateState (layer.js:756)

Expected Result

A viridis-colormapped version appears.

Reproduce Steps

git clone https://github.com/hms-dbmi/viv.git
git checkout ilan-gold/modularize_shaders
cd viv && npm install && npm run install:avivator
npm start

or

git clone https://github.com/ilan-gold/luma.gl-Multiple-Texture-Types.git
npm install
npm start

EDIT: Sorry, I forgot to add that the images where this happening are at http://localhost:8080/?image_url=https://viv-demo.storage.googleapis.com/Vanderbilt-Spraggins-Kidney-MxIF.ome.tif for the viv example.

[ilan-gold]

I got a similar error in deck.gl-raster's demo when I turned luma.log.priority = 2 in both FF and Chrome

deck: error during drawing of RasterLayer({id: 'TileLayer-771-1606-12'}) Error: raster-layer-vertex--program-1  Bad uniform bitmapTexture_a

[ilan-gold]

For a more minimal example, in Google Chrome, set luma.log.priority = 2 and the error appears. This example actually "works" (in so far as there are no immediate errors) regardless of log level in Firefox:

import { Program } from "@luma.gl/webgl";
import { AnimationLoop } from "@luma.gl/engine";

(() => {
  const vs = `#version 300 es
#define SHADER_NAME vs
void main(void) {
  gl_Position = vec4(1.0, 1.0, 0.0, 0.0);

}
`;

  const fs = `#version 300 es
#define SHADER_NAME fs
precision highp usampler2D;
precision highp sampler2D;

// our texture
uniform usampler2D channel;

// colormap
uniform sampler2D colormap;

void main() {
  texture(colormap, vec2(0.5, 0.5));
  texture(channel, vec2(0.5, 0.5));
}

`;

  const loop = new AnimationLoop({
    onInitialize({ gl }) {
      new Program(gl, { fs, vs });
    },
  });

  loop.start();
})();