How to efficiently apply image processing to DynamicTexture?

Questions
1

I am streaming images from the server to the client and drawing the images onto a DynamicTexture (used by a Layer as the background). I’m trying to implement an image processing feature, where I can adjust contrast/brightness/saturation/etc of the texture efficiently

While it is possible to do so on the CPU by processing the image with some image processing libraries like JIMP, it is very slow (about 1200-2000ms on a 1600x900 image, mainly because of reading and writing new Buffers). I’m hoping to do so directly with the loaded DynamicTexture and taking advantage of the GPU while doing so. Is there any way to apply some kind of ‘image-processing’ to a DynamicTexture?

2

yes this is possible

Did you see our 2D control library: Image Filter - Babylon.js Documentation

3

Yep, but for some reason I can’t touch the @babylonjs/controls in my project. @babylonjs/core is on v4.0.3 and for some reason @babylonjs/controls is on v1.0.0-alpha.1 when I added them with yarn. There’s no ImageFilter object that I can test with.

Also, it seems like I have to apply the image filters before it is loaded as a texture? I was hoping that I can apply them after it is drawn onto the DynamicTexture.

4

Error: ENOENT: no such file or directory, open ‘/home/node/app/node_modules/@babylonjs/core/Engines/engine.js’

That’s what I got when I tried importing ‘@babylonjs/controls’. I also got this warning in my yarn:

" > @babylonjs/controls@1.0.0-alpha.1" has unmet peer dependency “@babylonjs/core@>=4.1.0-alpha.8”.

I could have tried 4.1.0 alpha, but that broke my codebase for some other reasons.

5

4.1 should work flawlessly so maybe we could start with that.

Then we can check why you can’t use 2d controls.

Maybe @sebavan can tell you how he applied effect to image ? I think applying effect to a texture should be straightforward

6

As stated in the error the babylon peer dependency should be greater than 4.1 alpha 8 which is not the case with 4.0.3 as the controls relies on new features from 4.1.

Could younot update @babylonjs/core to the latest 4.1 preview ? This should solve all your issues.

7

Alright. Is there any planning on more major updates to the 4.1 alpha before a 4.1 official release? Will the official release be anytime soon? It completely killed my app the last time i tried upgrading to 4.1.0 alpha (along with babylonjs-materials, babylonjs-loaders, etc), but maybe it’s worth another try.

Thanks for the advice though! ImageFilter’s dependency on 4.1 seems to be the main cause of the problem then.

8

This should definitely work. If not, share a repro and we will tackle it down ASAP.