• Content count

  • Joined

  • Last visited

  1. blured on top of non blured

    @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.
  2. blured on top of non blured

    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
  3. blured on top of non blured

    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...
  4. blured on top of non blured

    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
  5. 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:
  6. @JohnK that actually did help.... thanks
  7. alright ok - first time writing shaders for me then. it's working but TBH I could copy paste some code around to make it work. What I'm really struggling with is calculating the UVs - do you maybe have a tutorial/ explanation that is a bit more advanced than just mapping a picture on a cube? http://www.babylonjs-playground.com/#1YHPOU#15
  8. do you still have that shader? :}
  9. what I actually wanted https://www.babylonjs-playground.com/#QS8RP8#4
  10. a good to know we can also update the colors how could we create one along the X axis? was just trying to figure that out in my mind but with the ribbons and multiple paths (scaled), I'll always only reach radial gradients. I guess creating the right path might be a solution - instead of just scaling it down I could calc the middle and add the right vertex colors there - but I guess I'm wrong there too since - the color on the outer left part should be more intense and become less intense going to the right. If you have a good approach - I'd be very interested.
  11. Hm I guess I'm more looking for something like that: https://www.babylonjs-playground.com/#E6IX1#135 but with the API of this: https://www.babylonjs-playground.com/#E6IX1#137 maybe this can be altered so it becomes something like the above (135) - sorry for being a noob - I'll get better soon I guess I'm looking for something like we have in Photoshop for 2D images - different kind of gradients: radial, linear etc.
  12. thanks already for your answers, I tried that quickly and it seems that I'm missing something. https://www.babylonjs-playground.com/#E6IX1#127 as soon as I add the colors to the options, the mash disappears. I hope you can quickly help me again. What I figured out so far: If I add a second path and scale that to 0 (like in the example below) and therefore add the double amount of colors it works. I guess that's because only like that the vertex outer ring color differs to the inner ring color and therefore a gradient applied (correct me if I'm wrong) But think I have to further specify what I actually want to achieve: I got now how I could do it with the lights applied: https://www.babylonjs-playground.com/#E6IX1#128 but I'd also like to know how I can apply such a gradient without the influence of the light / as if we had an emissiveGradient. thanks again.
  13. Hey guys - haven't found what I needed so far so I hope it's not a duplicate. I'd like to create a custom shape in "2D" with a gradient. This playground shows the shape I currently have https://www.babylonjs-playground.com/#E6IX1#122 instead of just having an emissiveColor I wanted to add a gradient. I so far figured out that if I'd use multiple paths to create a sphere for example and omit the z-coordinate the lights would be applied. What is the way to go if I want to have a gradient?