How to draw on a mesh using dynamic texture?

Questions
1

This is a follow-up of the post " Texture Canvas does not work with Babylon 5"
I’m trying to set the texture repeat and make a circular drawing pointer like the texture canvas plugin. But I can’t find the right parts to modify it
Here is the PG: Babylon.js Playground
Why should some functions be async with await in this pg? Is there away to put it all sync?

2

I made functions async in that PG only to simplify the code so it could concentrate on the relevant parts. Specifically, I wanted to use await for the images to load, rather than adding extra nested code for onload event handlers. There is no other reason for the async.

Adding the two other features that you want:

  • Texture repeat
  • Circular drawing brush (probably with soft edges)

…that will take some more extensive code. The previous 3rd party extension did some of this with custom shader code. (source). That would be more performant than DynamicTexture, but requires some shader expertise.

If you want do the same using DynamicTexture, then you will want to look at how to use more advanced Canvas drawing techniques. The texture repeat would be relatively easy and mostly math. Drawing as a circle involves using canvas clipping methods. Drawing with soft edges is bit more difficult. Depending on what you are doing, you might want to look in to using Canvas filters or a canvas drawing library that supports soft edges, blur, etc. There are also posts on StackOverflow about how to blur the edges of a canvas clip mask. You would use the library, or technique, to draw on to the canvas that underlies the DynamicTexture.

2 Likes
3

Thank you so much for taking your time for this.
I got it. Definitely I will take a look at it
For now, I am struggling to transform this pg to sync functions. I am missing something on loadImage and paintImgPromisesResults. Is it possible to change it for me?

4

Hi @mathus1
I also implemented the drawing in my project like the playground of @kaliatech.
For the repetition I used a loop that fills the space from the previous position to the actual position at each move event (here is the playground).
For the soft edges in my case it was not necessary to repair them.

1 Like
5

Hi
I managed to remove the async function

But the repetition you’re referring to is the texture overlapping on drawing or the UV scaling ?

6

Here is another variation of reb-ic’s PG that removes the async handling and keeps everything else:

the repetition you’re referring to is the texture overlapping on drawing or the UV scaling

I believe @reb-ic’s example was showing how to repeat brush paints between mouse movement updates, providing a smoother drawing effect. That is different from the original PG that, in addition to brush texture scaling, also allowed changing the brush texture repeat pattern within each brush paint.

7

Thank you so much for your assistance.
I guess I will try to work with the texture repeat first. However, I don’t know exactly on what line number that deals with texture repeat. I tried to modify some values, but it didn’t work

8

I found one pg that might help me a lot: https://www.babylonjs-playground.com/#1OQFOC#91