label-layer issue with Luma.gl v4

[rivulet-zhang]

It seems that nothing is shown in the label-layer example with Luma.gl V4, which works fine with Luma.gl V3.

More specifically, with V4, when initializing a Texture2D with a 2d canvas, a Texture2D object of width=1 and height=1 is returned. See code below in the label_utils.js:

return {
  mapping,
  texture: new Texture2D(gl, {
    pixels: canvas,
    magFilter: GL.LINEAR
  })
};

This is probably related to refactoring of the texture class in Luma.gl. (I had a glance at the change log and saw a few changes on that class.) Anyway, it works great with V3. Just wonder if my thought is correct.

[howtimeflies0]

Hi @rivulet-zhang . Good catch. Yeah, there are some incompatibility between luma.gl v3 and v4 API around texture. visgl/luma.gl#198

For now, you can simply change pixels: canvas to data: canvas

[rivulet-zhang]

@shaojingli Thanks, Shaojing.
Just FYI, changing from pixels: canvas to data: canvas doesn't seem to fully resolve the incompatibility issue. While the texture size does not deduct, this results in a fully filled bounding box of the text labels. See below image:

I also got the following errors:

GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

Since the icon-layer works well (which uses an image to create textures), I guess something went wrong when using a canvas element instead? Any thought on this would be much appreciated.

[howtimeflies0]

@rivulet-zhang yeah. this issue has appeared multiple times. It's due to WebGL1's inability to handle non-power-of-two textures. It didn't appear in luma.gl v3 because we didn't follow the spec closely and didn't use WebGL context in its default state.

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Non_power-of-two_textures

There are three ways to resolve it: 1) use power-of-two-textures (resize your texture with power-of-2 width / height. this is preferred method; 2) turn off mipmap, change min filtering mode to GL.LINEAR and also change wrap mode to GL.CLAMP_TO_EDGE. 3) use WebGL 2.

We are going to add a check to luma.gl in our next alpha version to automatically do 2) for users.

[gregsadetsky]

Hey, to jump on this, I'm showing a GoogleMapsOverlay with a single GeoJsonLayer and the map is failing because of this same "glGenerateMipmap: Can not generate mips" error for some users.

This error specifically happens on Chromebooks since they're not running WebGL 2.

I've tried passing different things to parameters and calling setParameters in onWebGLInitialized, but to no avail (I have 0 clue around GL so was taking shots in the dark).

Is there any way to disable mipmap in my situation? Thank you very very much!

P.S. We have a lot of users from the K12 market, so the ChromeOS adoption is far higher than what's typical across the web.

[ibgreen]

@gregsadetsky Recommend opening a new issue with well worded title (e.g. Mipmap failure on WebGL1 / ChromeOS). This is a very old issue that's been closed for three years (and luma.gl is now on v8!).

We do not do any testing on ChromeOS but can certainly take patches or even make fixes if we can pinpoint the issue sufficiently, so that would be the initial goal in that issue.