对模糊问题的调整尝试

在上次讲模糊的时候总是过于暗淡之后,tt补充道

你应该注意到了pixi的strength在传给shader之前进行了/4?在对两者进行比较之前或许应该先考虑这个区别。

哦,我承认,我没注意到。

以 X 方向的模糊为例,Pixi 的 strength 计算是这样的:

this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width);

于是在我的代码中就得这样:

shader.setStrength(this.strengthX / 4 / this.pass / (t1.fitWidth / t1.originalWidth));

而原来只是简单的设置为 strengthX

shader.setStrength(this.strengthX);

难怪了。以下是对比图。

对比图

对比图中,从左到右、从上到下分别是:

  1. Pixi 的渲染结果;
  2. <canvas> 2D + Box Blur(对 Gaussian Blur 的一种快速近似)的渲染结果,以此为标准;
  3. 修正后的 GLantern 渲染结果,循环次数为 5+5(X 方向5次,Y 方向5次);
  4. 修正后的 GLantern 渲染结果,循环次数为 9+9。

可以见到,5+5的方案的模糊程度与标准最为接近(可以取色验证一下),有效地保留了对比度,效果较9+9也不逊色。所以要改用新公式&5+5了。

5+5、9+9 是什么意思呢?是这一段代码:

var passCoeff = 3;
var t1 = input, t2 = this._tempTarget;
t2.clear();
var t:RenderTarget2D;
for (var i = 0; i < this.pass * passCoeff; ++i) {
    // Blur in X direction
}
for (var i = 0; i < this.pass * passCoeff; ++i) {
    // Blur in Y direction.
}
renderer.copyRenderTargetContent(t1, output, clearOutput);

分别对 X 和 Y 方向应用 passCoeff * pass 次快速高斯模糊。

分享到 评论