Jump to content

blured on top of non blured


leechii
 Share

Recommended Posts

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: social-heatmap-create2.jpeg

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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 :P not that I'd want it so badly chch.
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...