jhadenfeldt

How to use content of any canvas as a texture

Recommended Posts

I have a canvas and want to use it's content as a texture. I assume there is a way to use dynamicTexture for that, but couldn't find out a way to do that.

I've created a demo here: https://codepen.io/anon/pen/mQVLaJ I'd like to use the content of the canvas ("Hello World") as the texture for the plane. (I know that I could write the text directly to the dynamicTexture. The text in the example is only for demo purposes. In my project it won't be text.)

 

Share this post


Link to post
Share on other sites

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

   var canvas = document.getElementById("can");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0,0,150,150);
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(d,d,d,d); 
        
        var embed = canvas.toDataURL('image/jpeg', 1.0);
        
        var img = document.createElement("img");
        img.onload = function(){
              var txt1 = new BABYLON.Texture(this.src,  scene, true, true, 
                BABYLON.Texture.BILINEAR_SAMPLINGMODE,  null, null, this.src, true); 
               plan.material.diffuseTexture = txt1;
                
        };
        img.src = embed; 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.