[SOLVED] RenderTarget antialiasing or how to screenshot with AA

Help & Support
1

Hello all,

I trying create screenshot from camera and save it through ‘RenderTarget’ but the texture don’t have aliasing.
Is any way how aliasing it?

I tried create screenshot directly from canvas, but on IOS devices appears only black screen. (Preserve drawing buffer is enabled)

thank you for any help
Radek

        var texture = new pc.Texture( device, {
            format: pc.gfx.PIXELFORMAT_R8_G8_B8,
            width: 512,
            height: 512

        });

        var target = new pc.RenderTarget(device, texture, { depth: true });
        camera.setRenderTarget( target );
        app.renderer.render( app.scene, camera );  

        var gl =  this.app.graphicsDevice.gl;
        var fb = gl.createFramebuffer();
        var pixels = new Uint8Array(tex.width * tex.height * 4);
        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex._glTextureId, 0);
        gl.readPixels(0, 0, tex.width, tex.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
2

Unfortunately render targets in WebGL 1 cannot have Anti Alias, although WebGL 2.0 will do.

Have you tried using app.graphicsDevice.canvas.toDataURL(), here is script example, that will download screenshot when space key is hit:

pc.script.create('screen', function (app) {
    var Screen = function (entity) {
        this.entity = entity;
    };

    Screen.prototype = {
        initialize: function () {
            window.addEventListener('keydown', function(evt) {
                if (evt.keyCode !== 32)
                    return;
                
                app.once('frameend', function() {
                    var image = app.graphicsDevice.canvas.toDataURL('image/png');
                    window.location.href = image.replace('image/png', 'image/octet-stream');
                });
            }, false);
        }
    };

    return Screen;
});

As it is done in frameend event, which is straight after rendering loop in sync manner, it does not need preserve drawing buffer check.
If you want to do screenshot in any other time of rendering or in async or before render loop, then you will need preserve draw buffer flag.

3

Is this possible now to have Anti-aliasing to render on a texture?

In this example, we can see that edges are not smooth on the rendered texture.

image

4

on webgl2 devices, you can set number of samples

var renderTarget = new pc.RenderTarget(this.app.graphicsDevice, texture, 
{ 
    depth: true,
    samples: 8
});
3 Likes
5

Oh wow! It is working as expected! Thank you very much :slight_smile:

6

you can actually set samples to 8 or similar on all devices, but it’s ignored on webgl1 device - but at least you don’t need to check

1 Like