blured on top of non blured

[leechii]

I'm already back with a new question

What I'm trying to achieve is a blured circle on top of a non blured circle/ plane / etc.

To blure the mesh on top (circle) I tried using the postProcessses but didn't really achieve what I want.

http://www.babylonjs-playground.com/#TX31SD#12 (this but with the blured circle on top)

I hope you can help me

EDIT:

maybe some more information is needed what im trying to build in the end:
I want to achieve a simple heatmap (no bump now/ rectangles on top for now) - therefore the gaussian , black and white etc is needed to be applied to the same layer/ cam
 

like this:

[GameMonetize]

Hey!

you were close but I would suggest using a rendertargettexture for that job:

https://www.babylonjs-playground.com/#TX31SD#14

You could think about adding a custom camera to keep your blue circle stable:

https://www.babylonjs-playground.com/#TX31SD#15

[leechii]

thanks a lot already!

- having troubles tough fitting it to the correct size.
do you have some tips for that?

https://www.babylonjs-playground.com/#TX31SD#19

[GameMonetize]

If you want to perfectly align I suggest using the texture like a fullscreen quad

This is what I'm doing here: https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/advancedDynamicTexture.ts#L376

basically the idea is to create a foreground layer and use this rtt as the texture so the texture can be perfectly aligned with the screen size

[leechii]

quickly scrolled through the code - that would mean that I'd have to create a custom abbreviation of the dynamicTexture that does the full screen calcs for the "controls"/ meshes (in my case the circles only) and then add my custom texture to it...
one thing that's kind of bothering me is that it all gets squashed down to a 2D context (if I'm not misled by this line: https://github.com/BabylonJS/Babylon.js/blob/88811265e704cf5cd674f268b17cafc35a93225f/src/Materials/Textures/babylon.dynamicTexture.ts#L7)

wouldn't it be possible to just add a second canvas (since the background could be transparent) and link the eventHandlers to both (adding the same camera on both)?
Not sure if that'd be a performance problem though but I guess for the heatmap not...

 

[leechii]

quickly tried that - works but don't know if there will be any traps  
will try to go with this idea for the heatmap I'm implementing. 
https://gist.github.com/robinfehr/81d576deed562086e8c69861f596c85b

[brianzinn]

Very interesting gist, but I am left wondering why you need the second canvas.  If you draw the lines/curves (https://www.babylonjs-playground.com/#1PSZDF#2) slightly on top of the heatmap and pitch then I think you could get away with a single canvas, but I don't know how you are using events (ie: you want the events handled separately - forward + keypresses).  Maybe an alpha transparency material on top?  I have written a React component to show starting lines for football matches, so have tried a couple of things like that, but did not need the lines on top.

[leechii]

@brianzinn what do you mean by drawing lines on top of the heatmap and pitch? the heatmap layer (processed image) should be on top of an image/ non processed layer. 
what I'm trying to achieve is something like a layer in an SVG where the image processing filters can be applied to a layer but below that or on top of that layer can be anything. 

for the heatmap example probably I could do that using a dynamicTexture on a plane placed above the image too I guess a bit like that (https://github.com/pa7/heatmap.js/blob/master/src/renderer/canvas2d.js) - implementing a more complex canvas that also does the image processing (have to write it all myself there though too (blur, gradient etc.))  - but I'd lose that I could just reuse the shader to process another image in case I want to implement the shaders also more general (e.g. params for the colors within the gradient shader). fyi: I have to generalize it for the project I'm working on  not that I'd want it so badly chch.
 

[brianzinn]

I re-read your question and took a better look at your image and realized what you are trying to achieve.  Unless you wanted to do screenshots and maybe layer masks (not exactly elegant) then I don't see a way without the second canvas!

[GameMonetize]

I see no big issue with a 2nd canvas