TextureCanvas: A texture for drawing textures onto

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!

11 Likes

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

1 Like

Excellent idea and choose of implementation

2 Likes

Aaaand, we’re live!

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

Thanks, @Deltakosh

2 Likes

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?

no thank you!

1 Like

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

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

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

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

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.

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.

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

Thank you very much @Gijs.

1 Like

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

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

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

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?

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: