WebGL：将spritebatch渲染为渲染纹理时的奇怪行为

 

Tech：WebGL / GL

  • 当我将10k精灵（使用spritebatch）立即渲染到后台缓冲区时，一切都很好。

    • 10K

    好

  • 当我把它渲染成渲染纹理时，我得到了一些奇怪的问题与alpha混合（我想..）。 在纹理具有透明像素的地方，alpha的计算错误（IMO应该是累积的）。

    • 10K

    bad1

    1K

    BAD2

    200与黑背景

    bad3

    混合配置： 

    gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    这是我如何创建渲染缓冲区： 

    this._texture = this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, this._texture);
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.width, this.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);

this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);


this.renderBuffer = this.gl.createFramebuffer();

this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.renderBuffer);
this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, this._texture, 0);

    我已将混合模式更改为： 

    gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

    这是结果：

    好

    说明：

    当你立即渲染到后台缓冲区时，alpha canal总是被设置为1.0（除了使用透明画布的情况外） - 因此，alpha的计算方式并不重要。

    当你首先渲染渲染缓冲区（纹理），然后这个准备好的纹理被用来渲染到后台缓冲区 - 你需要为alpha和rgb使用不同的混合模式。

    根据SRC和DESC alpha，SRC_ALPHA和ONE_MINUS_SRC_ALPHA用于RGB混合（乘法）。

    如果阿尔法运河也将倍增，它将覆盖在纹理具有透明像素的地方的不透明像素。 我们需要将每个像素的alpha相加而不是相乘。

    所以alpha函数需要设置为：ONE和ONE_MINUS_SRC_ALPHA，所以ALPHA将被累计，而不是相乘。

    Luk：我不会说流利的英语（对不起）。 如果有人愿意“翻译”这个解释，我将不胜感激。

    链接地址: http://www.djcxy.com/p/28021.html

    上一篇: WebGL: Strange behavior when render spritebatch into render texture

    下一篇: Why is my sine algorithm much slower than the default?