TextureCanvas: A texture for drawing textures onto

Demos and projects
1

Hi all,

Let me introduce you to TextureCanvas: a Babylon Texture just for drawing other textures. Compared to DynamicImage for drawing textures or images, it has the benefit of having all resources directly available to it on the GPU, and providing a specialized API.

Here’s the GitHub page, which also includes three demo playgrounds and the documentation:

Here’s an example of something you can do with it, which is painting textures on a plane:
https://www.babylonjs-playground.com/#DK424Y#4

This is an ongoing project, and any feedback would be appreciated!

Edit:

Now available on BJSPM, with a new GitHub repository:

13 Likes
2

This is excellent!!!
That should be on our extension repo for sure!

1 Like
3

Excellent idea and choose of implementation

2 Likes
4

Aaaand, we’re live!

https://doc.babylonjs.com/extensions/texturecanvas

Thanks, @Deltakosh

2 Likes
5

Hey I’m on a phone that only likes ambient or emissive textures, is there a way or example available for devices with remedial texture support?

6

no thank you!

1 Like
7

Hi, you can just set a material’s emissive texture to be the canvas, like in the draw example & the playground on the bottom of the doc

1 Like
8

I had missed this subject. It’s really cool. I keep it aside. And it works very well, much better than what I did for my field editor.

Thanks for that Gijs

1 Like
9

Is there a way to tile a texture as it scales down (like what happens when scaling a texture on a mesh)?

10

Like in this playground (texture repeat)?:

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

There’s no built-in scaling like that at the moment

2 Likes
11

Hi @Gijs,

Great playground. I have the impression that you can use an unlimited number of textures with this method. :+1:

I was wondering how to save the final texture?

Before I’ve : textureGround._canvas.toDataURL()
Then with php I generated the texture.

But now I can’t save it that way : https://www.babylonjs-playground.com/#DK424Y#10

Do you know how to do it ?

Thank you in advance.

12

Quick question, why would I choose to use this over a DynamicTexture?

Just wondering, I like whats going on here.

UPDATE
Never-mind, after reading more of what you are doing I could see different uses for it.

13

Thanks @Dad72, you can use an unlimited number of textures. The TextureCanvas is just another texture, so you can save it like you would any other texture:

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

1 Like
14

Thank you very much @Gijs.

1 Like
15

I tried to use a ground instead of a plan. But it doesn’t seem to work on a pitch anymore.
Is there a reason for this or I forgot something?

Thanks again @Gijs

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

16

You forgot to adjust the getUV function, the one in the PG was specifically made for that plane. It turns picked point coordinates into uv coordinates:

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

1 Like
17

Ah, ok, I had completely missed it. Thanks Gijs

18

Sorry for all my questions. Why should we turn on the light with an intensity of 0.

All the objects in the scene are no longer lit suddenly.

When I set the intensity to 1.0, we no longer see the texture that we are painting. Is this the expected behavior of this extension?

19

No worries, the light is set to 0 because the texture is set as emissiveTexture only, so there is no need for light. It is expected BJS behavior:

20

Hello @Gijs

First thanks for share this code! Second I tried to use the “save part” and is not working, I get this error on browser

“Uncaught DOMException: Failed to construct ‘ImageData’: The input data has zero elements.
at :169:27”

using this PG https://www.babylonjs-playground.com/#DK424Y#14

Thanks for any help!

1 Like