Why are similar material diffuse colors inconsistent with different light intensities?

[Rokas_Mackevicius]

Hello,

I’m trying to match the colors of a material with a diffuse texture, and a material which has a matching diffuse color.

However, I’m not getting a lot of detail on the diffuse texture under the default light intensity, and when I ramp it up, the two materials change colors at completely different paces.

As you can see, I’m getting them to mostly fine on the left side, but I can’t make out any facial detail, on the right you can make out facial detail, but it also illuminates the rest of the skin way too brightly.

Meanwhile in Blender I can achieve this:

With blender render and the default light. Similar results with a hemi-light. No need to ramp up the intensity, but even if I do, all materials brighten equally:

Using the exact same texture both in blender and babylonjs as well. Lambert material in blender, default in babylonjs.

This is the lighting and material code:

var light = new BABYLON.HemisphericLight("hemilight", new BABYLON.Vector3(0,1,0), scene);
    light.intensity = 1; //3-4 to see any revelant facial detail

var skincolor = new BABYLON.Color3.FromHexString(globalSkin);

//meshes array are just different body elements of the same body

meshes[0].material.diffuseColor = skincolor; //skin color applied everywhere else besides the front face
meshes[0].material.specularColor = new BABYLON.Color3(0, 0, 0);
meshes[1].material.diffuseColor = skincolor;
meshes[1].material.specularColor = new BABYLON.Color3(0, 0, 0);
meshes[2].material.diffuseColor = skincolor;
meshes[2].material.specularColor = new BABYLON.Color3(0, 0, 0);

var f = new BABYLON.StandardMaterial("myMaterial", scene); //face texture
f.specularColor = new BABYLON.Color3(0, 0, 0);
f.diffuseTexture = new BABYLON.Texture("../u/"+id+"/f.jpg", scene);
meshes[3].material = f;
        

[Deltakosh]

Hello you could probably boost it up by using emissiveColor of your specific material

Other option is to set the mat.ambientColor to white and play with scene.ambientColor

[Rokas_Mackevicius]

setting the emissiveColor to

f.emissiveColor = new BABYLON.Color3(1, 1, 1);

Does the trick in terms of lighting up the face, but how can I match it to the rest of the skin material? If I set all of the materials to the same emmisiveColor, the ones without a diffusetexture just turn white.

Setting the emissive color for the skin to a darker one to match the face seems like a lot of manual fine tuning.

(Thanks a lot for the help by the way)

[Deltakosh]

Let me bring in some Blender expert as there is obviously something to do with the tool here

@Vinc3r / @gryff

[Rokas_Mackevicius]

Cheers,

Just to clarify, this isn’t a blender scene export to babylon, it’s an obj/mtl import through both blender and babylon js.

[Deltakosh]

Oh. And how does it look like when exported from blender?

[JCPalmer]

Just a guess, but I think he is importing an obj to both, and trying to compare with how Blender & BJS handle light intensity differently.

[Rokas_Mackevicius]

Right on the money.

How can i achieve the same consistency among diffusetexture and diffusecolors that blender has when changing light intensities?

I’ll try a whole scene export to see how it’s handled.

[Vinc3r]

Is it possible to import your model into a playground, or at least to have an online demo with the Inspector enabled?

[Rokas_Mackevicius]

I tried exporting via blender as a babylon scene as a test.

As you can see on the left, the emissiveColor in babylon js now matches what blender outputs without having to mess with it(the face diffuseTexture shows an appropriate amount of detail).

As you can see on the right, the materials still change inconsistently when I ramp up the light intensity:

    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        BABYLON.SceneLoader.Load("/scene/", "untitled.babylon", engine, function (newScene) {
            newScene.executeWhenReady(function () {
                newScene.activeCamera.attachControl(canvas);
                var skincolor = new BABYLON.Color3.FromHexString("#423023"); //test color even darker than the face
                newScene.materials[1].diffuseColor = skincolor;
                newScene.materials[2].diffuseColor = skincolor;
                newScene.materials[3].diffuseColor = skincolor;
                newScene.materials[5].diffuseColor = skincolor;

                console.log(newScene.lights[0].intensity = 4);
                engine.runRenderLoop(function() {
                    newScene.render();
                });
            });
        }, function (progress) {
        });
    }