Jump to content

How to export a model texture to png or jpg?


hit2501
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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. :D

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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  :D

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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...