noname0310 / babylon-mmd

babylon.js mmd loader and runtime
https://noname0310.github.io/babylon-mmd/
MIT License
123 stars 5 forks source link

About Light Sources #16

Open mono0218 opened 8 months ago

mono0218 commented 8 months ago

I imported a PMX MMD stage and the colors look a little pale. I tried changing the light code to look like the official page, but it didn't cure it. On this page the colors appear as normal. Is there something wrong with the light code?

mono0218 commented 8 months ago

image image

Codes already tried

const hemisphericLight = new HemisphericLight("HemisphericLight", new Vector3(0, 1, 0), scene);
        hemisphericLight.intensity = 1;
        hemisphericLight.specular.set(0, 0, 0);
        hemisphericLight.groundColor.set(1, 1, 1);

const directionalLight = new DirectionalLight("DirectionalLight", new Vector3(0.5, -1, 1), scene);
        directionalLight.intensity = 1;
        directionalLight.shadowMaxZ = 20;
        directionalLight.shadowMinZ = -15;
const directionalLight = new DirectionalLight("DirectionalLight", new Vector3(0, 75, -130), scene);
        directionalLight.direction = new Vector3(100,-75,-260)
        directionalLight.intensity = 10000;
        directionalLight.autoCalcShadowZBounds = false
        directionalLight.autoUpdateExtends = false
        directionalLight.shadowMaxZ = 1000
        directionalLight.shadowMinZ = -1000
        directionalLight.orthoTop = 1000
        directionalLight.orthoBottom = -1000
        directionalLight.orthoLeft = -1000
        directionalLight.orthoRight= -1000
        directionalLight.shadowOrthoScale = 1000

        const shadowGenerator = new ShadowGenerator(2048, directionalLight, true,);
        shadowGenerator.usePercentageCloserFiltering = true
        shadowGenerator.filteringQuality = ShadowGenerator.QUALITY_HIGH
        shadowGenerator.forceBackFacesOnly = false
        shadowGenerator.frustumEdgeFalloff = 0.1
        shadowGenerator.bias = 0.01;

I would appreciate any advice you could give me.

noname0310 commented 8 months ago

This appears to happen when the diffuse color of the model's material is not (1, 1, 1).

Some MMD models use the approach of setting the diffuse color to (0.5, 0.5, 0.5) and the ambient color to (1, 1, 1) to create a material that looks bright in the dark.

However, if we simply import the deffuse and ambient parameters into the StandardMaterial in babylon.js, we will get different lighting results due to the different way ambient color works in babylon.js.

In simple terms, this is due to the different behavior of babylon.js and MMD materials, and can be resolved by applying either of the two codes below.

option1:

const pmxLoader = SceneLoader.GetPluginForExtension(".pmx") as PmxLoader; // If you're using a bpmx loader, modify this
const pmxMaterialBuilder = pmxLoader.materialBuilder as MmdStandardMaterialBuilder;
pmxMaterialBuilder.afterBuildSingleMaterial = (material): void => {
    material.diffuseColor.add(material.ambientColor);
    material.ambientColor.set(0, 0, 0);
};

option2:

scene.ambientColor = new Color3(1, 1, 1);

The second option is theoretically similar to MMD, although the first option usually yields better results

If you have any other questions, feel free to open an issue and I'll get back to you shortly.

noname0310 commented 8 months ago

If you're using post-processing, tone mapping may be the cause

defaultPipeline.imageProcessing.toneMappingEnabled = false;
noname0310 commented 4 months ago

In 0.41.0, the renderer code was refactored across the board, and you should now see exactly the same results as MMD.