solved Swapping texture issue

[freetoplay]

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:

The texture that I want to swap in is:

 

What am I doing wrong here?

[Wingnut]

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.

[freetoplay]

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.

[Wingnut]

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.

[Mark Bufton]

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

[freetoplay]

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.

[Wingnut]

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.

[freetoplay]

Update: The texture issue was caused by inversion. To prevent this change the code to:

 

scene.meshes[2].material.albedoTexture = new BABYLON.Texture("eye2.png", scene, true, false);

 

 

 

 

 

 

[Guest]

Good catch!