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

时间：2015-08-03 19:27:46

标签： javascript webgl

Tech：WebGL / GL

  1. 当我立即将10k精灵（使用spritebatch）渲染到后台缓冲区时，一切正常。

    2. 10K

    good

    1. 当我将其渲染为渲染纹理时，我会遇到一些alpha混合的奇怪问题（我猜...）。在纹理具有透明像素的地方，alpha被错误地计算（IMO应该是累积的）。

      2. 10K

      bad1

      1K

      bad2

      200黑色背景

      bad3

      Blend config：

      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);

1 个答案:

答案 0 :(得分：3)

我已将混合模式更改为：

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);

结果是：

good

<强>解释

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

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

SRC_ALPHA和ONE_MINUS_SRC_ALPHA用于RGB混合（乘法），具体取决于SRC和DESC alpha。

如果alpha运河也会相乘，它会覆盖纹理具有透明像素的地方的不透明像素。我们需要对每个像素的α进行求和而不是乘法。

所以alpha func需要设置为：ONE和ONE_MINUS_SRC_ALPHA所以ALPHA将累积，而不是相乘。

路： 我不会说流利的英语（抱歉）。如果有人会如此善良，那就是＆＃34;翻译＆＃34;这个解释我将不胜感激。

相关问题
最新问题