[英]WebGL: Strange behavior when render spritebatch into render texture
Tech: WebGL / GL 技术:WebGL / GL
10k 10K
10k 10K
1k 1K
200 with black background 200黑色背景
Blend config: 混合配置:
gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
This is how I create render buffer: 这是我创建渲染缓冲区的方法:
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);
I have changed blending mode to: 我已将混合模式更改为:
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);
This is result: 这是结果:
Explanation: 说明:
When you render immediately into back buffer alpha canal is always set to 1.0 (except the cases when you use transparent canvas) - So it doesn't matter how alpha is being calculated. 当您立即渲染到后台缓冲区时,alpha运河始终设置为1.0(除了使用透明画布的情况除外) - 因此,如何计算alpha并不重要。
When you render first into the render buffer (texture) and later this prepared texture is used to render into back buffer - you need to use different blend modes for alpha and rgb. 当您首先渲染到渲染缓冲区(纹理)中,然后使用此准备好的纹理渲染到后台缓冲区时 - 您需要对alpha和rgb使用不同的混合模式。
SRC_ALPHA and ONE_MINUS_SRC_ALPHA is used for RGB mixing (multiply) depending on SRC and DESC alpha. SRC_ALPHA和ONE_MINUS_SRC_ALPHA用于RGB混合(乘法),具体取决于SRC和DESC alpha。
If alpha canal would be also multiplied it would override opaque pixels in places where texture has transparent pixels. 如果alpha运河也会相乘,它会覆盖纹理具有透明像素的地方的不透明像素。 We need to sum alpha of each pixel not multiply.
我们需要对每个像素的α进行求和而不是乘法。
So alpha func need to be set to: ONE and ONE_MINUS_SRC_ALPHA so ALPHA will be cumulated, not multiplied. 因此alpha func需要设置为:ONE和ONE_MINUS_SRC_ALPHA,因此ALPHA将累积,而不是相乘。
Luk: I'm not fluent in English (sorry). 陆:我说英语不流利(抱歉)。 If someone would be so nice to "translate" this explanation I would be grateful.
如果有人愿意“翻译”这个解释,我将不胜感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.