Material difference

Questions
1

why image and material texture are seen difference

Screenshot 2023-12-18 143524
Screenshot 2023-12-18 1435241331×765 107 KB

self.addtexture = new PBRMaterial(“texture”, self.scene);
self.addtexture.roughness = 1;
self.addtexture.metallic = 0;

self.addtexture.albedoTexture.hasAlpha = true  //self.modalpaperInfo.hasAlpha;
self.addtexture.transparencyMode = Material.MATERIAL_ALPHABLEND;
self.addtexture.useAlphaFromAlbedoTexture = true;

// // self.addtexture.alpha = 0.5;
self.addtexture.backFaceCulling = true;

if (self.scene.getMeshById(“editor-page”)) {
self.scene.getMeshById(“editor-page”).material = self.addtexture;
// console.log(self.scene.getMeshById(“editor-page”).material);

}   SceneEnvironment(){

    if(this.modalpaperInfo.evntexture === undefined){
    this.evntexture = environment[global.env].RESOURCE_URL_AMAZON + environment[global.env].RESOURCE_CONTAINER + environment[global.env].oemCode + "/preview/" + "env-default.env";
     console.log(this.evntexture)
    }else{
      this.evntexture = environment[global.env].RESOURCE_URL_AMAZON + environment[global.env].RESOURCE_CONTAINER + environment[global.env].oemCode + "/preview/" + this.modalpaperInfo.evntexture;
    }
      const envTexture = CubeTexture.CreateFromPrefilteredData(
        // "./assets/environment/studio.env"
        this.evntexture
        ,this.scene)
     this.scene.environmentTexture = envTexture;
     if(this.modalpaperInfo.Intensity === undefined){
       this.scene.environmentIntensity = 0.7;
     } else{
      this.scene.environmentIntensity = this.modalpaperInfo.Intensity ;
     }
      var blur = 0.6;
      this.skybox = this.scene.createDefaultSkybox(envTexture, true, 10000, blur, true);
 }

CreateScene(scene: Scene, canvas: HTMLCanvasElement) {
this.createcamera();
this.light = new HemisphericLight(“light”, new Vector3(0, -1, 0), scene);
this.light.intensity = 0.7;
this.SceneEnvironment();

this.modelLoad()
scene.clearCachedVertexData();
scene.cleanCachedTextureBuffer();


return scene;

}

2

Hi,
Seems like you are using a PBR material. PBR will take from the scene environment (as in i.e. scene.environmentIntensity = 0.7;). If you want your picture to show exactly the way it is (in the colorspace), you should make it unlit. Although, given that it is ‘unlit’, you can also use the simpler, less heavy, standardMaterial. Something like this:

var myflatpictmat = new BABYLON.StandardMaterial(“myflatpictmat”, scene);
myflatpictmat.diffuseTexture = new BABYLON.Texture(“textures/mypict.jpg”, scene);
myflatpictmat.emissiveTexture = myflatpictmat.diffuseTexture;

  • or - on a PBR material, simply set unlit, which will remove all properties related to light (means you don’t need to set’em)

myflatpictmat.unlit = true;

Note: In case of standardMaterial, the emissive alone should be enough.

2 Likes
3

but i want to use some glossiness and real reflection of the environment

4

Ok, but then you need to set a very low level of environment intensity on the material, so you catch just a very little of it.
You can clone your env texture and set a level to the clone of something between 0.03 to 0.12.
Then assign this clone as your reflectionTexture.