solved [SOLVED] Clicking Object to Change Texture Flips Normals

[djeustice]

Good Morning.  I'm new to Babylon JS and JavaScript.  When I click on the Kayak in the scene the texture changes from a peach texture to the blue wave texture, which is perfect.  However the Normals seem to flip.  I have no idea why this is happening.  Should I use different code to achieve the texture change on click?  Thanks.

window.addEventListener("DOMContentLoaded", function() {
    var canvas = document.querySelector("#renderCanvas");
      // Load the BABYLON 3D engine
    var engine = new BABYLON.Engine(canvas, true);
          // -------------------------------------------------------------

var createScene = function () 
{
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);
    BABYLON.SceneLoader.ShowLoadingScreen = false;
    scene.collisionsEnabled = true;
    // glTF Files use right handed system 
    scene.useRightHandedSystem = true;              
    scene.clearColor = new BABYLON.Color3(0.99, 0.99, 0.99);
    scene.debugLayer.show();
    
    var camera = new BABYLON.ArcRotateCamera("Camera", 4.712, 1.571, 0.05, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(85, 55, -115));
    camera.attachControl(scene.getEngine().getRenderingCanvas());
    camera.minZ = 0.01;
    camera.maxZ = 1000;
    camera.lowerBetaLimit = 0.1;
    camera.upperBetaLimit = (Math.PI / 2) * 0.99;            

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 1;             

   // Append sample glTF model to scene
    var myKayak;
    BABYLON.SceneLoader.Append("./models/", "Kayak.gltf", scene, function (newMeshes) {
    }, null, function (newMeshes) {
        myKayak.checkCollisions = true;
        myKayak.ellipsoid = new BABYLON.Vector3(10, 1, 5); 
    });    
    

/// Click to Change Texture ///
    var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);
    BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene);   
    scene.onPointerPick = function(evt, pickInfo) {
        if(pickInfo.hit) {
            if (pickInfo.pickedMesh != null){
                alert(pickInfo.pickedMesh.name);
                pickInfo.pickedMesh.material = BWTexture;
            }
        }
    }    

    return scene;

};     
  // -------------------------------------------------------------
    var scene = createScene();
    engine.runRenderLoop(function () {
     scene.render();
    });

    window.addEventListener("resize", function () {
     engine.resize();
    });
});

 

[GameMonetize]

Hello and welcome:)

you problem comes from the fact that the new material does not have all properties set accordingly to the new one

In this case the backFaceCulling seems different

[djeustice]

Could you please give an example of what the properties might be?  The Kayak.gltf is a model I exported from 3DS Max.  It only has 1 texture in the diffuse slot.  I tested the texture change on a procedural Babylon sphere and it works fine.  How should I modify the material properties on the Kayak.gltf?  Thank you.

Texture Change works on procedural sphere, but not kayak.gltf:

var createScene = function () 
{          

    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
    var Lime = new BABYLON.StandardMaterial("Lime", scene);
    Lime.diffuseTexture = new BABYLON.Texture("models/Lime.png", scene);
    sphere1.material = Lime;   

    var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);
    BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene);   
    
    scene.onPointerPick = function(evt, pickInfo) {
        if(pickInfo.hit) {
            if (pickInfo.pickedMesh != null){
                alert(pickInfo.pickedMesh.name);
                pickInfo.pickedMesh.material = BWTexture;
            }
        }
    }    
    return scene;
};

[GameMonetize]

AS I mentioned earlier I think the difference comes from the backFaceCulling property (http://doc.babylonjs.com/babylon101/materials#back-face-culling). Just set it up like it was previously set up:

var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);

BWTexture.backFaceCulling = pickInfo.pickedMesh.material.backFaceCulling

pickInfo.pickedMesh.material = BWTexture;

 

[djeustice]

Thank you, this worked!  The Kayak switches textures from Peach to BlueWave.png.  Here's the code that worked for me, thanks again!

    scene.onPointerPick = function(evt, pickInfo) {
        if(pickInfo.hit) {
            if (pickInfo.pickedMesh != ground){
                alert(pickInfo.pickedMesh.name);
                
                var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);
                BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene); 
                BWTexture.backFaceCulling = pickInfo.pickedMesh.material.backFaceCulling;
                BWTexture.diffuseTexture.hasAlpha = false;
                BWTexture.backFaceCulling = false;
                pickInfo.pickedMesh.material = BWTexture;
            }
        }
    } 

[apptaro]

just for a note, backFaceCulling = false, is just a workaround here.

The correct way is to copy backFaceCulling and sideOrientation . See