Jump to content

Swapping texture issue


Recommended Posts

I am trying a texture for the eye of my character using the following code:

 

 const changeEyeColor = function(e) {
                    scene.meshes[2].material.albedoTexture.dispose();
                    scene.meshes[2].material.albedoTexture = new BABYLON.Texture("eye2.png", scene);
                   }

 

However the result is this:

109717086_Screenshotfrom2018-10-0611-51-34.png.aa3bdff743eba62845a007967e8d1e2c.png

The texture that I want to swap in is:

eye2.thumb.png.91af466bff72e1c5b7e7f267ef4fa94a.png

 

What am I doing wrong here?

Link to post
Share on other sites

Hiya FTP.  https://www.babylonjs-playground.com/#WWGO6#2

Nothing learned, yet.  Just trying some test code in lines 84-89.  Seems to work, so far.  After 6 seconds, albedoTexture on wood... changes.

Can you reproduce your issue... in a playground scene?  That would make life easier for helpers.

And, of course, add lots of console.log(whatever)... such as:

console.log(scene.meshes[2]);
console.log(scene.meshes[2].material);
console.log(scene.meshes[2].material.albedoTexture);

etc, etc.  Make sure everything exsits and is as-expected.

You might also try wrapping it all in a JS try/catch.

Just some ideas.  *shrug*  Other/better answers might be coming soon.

Link to post
Share on other sites
45 minutes ago, Wingnut said:

Hiya FTP.  https://www.babylonjs-playground.com/#WWGO6#2

Nothing learned, yet.  Just trying some test code in lines 84-89.  Seems to work, so far.  After 6 seconds, albedoTexture on wood... changes.

Can you reproduce your issue... in a playground scene?  That would make life easier for helpers.

And, of course, add lots of console.log(whatever)... such as:

console.log(scene.meshes[2]);
console.log(scene.meshes[2].material);
console.log(scene.meshes[2].material.albedoTexture);

etc, etc.  Make sure everything exsits and is as-expected.

You might also try wrapping it all in a JS try/catch.

Just some ideas.  *shrug*  Other/better answers might be coming soon.

Do I have to create a new material or can I just keep my current material and still do the swap? My code for swapping out the texture is posted above, it first disposes the original texture which works since it leaves an empty hole in the eye socket, then I assign the albedoTexture a new texture which semi works because there is no longer a hole in the eye socket, but the Iris is not showing up :( I checked the console.log and it shows that the texture has been swapped.

Link to post
Share on other sites

No need to swap material.  

Try... putting the exact same material.... on a plane.  Does the iris show on the plane?

Could the iris part of of the texture... be offset (slid sideways)?  You will know when you put the same material on a plane.  It might be easier to see the iris, then.

Is NEW texture... same dimensions as old texture?   Might need some new-Texture .uOffset and .vOffset adjustments (slide the texture left/right and up/down on the material), and perhaps some .uScale and .vScale adjustments (adjust height/width of texture).

By putting the same material on an extra plane... you/we might learn more.

Link to post
Share on other sites
1 hour ago, Wingnut said:

No need to swap material.  

Try... putting the exact same material.... on a plane.  Does the iris show on the plane?

Could the iris part of of the texture... be offset (slid sideways)?  You will know when you put the same material on a plane.  It might be easier to see the iris, then.

Is NEW texture... same dimensions as old texture?   Might need some new-Texture .uOffset and .vOffset adjustments (slide the texture left/right and up/down on the material), and perhaps some .uScale and .vScale adjustments (adjust height/width of texture).

By putting the same material on an extra plane... you/we might learn more.

How do I put the the material on a plane?

The textures are both 1024x1024.

 

55 minutes ago, Mark Bufton said:

Why dispose of the previous texture in the function? I ask purely for my own education. Is this for performance reasons?

Normally, I just declare a whole bunch of separate materials and manually assign, use a function or even the animations/assets managers to assign them to the mesh(es).

I no longer need that texture, so I just dispose of it, not sure if there's any performance bonuses with it though.

Link to post
Share on other sites
10 hours ago, freetoplay said:

How do I put the material on a plane?

Just create an extra plane in your scene... basic BabylonJS... https://www.babylonjs-playground.com/#145TKL#1

Then set ITS material as that PBR material you are experimenting-with.

See if you can make eyeballs appear on the extra plane.  IF/WHEN you DO, does the eyeball appear in the center of the plane?  Or, maybe in one corner?

const changeEyeColor = function(e) {
                    scene.meshes[2].material.albedoTexture.dispose();
                    scene.meshes[2].material.albedoTexture = new BABYLON.Texture("eye2.png", scene);
                    var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
                    plane.rotation.x = Math.PI / 2;
                    plane.material = scene.meshes[2].material;
}

That should work... for testing.  After calling this func, look at the plane carefully to see if you can see the eye.  You might need to light the plane.  Good luck.

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...