Drawing on 2D canvas texture and rendering to 3D object

Hi everyone,

I want to ask, is there any possibility to draw on the 2d canvas texture and the results of the drawing appear on the 3d canvas. I have an example in threeJS which I attach below. Thank you.

https://threejs.org/examples/webgl_materials_texture_canvas

Hey @ilhamachmada

Great question. I’m positive there are multiple different ways you can accomplish this in Babylon.

One way you can accomplish this is to use the renderTargetTexture to capture the viewport from one camera, and then use that as a texture to apply to surfaces on 3D objects. it all updates in real time and we actually have a tutorial series that covers the subject as well.

Here’s a few resources where you can check it out:
https://doc.babylonjs.com/how_to/how_to_use_rendertargettexture_and_multiple_passes#creating-a-rendertargettexture

https://doc.babylonjs.com/api/classes/babylon.rendertargettexture

Here’s a playground that uses the technique for the water caustics effect:

Lastly, here’s the video series that covers the subject.

the specific video that covers the render target texture is this one:

Hope this helps! Again, probably not the only way to do it, but definitely one of them :slight_smile:

3 Likes

Actually this is really easy and you can use our HtmlElementTexture for this: https://playground.babylonjs.com/#1CTR5T#1

Basically it simply wraps any canvas element and you just need to call update on it to refresh the associated webgl texture.

4 Likes

Hey @PirateJC @sebavan

Thank you for replying to my question, from your answer I got some clues on how to solve it. Finally, I managed to solve the problem. I use fabric.js as a 2D canvas and then I embed it into a dynamic texture with a 3D canvas. So that I can control the image on the 2D canvas and then it will be rendered in real time to the 3D canvas. Thanks again for the answer. That helped me very much… :+1: :+1: :+1:

4 Likes

most of the code exmple links are not working