Antialiasing and RenderTargetTexture

[Nico]

Hi guys,

 

I have made a small tutorial for BABYLON.Tools.CreateScreenshot method, and I saw that RenderTargetTexture seems not to use antialiasing. Does somebody have an idea about this ? I am using WebGL readPixels method to get the picture (readed pixel by pixel), does this method is not compatible with antialiasing ? (I don't know a lot about WebGL, I'm just trying things, and see what it does)

[GameMonetize]

This is a WebGL issue. There is no antialiasing for renderTexture. But you can add a fxaaPostProcess to the camera prior to capture screen

[Nico]

Thanks ! I will try it, and let you know if the result is better 

[amerkoleci]

WebGL 2.0 (based on OpenGLES 3.0) will support multisampled render textures.

[Nico]

I have tried to use a FxaaPostProcess, to create it before creating my renderTargetTexture, but it is not yet applied when I render my texture, it is applied after (I can see it on my babylon scene). I have tried to do a scene.render() before rendering my texture but the result is the same. I can't find if I must do something to force applying this postprocess. If I don't detachPostProcess on my camera and do a second render just after, the postprocess is applied (so texture are compatible with postprocess).

 

Here is my test code if it can help :

public static CreateScreenshot(engine: Engine, camera: Camera, size: any, antialias?: boolean): void {    var width: number;    var height: number;    var scene = engine.scenes[0];    var previousCamera: BABYLON.Camera = null;    if (scene.activeCamera !== camera) {        previousCamera = scene.activeCamera;        scene.activeCamera = camera;    }    //If a precision value is specified    if (size.precision) {        width = Math.round(engine.getRenderWidth() * size.precision);        height = Math.round(width / engine.getAspectRatio(camera));        size = { width: width, height: height };    }    else if (size.width && size.height) {        width = size.width;        height = size.height;    }    //If passing only width, computing height to keep display canvas ratio.    else if (size.width && !size.height) {        width = size.width;        height = Math.round(width / engine.getAspectRatio(camera));        size = { width: width, height: height };    }    //If passing only height, computing width to keep display canvas ratio.    else if (size.height && !size.width) {        height = size.height;        width = Math.round(height * engine.getAspectRatio(camera));        size = { width: width, height: height };    }    //Assuming here that "size" parameter is a number    else if (!isNaN(size)) {        height = size;        width = size;    }    else {        Tools.Error("Invalid 'size' parameter !");        return;    }    var fxaa: BABYLON.FxaaPostProcess;    if (antialias) {        fxaa = new BABYLON.FxaaPostProcess("fxaaScreenshot", 1.0, camera);    }    //At this point size can be a number, or an object (according to engine.prototype.createRenderTargetTexture method)    var texture = new RenderTargetTexture("screenShot", size, engine.scenes[0]);    texture.renderList = engine.scenes[0].meshes;    texture.onAfterRender = () => {        // Read the contents of the framebuffer        var numberOfChannelsByLine = width * 4;        var halfHeight = height / 2;        //Reading datas from WebGL        var data = engine.readPixels(0, 0, width, height);        //To flip image on Y axis.        for (var i = 0; i < halfHeight; i++) {            for (var j = 0; j < numberOfChannelsByLine; j++) {                var currentCell = j + i * numberOfChannelsByLine;                var targetLine = height - i - 1;                var targetCell = j + targetLine * numberOfChannelsByLine;                var temp = data[currentCell];                data[currentCell] = data[targetCell];                data[targetCell] = temp;            }        }        // Create a 2D canvas to store the result        if (!screenshotCanvas) {            screenshotCanvas = document.createElement('canvas');        }        screenshotCanvas.width = width;        screenshotCanvas.height = height;        var context = screenshotCanvas.getContext('2d');        // Copy the pixels to a 2D canvas        var imageData = context.createImageData(width, height);        imageData.data.set(data);        context.putImageData(imageData, 0, 0);        var base64Image = screenshotCanvas.toDataURL();        //Creating a link if the browser have the download attribute on the a tag, to automatically start download generated image.        if (("download" in document.createElement("a"))) {            var a = window.document.createElement("a");            a.href = base64Image;            var date = new Date();            var stringDate = date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate() + "-" + date.getHours() + ":" + date.getMinutes();            a.setAttribute("download", "screenshot-" + stringDate + ".png");            window.document.body.appendChild(a);            a.addEventListener("click", () => {                a.parentElement.removeChild(a);            });            a.click();            //Or opening a new tab with the image if it is not possible to automatically start download.        } else {            var newWindow = window.open("");            var img = newWindow.document.createElement("img");            img.src = base64Image;            newWindow.document.body.appendChild(img);        }    };        //scene.render(); //Doesn't solve the problem    texture.render();    texture.dispose();    if (previousCamera) {        scene.activeCamera = previousCamera;    }    if (antialias) {        camera.detachPostProcess(fxaa);    }}

[GameMonetize]

Oh I'm so sorry this is my fault (I'm tired I need some rest): RenderTargetTexture don't use postprocess

[GameMonetize]

BUT I think we can add it easily

could you try your code with this version:

http://www.babylonjs.com/forumPics/babylon.js

[Nico]

It is awesome it works like a charm ! But an old problem came back, when I activate the FxaaPostProcess if I try to get a screenshot with a different ratio than my engine, it give my a weird picture again 

Here is some screenshot example to explain what I am trying to say (should more understandable  ) :

Without AA screenshot:

With AA screenshot: 

 

If you want to see an example (using precision mode to keep my canvas ratio) : 

Without AA: 

With AA:

 

It makes this screenshot feature very nice, thanks again for helping ! 

[GameMonetize]

I uploaded a new version on the same link. Could you try again?

http://www.babylonjs...Pics/babylon.js

[Nico]

Sorry for late reply, I have just tried it, and the result is the same 

[GameMonetize]

In this case I may need a repro case to debug it

[Nico]

You can find my code here

I have used BuildOurOwnBabylonJS solution, so you just have to build and run it, and try it on a demo (I have added 2 buttons to quickly generate 720x720 screenshot with or without antialiasing).

[GameMonetize]

Yes but I need more help from: I need s simple html page with the minimal code required to make it work (or not:))

[Nico]

Ok I will work on it !

[Nico]

I have attached a small project to this answer, it just contains an html file, babylonJS code, my Tools.CreateScreenshot version and the blender scene, I hope it can help you 

screenshotDebug.zip

[GameMonetize]

Are you sure that you're using the latest version of 1.12beta? Because here with my version this is working

[Nico]

My mistake, you are right. I was using the babylon version you have posted in this thread, not the latest beta, now with the latest beta it works without any problem ! Thanks again 

[JKoehoorn]

Whats the current status on this issue?

I would like to use AA.

 

with kind regards

 

JK

[GameMonetize]

Still a WebGL issue:) There is no antialiasing for renderTexture. But you can add a fxaaPostProcess to the camera prior to capture screen