create screenshot with post processing

[Nabroski]

@Vousk-prod. so dont use it
http://www.babylonjs-playground.com/#QNSHJ#10

[Nabroski]

oh i realize it doesn't work.

someone has to debug it. - i out of here.

[Vousk-prod.]

@Nabroski There are 3 major problems with your solution : 1. you cannot specify custom render size, 2. the usage is completely different from the previous screenshot process (with options to specifiy precision, widht and/or height, etc), 3. it would be a bit odd to provide a screenshot function to users and to tell them "it's not working, you need to dump yourself the frame buffer"

[Nabroski]

@Vousk-prod. no, why, i would implement it this way, becourse, its faster, once i had a buffer i (as developer) can do what ever i like,

CreateImage -> Uint8Array (buffer) ->if Firefox else Chrome. And from here you can do really crazy image processing stuff, photoshop -i don't know, if you like.

In any other case you have to wait for someone to write this function for you. Good Luck

[Nabroski]

fact is i wouldn't even implement it this way. 

@Deltakosh

something from with lines and stencil or something

red outline (dumpframebuffer)

 

[Nabroski]

@Deltakosh

engine.bindBuffers=false

will delate lines just an observation

 

[Vousk-prod.]

@Nabroski First, to do whatever you like with a buffer, you first need your buffered image at the right size, Photoshop is perfect (I'm using it everyday) but it cannot do miracles, upscale a picture still pixelates it, even in 2017 .

Secondly, yes as a developper I can code my own screnshot function (in fact, it's already the case, in my app I'm using my own function, but it dynamically changes the webpage layout, which is not something we can consider in BJS, we need to provide a screenshot function that do not alter the HTML). The idea of my post here is to chase the bugs, for everyone, not only for me, I can get around problems, but this is not the main purpose of a library, the idea to provide a functionality is to avoid people to have to write patches to use it.

[Nabroski]

Yes, but, BabylonJs is a GameEngine, if you look at Cryteck, Valve, Idsoft, their all have their own engines, why, becorse of the taste of the game devs for the specifit games their make. 

You cant not please everybody.

That is wrong.

with a very basic skill of javascript you can do amazing image processing.

I for myself use 5% of babylonjs,  so it would be very nice, if the basic functions every 15years old can copy paste from stacoverflow would be constant in babylonjs, and everything else i would code by myself, just becourse, i love coding. Their are so many function contributed by the community , i i never use them. I dont even know, what the most stuff, in with case, its relevant. 

You see it also in Canvas2D Nokawa is running like crazy after every request, in short time Canvas2D has become its own branch of bytes. I use document.CreateElement(<div>).drawsomething. 5bytes.

Dumpframebuffer, is okay. everything else is overkill. 

[Kesshi]

You have to use premultiplied alpha colors for the clearColor. (RGB values = RGB * ALPHA)
For 100% transparent background you should use BABYLON.Color4(0, 0, 0, 0)
For a 50% transparent red background you should use BABYLON.Color4(0.5, 0, 0, 0.5)
 

[Vousk-prod.]

@Kesshi I know that, I'm using Color4(0, 0, 0, 0) in real cases. In the PG I put red background to be able for others to more easily see the bug.

The problem here is not the ability or not to make transparent, colored or semi transparent background, the problem is that the new screenshot method does not correctly take the choosen clearColor in account (in Chrome), whereas the old method did, and a classic canvas to data also is ok.

[Kesshi]

Yes but using premultiplied alpha colors solves the issue with the colored outline.

[Vousk-prod.]

@Kesshi Mhm ok. You're right, the colored outline was just a side effect of using a red-but-in-fact-fully-transparent background to demonstrate the Chrome alpha bug.

[GameMonetize]

Ok I did not read the thread but it seems that the "bug" is fixed?

[Vousk-prod.]

Sorry, in fact, no.

The outlines showed by Nabroski was a digression and a side effect of specific alpha usage, but the fact that Chrome does not take alpha in account in new screenshot method whereas it worked in old screenshot and with a standard canvas.dataToURL is a real bug, not solved for now.

[GameMonetize]

But if it is only on Chrome, can we think it is a Chrome bug? If it works on Edge and Firefox?

[Vousk-prod.]

Yup, we can think it is a Chrome bug.

But sometimes a strange behavior is not a browser bug but a erroneus way to do something you'll only detect thanks to a browser who do not accept a half working stuff. (I'm absolutly not saying your new screenshot code is wrong, I only open the door for a double check, because it worked before, and I cannot reproduce the bug when I try to manually do the same kind of your new screenshot mecanism)

[GameMonetize]

I agree now worry. But I double checked the code and I can't see something wrong (so far :))

[GameMonetize]

https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L621

[Nabroski]

 .clearColor.toHexString()

[Vousk-prod.]

On 25/01/2017 at 1:33 AM, Nabroski said:

 .clearColor.toHexString()

Yep, when I saw this line I also find it suspiscious, no alpha can be taken in account with that. I corrected that and it's ok now, PR is on its way.

But there still is another last problem with this new screenshot : the final image is upscaled instead of directly rendered at specified size.

renderContext.drawImage(engine.getRenderingCanvas(), offsetX, offsetY, newWidth, newHeight);

@Deltakosh Is there a way to make the engine render at final size instead of using getRenderingCanvas (where image has current size)

[GameMonetize]

Not really because the screenshot reuse the backbuffer