Painting onto texture and normal map

Questions
1

Can this be applied to paint normal maps and height maps? Or even emission maps?

I’m trying to create something like a map editor.

2

Adding @Gijs who is the creator of the lib, in case he has some inputs about this.

2 Likes
3

Hi @_Cri5 , yes you can use it like that, because TextureCanvas is just another texture, so you would need 1 TextureCanvas per map; but I do realize now that the name diffuseTexture on TextureCanvas can be misleading.

Here is a demo with painting stones and their normal map, using two of TextureCanvas:

https://playground.babylonjs.com/#6L9RK1#1

3 Likes
4

Thanks for the help.

I was trying to use this tool to paint over a ground created from a height map. It works, but it behaves very strange.

https://www.babylonjs-playground.com/#DK424Y#18

What could be the problem?

5

@_Cri5 it’s because on line 108 there are some hard-coded size values, here I’ve adjusted them for your ground:

https://www.babylonjs-playground.com/#DK424Y#19

1 Like
6

Can you explain what “getUV” is exactly for? How did you come with those values?

I can’t figure it out.

Also, is there a way to save the materials textures to the local computer? (diffuse texture, height map texture, etc.)

7

Here is the example how to save dynamic texture to local computer - https://www.babylonjs-playground.com/#CA4SM#1
As for getUV - this is just custom function to transform pickedPoint position to brush position.
Sorry, don’t have time atm to explain more, but consoling and API docs will definitely help to understand how it works.

1 Like
8

@_Cri5 u and v are a texture’s x and y, and they go from (-1,-1) to (1,1), and getUV is just turning the picked point into that space.

Here is a later PG, on line 166 it shows how to get the image data from the texture printed to the console, this is the imageurl from the example @labris provided:

https://www.babylonjs-playground.com/#DK424Y#15

2 Likes
9

Ohh, I’m kinda getting it now.

let getUV = (vec) => {
        let size = ground.getBoundingInfo().maximum.x;
        return vec.subtractFromFloats(-size, 0, -size).scaleInPlace(0.5 / size);
    };

The size would be like the size of the plane/ground divided by 2(basically).

But now what is the 0.5 value there? Where do I get it from?

Edit: Now that I look at it… I think it was just for dividing the size by 2 maybe? I think that’s it.

1 Like
10

Look, I have achieved this:

TextureCanvas demos | Babylon.js Playground

Draw something and wait 5 seconds.

It didn’t work with the module you added there so I had to use this module:

https://poolminer.github.io/BabylonTextureCanvas/dist/textureCanvasNoModule.js

from here:

TextureCanvas demos | Babylon.js Playground

I tried to use another texture for the brush but for some reason it doesn’t work.

Also can the brush orientation be changed?

1 Like
11

Hi @_Cri5 , glad to see you achieved that nice playground! Sorry I didn’t see your other post.

Only the entire context can be rotated, not the diffuse / opacity texture individually, and other brushes should work, it needs transparency. Brush & rotation:

https://www.babylonjs-playground.com/#9S5YZY#59

1 Like