Blurring & Processing a Canvas used in a Dynamic Texture

Hi there,

I would like to create a ‘shadow plane’, a translucent black shape on a plane, underneath an existing mesh. that reuses the original mesh’s texture (to avoid loading another texture in my project).

The texture is in colour, with transparent background. I want to make the texture black, and then blur it.

I had thought to use the canvas.filter() method on a dynamic texture to apply contrast and blur filters but it doesnt seem to work (i know this is still an experimental feature of canvas and im not sure if its implemented in Babylon)

I noticed when searching that this question deals with a similar issue but im not sure how to implement the solution given by @sebavan , or how the original poster fixed the issue (as filter seemed to be working for them):

heres an incomplete playground, the final result should be a blurry black quarter-circle (where the logo is).
https://playground.babylonjs.com/#5GSSRS#12

Any help much appreciated :slight_smile:

1 Like

This should work https://playground.babylonjs.com/#5GSSRS#14

2 Likes

Do you know why the filter method on CanvasRenderingContext2D doesn’t exist? According to MDN it should be available in Edge since 79, but I’m on 95 and it’s undefined.

it is a property not a function https://playground.babylonjs.com/#5GSSRS#15

3 Likes

Thanks a lot :slight_smile: the post process seems to not work some of the time (after reloading etc) but the filter method is what I need