mipmap texture displayed wrong

Issue

I have worked a lot with webgl allready but now its the first time using dart and ive run into a weird error. I create a default texture like this:

  GlTexture() {
    mTexture = gl.createTexture();
    updateMemory(1, 1, new Uint8List.fromList([0x00, 0x00, 0xFF, 0xFF]));
  }

where updateMemory makes:

  void updateMemory(int width, int height, Uint8List colors, [ bool genMipMaps = true ]) {
    gl.bindTexture(TEXTURE_2D, mTexture);
    gl.texImage2DTyped(TEXTURE_2D, 0, RGBA, width, height, 0, RGBA, UNSIGNED_BYTE, colors);
    if(genMipMaps) {
      gl.generateMipmap(TEXTURE_2D);
    }

    gl.bindTexture(TEXTURE_2D, null);
  }

This texture gets rendered perfectly as a blue square. However if i change the updateMemory call to anything except a 1×1 texture the results are completely wrong, let me show you an example:

  GlTexture() {
    mTexture = gl.createTexture();
    updateMemory(2, 2, new Uint8List.fromList([0x00, 0xFF, 0x00, 0xFF, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0xFF, 0x3F, 0x7F, 0xFF, 0xFF]), true);
    gl.bindTexture(TEXTURE_2D, mTexture);
    gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, LINEAR_MIPMAP_NEAREST);
    gl.bindTexture(TEXTURE_2D, null);
  }

And the result looks like this:

While the 2×2 structure is visible the rest is just plain wrong. If neccessary i can also provide the shaders.

/EDIT:
When i set the texture to the content of an image the render looks as following:

The texture per se is rendered correctly but the mip-level is kinda wrong.

Solution

Assuming the code is executing the generateMipMap flow in the code so mipmaps are generated. What about TEXTURE_MAG_FILTER setting ? Also, there may be issues in CSS scaling related to the GL viewport size vs what CSS attempts to finally scale to the display.

EDIT: To be specific, have you set the canvas width/height to match the final display width/height ?

Answered By – Prabindh

Answer Checked By – Marilyn (FlutterFixes Volunteer)