# Drawing on a mesh using dynamic texture **URL:** \ **Category:** Questions\ **Tags:** texture, dynamic-texture\ **Created:** [May 7, 2024, 12:42pm UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355 "2024-05-07T12:42:52Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Raviraja](https://avatars.discourse-cdn.com/v4/letter/r/5daacb/32.png) [@Raviraja](https://forum.babylonjs.com/u/Raviraja)\ **Post date:** [May 7, 2024, 12:42pm UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/1 "2024-05-07T12:42:52Z")
In the below playground, I tried to paint on a sphere, the place where I clicked and dragged using mouse was not painted. But for plane it is painted correctly. Why?. Where am I going wrong? > **[Babylon.js Playground](https://playground.babylonjs.com/#0HV3AG%235)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [May 7, 2024, 4:18pm UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/2 "2024-05-07T16:18:32Z")
It does work for me as expected, apart from where the texture meets the edge of the uv coordinates. Think about this texture as a plane texture, mapped to a sphere. Eventually you will get to a point where at least two edges need to touch one another. When the mouse moves between the two areas, you need to compensate for that, otherwise your lastPoint and currentPoint will be 1 unit away from each other (and this is why you sometimes get a ring around the sphere instead of a point). I hope it makes sense… Also, I am not too sure why the math looked like it, but this is a simpler version: [Painting | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#0HV3AG#6) ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [May 7, 2024, 4:32pm UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/3 "2024-05-07T16:32:51Z")
> [@RaananW](#): > > I hope it makes sense I’ve done a quick draft to explain visually : When you hit a stroke with the mouse from A to B on the sphere, it actually paints the stroke on the texture from A to B, with matching UVs ![paint_ok](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/4/e401e294327d45c74556ef166fffc1dbb940f027.png) Now, problem arrives when you paint a stroke accross the vertical limit of the UV : ![paint_no_ok](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/d/ed660f6703a71d5f3f432de39fd0451849792d2d.png) - A to B on the sphere : Little line accross the limit (in red for sake of clarity) - A to B on the texture : Crosses the full frame from right to left. Non only it creates a ring, but the actual path from A to B on the sphere is not even painted ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [May 7, 2024, 4:34pm UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/4 "2024-05-07T16:34:16Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/7/f7072a7dbaa6f00fc0bbb3e527149f3dfb8545a9.jpeg) This is absolutely amazing! ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [May 7, 2024, 5:02pm UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/5 "2024-05-07T17:02:47Z")
Here is a fix : - You detect that there is a jump (distance from two points which use to be a few pixels, is suddently about 512 … - You sort the points along X - You create the middle points a the limits : A2 and B2 - You paint the 2 new strokes, in Green : ```javascript var pts = [lastPoint, currentPoint]; pts.sort((a,b) => { return b.x-a.x; }) var ptA1 = pts[0]; var ptA2 = {x:512, y:0.5*(pts[0].y+pts[1].y)} var ptB2 = {x:0, y:0.5*(pts[0].y+pts[1].y)} var ptB1 = pts[1]; paint(ptA1, ptA2); paint(ptB2, ptB1); ``` ![paint_fixed](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/3/93d01b69c34fcca58c9e1fdef5f6d1065b31c058.png) Here you go : [Playground](https://playground.babylonjs.com/#0HV3AG#7) ++ Tricotou ---
**Author:** ![Raviraja](https://avatars.discourse-cdn.com/v4/letter/r/5daacb/32.png) [@Raviraja](https://forum.babylonjs.com/u/Raviraja)\ **Post date:** [May 8, 2024, 6:32am UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/6 "2024-05-08T06:32:02Z")
Thanks for the reply. This works. For this sphere this is ok, but what if I have a glb model and it has a texture wrapped around it and what will be the dynamic calculation?. Can we arrive at a generic calculation to paint on a any resolution of a texture? @Tricotou ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [May 8, 2024, 7:29am UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/7 "2024-05-08T07:29:18Z")
@Raviraja the trick with the middle points between A & B is indeed valid in the context where the UV structure is known. If you deal with an unknown texture with a complex UV wrap, best is to only calculate the distance, and avoid drawing a stroke in the event of a “jump”. This ➡ [Playground](https://playground.babylonjs.com/#0HV3AG#8) would work on any mesh. Only stuff to adapt is my threshold `if(dist<100)` which should be adapted to the texture size. (for example `textureResolution/5` or `textureResolution/10` etc… It depends on how fast you want to be able to paint) ++ Tricotou ---
**Author:** ![Raviraja](https://avatars.discourse-cdn.com/v4/letter/r/5daacb/32.png) [@Raviraja](https://forum.babylonjs.com/u/Raviraja)\ **Post date:** [May 9, 2024, 10:20am UTC](https://forum.babylonjs.com/t/drawing-on-a-mesh-using-dynamic-texture/50355/8 "2024-05-09T10:20:47Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/b/4b1e1d3ddd7520aa79b7aed09835eaf67a5b6c1e.png) Hi @Tricotou I have a model like this and its texture size is 4096\*4096. But I cannot paint in that correctly. When I paint in its leg it will paint in its face because of the texture wrapped around. How to calculate the correct UV and draw smoothly for all models like this ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/2/72b6f4b30893fb2a83929bb601acffa07e76492f.jpeg) Refer this PG for reference and load your GLB model and its texture in the placeholder > **[Babylon.js Playground](https://playground.babylonjs.com/#0HV3AG%239)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes