[英]WebGL: Strange behavior when render spritebatch into render texture
技术:WebGL / GL
10K
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);
我已将混合模式更改为:
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将累积,而不是相乘。
陆:我说英语不流利(抱歉)。 如果有人愿意“翻译”这个解释,我将不胜感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.