loss of quality because of post processing

[Kesshi]

I'm currently experimenting with the post processing of BabylonJs. I found an issue which results in loss of quality if post processing is used.
I know that WebGl does not support anti aliasing when rendering into a texture. This is another problem.
Look at this demo: http://www.babylonjs-playground.com/#XS58E
Depending on your screen resolution you see some very clear gaps between the grid lines.
If you disable the post processing in line 14, the grid will be rendered correctly. 
Except for the missing anti aliasing i would expect the same visual result in this case.

I looked at the BJS sources a bit and i think i found the reason for this.
Lets say my canvas has a size of 900 x 700px. Because textures must be power of 2, the nearest power of 2 texture size is used for the post processing. In this case a 1024 x 1024px texture will be used.
The entire texture is then used as a target for the rendering. Because of that the 1024x1024px texture needs to be downscaled to fit in the 900 x 700px canvas.
This will result in loss of quality.
To solve this issue only the 900x700px portion of the 1024px texture should be used as a target for the rendering. This would prevent the downscaling. The result from the FXAA post process should also benefit from this.

I don't know how difficult it is to change this. Is there a workaround i could use?
Currently i can't use the post processing if i want some precise results.

[GameMonetize]

is it better?

http://www.babylonjs-playground.com/#XS58E#1

[Kesshi]

Yes with the NEAREST mode it looks perfekt now. But the other modes still have the same issue.
I just used nearest because the problem is more evident with it.
See the attached images and compare nearest with bilinear.

[JCPalmer]

FYI,  I happened to run your example on iPad Air 2.  It did not compile.  Think it was a problem with 'let'.  It might be legal, but it it definitely not common.  Recipe for problems.  Actually, I have not used 'let' since high school computer math class in 1975.  The computer was the size of a refrigerator, and 16 kb ram.

Use 'var'

[Kesshi]

1 hour ago, JCPalmer said:

FYI,  I happened to run your example on iPad Air 2.  It did not compile.  Think it was a problem with 'let'.  It might be legal, but it it definitely not common.  Recipe for problems.  Actually, I have not used 'let' since high school computer math class in 1975.  The computer was the size of a refrigerator, and 16 kb ram.

Use 'var'

i copied this function from my typescript codebase, i forgot to modify this part ... in typescript let is valid, it compiles to var but ensures the block scope (ES5 target)

[GameMonetize]

nearest mode is the only mode which will allow you to create non pow-2 textures

[Kesshi]

2 hours ago, Deltakosh said:

nearest mode is the only mode which will allow you to create non pow-2 textures

Thats why i wrote you should still create the pow-2 texture but use only a part of it.
I assume the postprocessing draws a rectangle which fits the canvas in the end. You could use texture coordinates to select the correct part of the texture.
This is what i was doing some years ago in an c++ opengl project to get a pixel perfect result.
You could prevent the stretching/resizing entirely this way.

[GameMonetize]

Like the idea

rendering to the texture can be controlled using a viewport and you are right regarding the quad object used to apply the texture

 

Added the idea to my backlog but feel free to provide a PR if you want to do it

[GameMonetize]

actually I've just added it: https://github.com/BabylonJS/Babylon.js/commit/7378387e6b426661f10544c73de5277279e63c45

[Kesshi]

6 hours ago, Deltakosh said:

actually I've just added it: https://github.com/BabylonJS/Babylon.js/commit/7378387e6b426661f10544c73de5277279e63c45

Awesome, you are again very fast

[Vousk-prod.]

Is this usage of nearest power of 2 texture size for post processes the reason of big loss of performance on mobile devices when activating even the simplest PP ?

[GameMonetize]

nope this is the fastest way to do pp

on mobile, the problem is fillrate. GPU (except on iphone 6) are not really powerful and applying a PP implies applying a pixel shader on every pixel of the screen

To optimize on mobile, I suggest limiting the deviceRatio when creating the engine:

var engine = new BABYLON.Engine(canvas, false, {limitDeviceRatio = 1});