wasabia / flutter_gl

cross-platform call OpenGL API by Dart through dart:ffi. Provides OpenGL with Texture Widget on Flutter.
243 stars 60 forks source link

You need to add a depth Buffer in setupDefaultFBO method #3

Closed ghost closed 2 years ago

ghost commented 2 years ago

I found an issue when I try to use the gl.DEPTH_BUFFER_BIT .

I found the issue on the Android device.

Example code

draw() {

// Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, (width * flgl.dpr).toInt(), (height * flgl.dpr).toInt());

    // Clear the canvas. sets the canvas background color.
    gl.clearColor(0, 0, 0, 1);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Turn on culling. By default backfacing triangles will be culled.
    gl.enable(gl.CULL_FACE);

    // Enable the depth buffer
    gl.enable(gl.DEPTH_TEST);

    // print('CULL_FACE Enabled: ${gl.getParameter(gl.CULL_FACE)}');
    // print('DEPTH_TEST Enabled: ${gl.getParameter(gl.DEPTH_TEST)}');

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // Turn on the attribute
    gl.enableVertexAttribArray(positionLocation);

    // Bind the position buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
    var size = 3; // 3 components per iteration
    var type = gl.FLOAT; // the data is 32bit floats
    var normalize = false; // don't normalize the data
    var stride = 0;
    var offset = 0; // start at the beginning of the buffer
    gl.vertexAttribPointer(positionLocation, size, type, normalize, stride, offset);
}

And I get this:

Screenshot 2021-09-24 191041

But I want this:

Screenshot 2021-09-24 191122

I found a workaround that fixes this issue but I am not sure if this produces any other issues

setupDefaultFBO() {

  int glWidth = (width * dpr).toInt();
  int glHeight = (height * dpr).toInt();

  dynamic defaultFramebuffer = _gl.createFramebuffer();
  dynamic defaultFramebufferTexture = _gl.createTexture();
  _gl.activeTexture(_gl.TEXTURE0);

  _gl.bindTexture(_gl.TEXTURE_2D, defaultFramebufferTexture);
  _gl.texImage2D(
  _gl.TEXTURE_2D, 0, _gl.RGBA, glWidth, glHeight, 0, _gl.RGBA, _gl.UNSIGNED_BYTE, null);
  _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR);
  _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, _gl.LINEAR);

  _gl.bindFramebuffer(_gl.FRAMEBUFFER, defaultFramebuffer);
  _gl.framebufferTexture2D(
  _gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, _gl.TEXTURE_2D, defaultFramebufferTexture, 0);

  Pointer<Int32> depthBuffer = calloc();
  _gl.gl.glGenRenderbuffers(1, depthBuffer.cast());
  _gl.gl.glBindRenderbuffer(_gl.RENDERBUFFER, depthBuffer.value);
  _gl.gl.glRenderbufferStorage(_gl.RENDERBUFFER, _gl.DEPTH_COMPONENT16, glWidth, glHeight);
  _gl.gl.glFramebufferRenderbuffer(
  _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.RENDERBUFFER, depthBuffer.value);

  return defaultFramebufferTexture;
}
wasabia commented 2 years ago

Great! this method is used in Example, you can edit it any time if you need.

wasabia commented 2 years ago

setupDefaultFBO loss set depthBuffer.

wasabia commented 2 years ago

flutter gl has api createRenderbuffer, so you no need to use ffi, similar to webgl