PBR on local wont match playground

So I have been struggling to get my PBR on my local scene to match the Playground results when constructing a PBR material that uses the all the same textures including the environment.

No matter what I do it seems that the local version refuses to do anything with the metallicRoughnessTexture that I assign to it.

I compared console outputs for both materials and they seem to be the same.

Local is on the right, online playground is on the left.
I am using ‘https://preview.babylonjs.com/babylon.js’ as my version.

its different textures but here are the PBR settings I am using.

I know it’s not the textures as well because if I use the same one from this PG i get the same shiny results on my local.

Watch it’s something dumb like i’m not referencing the right version of bjs.

Invoking the almighty @sebavan

@pryme8 we definitely need a repro to check what it could be cause like this it sounds pretty weird.

Ill try to recreate. I’m just not sure how persay… What if I send you the file I am working on and see if it does the same on your local?

The reason I say it’s weird is as far as I can tell its using all the same files and settings but giving different results.

The only difference is one has an assetManager building all the assets prior to the scene load, but its setting all the same stuff so I’m stooped.

Let me recreate it in a playground I guess and see if maybe I’m just doing something dumb. If you have a few mins today @sebavan and its not to much to spin up a local server for you would it be possible to just send you the quick zip of the index.html and the assets that are being used if not then no biggie. That’s just the fastest way I can think of to see if its something Im doing or if its a glitch.

Ok its not my local setup then its my scene setup.

I know it seems kinda convoluted. So let me explain whats going on there is a list of objects that get loaded into the assetManager one at a time and only goes to loading the next asset after the ones above it are done. So the textures get done first, then the materials, then the meshes.

It should be setting all the correct stuff, but maybe I am missing something here.
Line 165 is where the PBR is constructed

There are way way way more assets that get compiled on my local version this is like a super simplified version of the asset parsing I am doing. But if I can fix this then Ill at least know what is going on.

The odd part is if I bypass my function that builds it an manually do it to make sure all the textures are bound and that I’m using all the same constructor parameters as the working example on the playground I still get the same results. So I am wondering where I am doing the wrong thing. Im assuming its gotta be the ORM material is not binding correctly or something dumb.

Could you share what it should look if working ?

look at the image in the top post, it should look like the left image but on the correct mesh.

The left image is on the playground with the settings that “work” and then the right is the same setting but in the scene I just shared. And the only difference is its on a mesh not a plane.

Odd now this works:

But then if I clone these setting over to my setup it does not.

I can rule out it being a bug though, it has to be something up with my setup.

Its just odd that this works:

let cobbleMat = new BABYLON.PBRMaterial("CobblePath", scene)
    cobbleMat.reflectionTexture = hdrTexture   
    cobbleMat.albedoTexture = new BABYLON.Texture('https://cdn.jsdelivr.net/gh/Pryme8/Playground_Dump@59d8d8bb3d6ffc32e56d92caddc8513cf3224bab/Rock_and_Grass_Kit_Texture_Setup_Light_albedoColor.png', scene)
    cobbleMat.metallic = 1.0; // set to 1 to only use it from the metallicRoughnessTexture
    cobbleMat.roughness = 1.0; // set to 1 to only use it from the metallicRoughnessTexture
    cobbleMat.metallicRoughnessTexture = new BABYLON.Texture('https://cdn.jsdelivr.net/gh/Pryme8/Playground_Dump@59d8d8bb3d6ffc32e56d92caddc8513cf3224bab/Rock_and_Grass_Kit_Texture_Setup_Light_metallicTexture.png', scene);
    cobbleMat.useRoughnessFromMetallicTextureAlpha = false
    cobbleMat.useRoughnessFromMetallicTextureGreen = true
    cobbleMat.useMetallnessFromMetallicTextureBlue = true
    cobbleMat.useAmbientInGrayScale = true
    cobbleMat.bumpTexture = new BABYLON.Texture('https://cdn.jsdelivr.net/gh/Pryme8/Playground_Dump@59d8d8bb3d6ffc32e56d92caddc8513cf3224bab/Rock_and_Grass_Kit_Texture_Setup_Light_bumpTexture.png', scene);
    cobbleMat.bumpTexture.invertZ = false

While parsing the setting from this does not:

        'type' : 'material', 
        'name' : 'Rocks_KitA_PBR',
        'subType' : 'PBRMaterial',
        'reflectionTexture' : 'loadedAssets.textures.basicEnviroment',
        'albedoTexture' : 'loadedAssets.textures.RockKitADefaultColor',
        'metallic' : 1,
        'roughness' : 1,
        'metallicRoughnessTexture' : 'loadedAssets.textures.RockKitADefaultORM', 
        'useRoughnessFromMetallicTextureAlpha' : false,
        'useRoughnessFromMetallicTextureGreen' : true,
        'useMetallnessFromMetallicTextureBlue' : true,
        'useAmbientInGrayScale' : true,
        'bumpTexture' : 'loadedAssets.textures.RockKitADefaultBump', 
        'bumpTexture.invertZ' : true,

Line 166 is where this get parsed and the PBR is created.

You should try to look into how you load the environment Texture, it looks like it is the culprit.


I was just getting to that… haha damn it sometimes just talking through this makes me realize how dumb I can be sometimes…


there was a copy and paste error in my addCubeTextureTask constructor. >_<