Jump to content

Textures from Canvas?


Toushin
 Share

Recommended Posts

Hello folks,

 

first to me: I started with BabylonJS and HTML5/JS/CSS just two weeks ago, so I am really a total newb.

 

Now what I want to do:

 

I have a canvas where it is possible to draw pictures with mouse, like paint really. This picture should then function as a texture for a mesh shown next to it, without first needing to save the picture on my server.

In short, I want to change the appearance of meshes by drawing in my canvas.

 

Is this possible at all with BabylonJS and how hard will it be to make it work?

Are there better ways to do what I want? I am open to every suggestion and advice.

 

I have been working on this problem for the last 2 days and I'm at my wits end.

Link to comment
Share on other sites

Hello and welcome!

 

so first of all good news: this is possible!

 

You have to use a DynamicTexture as texture for your mesh's material.

 

This texture is like a canvas. So it is possible to copy pixels from your canvas to this texture just like you would have done between canvases.

 

To get the context of the texture just do the following code:

var texture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);var textureContext = texture.getContext();
Link to comment
Share on other sites

Thanks for the reply.

 

I've been playing around a bit with this now, but I can't seem to get it to work correctly with cylinders, which is what I actually need.

 

I have 2 problems:

1. The DynamicTexture is only shown on the top and bottom areas, the side area seems to show only the topmost row of pixels in my picture. The side area is actually the most important, so the texture should be visible in full there.

My guess would be to do some UV-Mapping, but I have no idea how that works in BabylonJS (I only did that in 3dsMax, and there you usually only drag and resize some rectangles).

 

2. I would like the DynamicTexture to have the same size and proportions as my drawing canvas. Is there a way to do this without changing the constructor in BabylonJS? From what I saw the second value you pass into the constructor seems to be a size in pixels and the texture is then made into a square.

 

As an aside, if my canvas and my texture are not a compatible size, i.e. 256 or 512, the cylinder shows some blank areas. Since I would like to later define the size of the texture with my canvas, I am unsure how that will affect the blank areas.

 

Also if someone would like to look at it, I can provide the code.

Link to comment
Share on other sites

Hello again.

 

Thank you for the link, it really helped me out.

 

I did it like this:

var UVKdata = cylinder.getVerticesData(BABYLON.VertexBuffer.UVKind);for(var i = 0; i < (((cylTess*2)+2)*2); i+=4) {	UVKdata[i+1] = 0;	UVKdata[i+3] = 1;}cylinder.setVerticesData(BABYLON.VertexBuffer.UVKind, UVKdata, false);

In the end, it wasn't that hard to do, I only had to test a little, to find out how the uvkind data is arranged.

 

To point 2: as a clarification, I can only use values for the texture width and height, that are a power of two?

 

Link to comment
Share on other sites

Ok, thank you for your help :)

 

this is my solution for defining a DynamicTexture, getting to draw on it and getting it to show on every side of a cylinder ^^

var dynTex = new BABYLON.DynamicTexture("dyntex", {width:1024, height:512}, scene, true);var texCon = dynTex.getContext();try {	var drawCanvas = document.getElementById("drawCanvas");	var drawCon = drawCanvas.getContext("2d");	var imageData = drawcon.getImageData(0, 0, drawCanvas.width, drawCanvas.height);} catch(e) {};if(imageData != null) {	texCon.putImageData(imageData,0,0);	dynTex.update();} else {	dynTex.drawText("TestText", 200, 256, "bold 50px Segoe UI", "black", "#ffffff");}var UVKdata = cylinder.getVerticesData(BABYLON.VertexBuffer.UVKind);for(var i = 0; i < (((cylTess*2)+2)*2); i+=4) {	UVKdata[i+1] = 0;	UVKdata[i+3] = 1;}cylinder.setVerticesData(BABYLON.VertexBuffer.UVKind, UVKdata, false);
Link to comment
Share on other sites

After reading some more (and trying out other frameworks) to this whole topic I have a new question:

 

Is there an easy way to change texture wrapping in BabylonJS without having to manipulate UV streams like I did it? It seems DynamicTexture uses Clamp to Edge wrapping as a default. In my case somehow changing the wrapping to Repeat would have also solved my problem.

 

I tried looking through the documentation, but couldn't find anything specific for this.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...