Textures from Canvas?

[Toushin]

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.

[GameMonetize]

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();

[joshcamas]

Yea, it's fully possible!

 

I'm actually working on the same type of project, funnily enough: http://steinhauer.x10.mx/editor/versions/1/ (Dead Link)

 

(click texture painter button)

 

I wish good luck to you

[Toushin]

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.

[GameMonetize]

1. You can access uv streams from a mesh. Here is a sample that play with internal streams:

https://github.com/BabylonJS/Babylon.js/wiki/How-to-merge-meshes

 

 

2. You can initialize it with an object for the size: 

{

 width: 1024,

 height: 512

}

[Toushin]

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?

 

[GameMonetize]

yes

[Toushin]

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);

[Toushin]

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.

[GameMonetize]

sure:

var dynTex = new BABYLON.DynamicTexture("dyntex", {width:1024, height:512}, scene, true);

dynTex.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;

dynTex.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;

[Toushin]

I see, thank you for that ^^