收藏
回答

Canvas webgl FBO blend bug

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 7.0.5 2.7.5

bug描述:

目前debug估计是blend的时候src color正常,dst color总是为(0,0,0,0)




- 当前 Bug 的表现(可附上截图)

在小米8上,出现异常



- 预期表现

在honor v20上,正常显示





关键代码:


_render = () => {

    const { gl } = this._glRenderer;

    

    gl.viewport(0, 0, this._width, this._height);

    

    const fb = gl.createFramebuffer();

    const rb = gl.createRenderbuffer();

    const texture = gl.createTexture();

    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

    gl.activeTexture(gl.TEXTURE0);

    gl.bindTexture(gl.TEXTURE_2D, texture);

    gl.texImage2D(

        gl.TEXTURE_2D,

        0,

        gl.RGBA,

        this._width,

        this._height,

        0,

        gl.RGBA,

        gl.UNSIGNED_BYTE,

        null

        );

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    gl.framebufferTexture2D(

        gl.FRAMEBUFFER,

        gl.COLOR_ATTACHMENT0,

        gl.TEXTURE_2D,

        texture,

        0

    );

    

    gl.bindRenderbuffer(gl.RENDERBUFFER, rb);

    gl.renderbufferStorage(

    gl.RENDERBUFFER,

    gl.DEPTH_COMPONENT16,

        this._width,

        this._height

    );

    

    gl.framebufferRenderbuffer(

        gl.FRAMEBUFFER,

        gl.DEPTH_ATTACHMENT,

        gl.RENDERBUFFER,

        rb

    );

    

    this._drawContent(gl);

    

    gl.deleteRenderbuffer(rb);

    gl.deleteFramebuffer(fb);

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    

    const { _drawPath: drawPath } = this;

    drawPath.lassoTex.destroy(gl);

    drawPath.lassoTex.texture = texture;

    drawPath.lassoTex.scale = this._scale;

    drawPath.lassoTex.drawing = false;

    

    this._glRenderer.requestRender();

};


最后一次编辑于  07-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

6 个回答

  • nickname
    nickname
    07-12

    你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    07-12
    赞同
    回复 4
    • 羊三
      羊三
      07-12
      这个写成代码片段有点困难啊。。。。
      07-12
      赞同
      回复
    • 羊三
      羊三
      07-12回复羊三

      加了关键代码可以吗?如果不行,我再去写一个demo,😢😢😢


      07-12
      赞同
      回复
    • nickname
      nickname
      07-15回复羊三

      还是麻烦给个代码片段哈

      07-15
      赞同
      回复
    • 羊三
      羊三
      07-15
      问题和depth的精度相关,但是还有写疑问,为什么在默认的depthbuffer中可以达到较高的精度,在bind自身的frambuffer时就不行。
      07-15
      赞同
      回复
  • 羊三
    羊三
    07-15

    发现是因为depth精度问题,会把相邻的几个depth,舍入同一层depth,在改变step大小之后可以解决这个问题。


    但是,很奇怪的是,在默认buffer里面是可以识别高精度的,参看问题中图片,可以正常通过depth test。而在离屏渲染中(通过bindFramebuffer,attach depth 的renderbuffer),精度问题就出现了。希望有人来解决疑惑~

    07-15
    赞同
    回复