How to export a model texture to png or jpg?

[hit2501]

Hi.

Can anybody help me?

I have a model exported from blender and until now I can barely move, scale and rotate the texture (with uvScale, uvOffset, uvAng)but what I need to know is how can I do a function to export the modified texture (after moving, scaling and rotating) to jpg or png?

If you know where I can find a live example you'll be my god

Thank you all.

[Convergence]

Textures are generally edited in an external application like Photoshop, or for basic rotating and scaling purposes even MS Paint might suffice.

 

If you are referring to the way a texture wraps around a mesh, that is called UV mapping, in that case the texture doesn't need editing, rather the mesh (UV values) does.

[MarianG]

Interesting question. I have a heightmap like here and I'm curious if I can save texture on the ground as image too. 

Maybe using this. 

[iiceman]

Well, if you use a dynamic texture I am pretty sure you can get the canvas for this texture and use canvas.toDataURL("image/png"); or something similiar.

[hit2501]

Yes, I'm using dynamic texture iiceman, how can I use that method? and if I use canvas.toDataUrl this would show the modified texture (what I want) or the original texture?

Thanks for reply.

[iiceman]

Well, I remember we had this one here: http://www.babylonjs-playground.com/#9U086#34 (you might have to click the run button twice to make ti work)

 

If I add the toDataURL thing (on line 77) I get the texture image: http://www.babylonjs-playground.com/#9U086#72

 

It throws some errors though.. not sure what's going on here. But it basically seems to work so you can play around with that.

[dbawel]

To make the process simple, you should begin in Blender with a jpg or png, at the power of 2 resolution for your needs.  Then there is no need to convert seperately, and I assume you're UV mapping performance will improve - depending on what image format you've chosen.

 

But if you must use what you already have, then this free online converter will do the job:

http://image.online-convert.com/

[hit2501]

My target is to modify the offset, scale and ang of a texture dynamically thats the reason I must make it work on bjs instead Blender.

 

Now I must do it only with images and not anymore with text and colors. I´m using this code to load the texture from an input type=file:

function handleFileSelect(evt) {   var files = evt.target.files; // FileList object                               // Loop through the FileList and render image files as thumbnails.   for (var i = 0, f; f = files[i]; i++) {      // Only process image files.      if (!f.type.match('image.*')) {          continue;      }      var reader = new FileReader();      // Closure to capture the file information.      reader.onload = (function(theFile) {         return function (e) {            var image = e.target.result;            texture = new BABYLON.Texture('data:my_image_name', scene, true,                                            true, BABYLON.Texture.BILINEAR_SAMPLINGMODE,            design1.material.diffuseTexture = texture;            design1.material.specularTexture = texture;            scene.registerBeforeRender(function () {                 if(effects==0){                      texture.wAng = twist/60;                      texture.uOffset = imageX/100;                      texture.vOffset = imageY/100;                      texture.uScale = 300/sizes;                      texture.vScale = 300/sizes;                 }else if(effects==1){                      texture.uOffset = 0.12;                      texture.uScale = 4;                 }else if(effects==2){                      texture.uOffset = 0.12;                      texture.uScale = 7;                 }            })         };      })(f);      // Read in the image file as a data URL.      reader.readAsDataURL(f);      }      cambiarImagen(this);  }

How can I do it?

 

Thank you all.

[GameMonetize]

Something is missing here:

texture = new BABYLON.Texture('data:my_image_name', scene, true,
true, BABYLON.Texture.BILINEAR_SAMPLINGMODE,xxxx

[hit2501]

oh sorry I must put , engine, false at the end. Regarding my doubt, I checked the iiceman example but only works with dynamic texture, is there a way I can do it with StandardMaterial?

 

I´m new with textures so apologize if my question is too basic

[GameMonetize]

textures are used by standardMaterial

 

So you can do whatever you want with the dynamic texture and then use if like this for instance: material.diffuseTexture = myDynamicTexture

[hit2501]

I changed my code to a easiest one so I can understand. For the texture I used first:

var design1 = scene.getMeshByName("Design1");var material = new BABYLON.StandardMaterial('newMaterial', scene);material.diffuseTexture = new BABYLON.Texture("images/myimage.jpg", scene);material.specularTexture = new BABYLON.Texture("images/myimage.jpg", scene);design1.material = material;

And it works, later I tried to put a dynamic texture:

var design1 = scene.getMeshByName("Design1");var dynTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);var material = new BABYLON.StandardMaterial('newMaterial', scene);material.diffuseTexture = dynTexture;material.specularTexture = new BABYLON.Texture("images/myimage.jpg", scene);design1.material = material; 

And this function to export:

function exportTexture(){   var image = renderCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");    window.location.href=image;} 

But now I can´t see the model and when I try to export I only get a file (that I need to rename to xxxx.JPG to be able to see it) which is entirely black. 

 

I know I'm making a mistake between dynamic texture and the image I want to put but I don´t know where the error is.

[GameMonetize]

can you share a demo somewhere?

[dbawel]

Does it render correctly, and the problem now is only in the export?  And as DK posted, any link to a demo would alow the community to review whatever issues you might have.

[hit2501]

Thanks. I uploaded here:

 

http://concept.wec360project.se/configurator02.html

 

Its incomplete yet but the working functions you can see it on video here:

 

 

I removed the dynamic part.

[GameMonetize]

So can you point out where the issue is?

[hit2501]

What I´m looking for is that after you move or rotate or scale the texture and press the "Download texture" button you get the modified texture in jpg or png.

 

As you can see when you press de Download texture button you only get a file that need to be renamed with .jpg extension to be able to see it and is only black instead the modified image texture. My point is:

 

-How can I get the image texture after modifications?

-How can I get the image with jpg extension?

 

Thanks Deltakosh.

[GameMonetize]

Your question about adding .jpg extension is more about javascript I guess (you should try on stackoverflow)

 

For you question about saving the modified texture, you should be able to use something similar to this to save the content of a canvas (I assume you use a canvas for the right top control where you manipulate the texture)

[hit2501]

The right-top canvas (id="canvas") is only for user interface purposes and manipulating, is not useful to export.

 

I dont know if this is the right word but I want "unwrap" the modified texture (id="renderCanvas") of the 3d model and save it as jpg or png.

 

I´ll try to adapt your example, wish me luck

 

Thanks.

[dbawel]

hit2501,

 

I'm looking forward to what you come up with, as I will need to do the very same operation in an app I'm trying to complete this month. Whatever you discover, please keep this discussion going until we have a solution, and I'll do all I can to assist.  I need to be able to save a modified texture from it's material - as I'm using different texture types (diffuse, emmisive, and dynamic) and need to unwrap and save these in an app session; to use again in the session as well as save to disk. This is essential for my app to be completed, so I'm keeping a close eye on this topic, as well as participate as much as I am able.  Godspeed.

[eljuko]

Hey,

 

if u just need to download the image from canvas, see how i did @ http://www.eljuko.com/snipplet/7k5P

(u should see a blue disk soon at the top righthand corner, just inspect it in chrome or do whatever if u use different browser)

 

I think u can just tell the format in data blob. like "data:image/jpeg;base64,iVBORw0K...." or "data:image/png;base64,iVBORw0K"

 

Hope this helps.

 

Pardon me, the code might be a little bit messy. I made the project just to see if i could make it and abandoned it the next day 

[hit2501]

Thanks eljuko but what I need is to unwrap the texture of the model (3d canvas), not 2d canvas, I know that to my model the unwrap texture would be like this:

http://concept.wec360project.se/images2/10.jpg

 

And dbawel dont worry, I'll put here when I find the solution. I only hope to not design and use math formulas because that way could be take too much time. 

[dbawel]

Thanks hit2501.  I have other priorities first, but this will need to be my key focus in a week or two.  If you find a solution to unwrapping and saving a texture with multiple images making up the texture as well as modifications made in BJS (such as painting on the object which is what I'm doing), then I will be eternally grateful. 

 

Otherwise, I'll join you in this essential task soon, and we'll find a way to get it done.

 

Is there a way currently to save each component of a texture as an image file such as a dynamic texture which has been modified in BJS?

 

Cheers,

 

DB

[hit2501]

dbawel have you checked the iiceman's examples, maybe it can help you:

 

http://www.babylonjs...d.com/#9U086#34 (you might have to click the run button twice to make ti work)

http://www.babylonjs...d.com/#9U086#72

[dbawel]

Hi,

 

Actually between iceman's and a previous palyground scene posted by jahow, I believe we have our answer - at least these provide me with the tools I will need to use in my app.  Here is the scene posted by jahow:

 

http://www.babylonjs...nd.com/#CA4SM#1

 

@hit2501 - I won't be able to test this in the next few days as I'm leaving for Thailand, but I'll be working while travelling (hopefully).  But if you get the chance to test this in your function first, please let me know.  And thanks much to iceman and jahow.

 

Thanks,

 

DB