WebGL：將spritebatch渲染為渲染紋理時的奇怪行為

Question

技術：WebGL / GL

1. 當我立即將10k精靈（使用spritebatch）渲染到后台緩沖區時，一切正常。

10K

2. 當我將其渲染為渲染紋理時，我會遇到一些奇怪的alpha混合問題（我猜...）。 在紋理具有透明像素的地方，alpha被錯誤地計算（IMO應該是累積的）。

10K

1K

200黑色背景

混合配置：

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

Answer 1

我已將混合模式更改為：

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運河始終設置為1.0（除了使用透明畫布的情況除外） - 因此，如何計算alpha並不重要。

當您首先渲染到渲染緩沖區（紋理）中，然后使用此准備好的紋理渲染到后台緩沖區時 - 您需要對alpha和rgb使用不同的混合模式。

SRC_ALPHA和ONE_MINUS_SRC_ALPHA用於RGB混合（乘法），具體取決於SRC和DESC alpha。

如果alpha運河也會相乘，它會覆蓋紋理具有透明像素的地方的不透明像素。 我們需要對每個像素的α進行求和而不是乘法。

因此alpha func需要設置為：ONE和ONE_MINUS_SRC_ALPHA，因此ALPHA將累積，而不是相乘。

陸：我說英語不流利（抱歉）。 如果有人願意“翻譯”這個解釋，我將不勝感激。