Pixi.js: Render texture is not antialiased

[wdanilo]

Hi!
I cannot get render texture antialiased. I want to get the same effect as in one of the demos, but even in the official demo, we can clearly see that the "brush circles" are not antialiased:
http://pixijs.io/examples/#/demos/mask-render-texture.js

Can we do anything with it?

[ivanpopelyshev]

WebGL framebuffers dont have AA.

Generate brush texture in photoshop and use Sprite or dont use RenderTexture at all. Depends on your case.

[wdanilo]

Oh, I didn't know that we've got such limitation. I want to create an "inversed mask" - so I want to create a wave-like shape which is done by adding few circles and rectangles and "subtracting few other circles" in such way that the background after subtraction is opaque. Moreover, I will do it in many sizes that the user can scale, so basing on anything non-vector doesnt suit the requirements. However if there would be any possibility to just create an "inversed mask", that would solve my issue.

EDIT: Do I understand you correctly, that currently there is no way to render any antialiased, generated graphics into a texture from within webgl? It seems it would be possible in webgl 2.0, right?

[djmisterjon]

hi , you can use Mask + filter for simulate anti-alias and soften the outline mask.
its a sugest

4451

[wdanilo]

@djmisterjon Thank you. Indeed it would give smooth effect, but more blurry than "native" AA. That's ok if we cannot overcome this limitation. Hovewer, I want to understand where exactly we are and where this limiatation comes from. Does Webgl 2.0 solve it ?

[soimy]

Just facing the same problem, but I finally find a solution for this based on #4155 :
``` javascript
// width/height should be Power of 2 to enable mipmap
// Note: baseRenderTexture shall be oversampled
const baseRenderTex = new PIXI.BaseRenderTexture(width, height, PIXI.SCALE_MODES.LINEAR, window.deviceResolution * 2);
const renderTex = new PIXI.RenderTexture(baseRenderTex);

// render brush to RenderTexture
renderer.render(brush, renderTex, false);
generateMipmap(renderTex); // shall be invoked when texture changed

function generateMipmap(texture) {
// trying to enable mipmapping
renderer.bindTexture(texture.baseTexture);
const glTex = texture.baseTexture._glTextures[renderer.CONTEXT_UID];
glTex.enableMipmap();
glTex.enableLinearScaling();
}

[mudcube]

@wdanilo I believe so, as per this article about new features in WebGL2:

Previously, if we wanted antialiasing we would either have to render it to the default backbuffer or perform our own post-process AA (such as FXAA or SMAA) on content rendered to a texture.

Now, with Multisampled Renderbuffers, we can use the general rendering pipeline in WebGL to provide multisampled antialiasing (MSAA)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.