MMDLoader Colorization Issue

[ep5000]

Description

When using recent versions of Three.js (155) the MMDLoader appears to be loading PMX files with washed out colors. Using the code from the following link: three.js webgl - loaders - MMD loader , the Miku model renders fine (this is an older PMD file with simpler textures), but trying it against another, newer PMX file the colors appear very washed out. See the following result:

It seems that the colorization on MMD files has been broken since r92. Loading the file using the older r92 Three.js code works fine (see the following):

Reproduction steps

1. Use MMDLoader for example using the code from the following MMDLoader example: https://threejs.org/examples/webgl_loader_mmd.html
2. Replace the PMD file referenced within the code with any PMX file
3. Observe the results

Code

const modelFile = 'models/mmd/miku/miku_v2.pmd';  **// Replace this with any .pmx file**
const vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];

Live example

https://jsfiddle.net/jasondalycan/cum250ad/1/

Screenshots

No response

Version

r155

Device

Desktop

Browser

Chrome, Edge

OS

Windows

[donmccurdy]

Would you be able to share an example .pmx file?

[GitHubDragonFly]

Just to try to help with this conversation.

I would agree with @jasondalycan about the colors looking washed out, at least in my MMD Viewer with all the models I tried - this viewer is using r131 of the three.js so I was blaming it on that fact.

There is an example .pmx file available in one of the GitHub public repositories:

https://github.com/oecax2208/PyMikuMikuDance/tree/master/example/vdproject_peach_v1

A part of its copyright notice, when translated into English by the Google Translator, suggests the following:

This resource is a public resource, and any adverse consequences caused by the user have nothing to do with the producer. This resource is allowed to be used in any legal non-commercial activities, but it is necessary to indicate the name of the model and the source of the model in a prominent position of the work as follows: Model source: Virtual Dimension Project - Xiaoxi (vdproject.com) ...

[takahirox]

It helps investigation if someone shares PMX file that looks weird on Three.js and also shares the screenshot of it on MMD with us.

[donmccurdy]

It looks like we are missing the color space assignments on textures, which didn't have a visible effect on the current test model. In the example attached above, all of the textures appear to be color textures, and we could just assign sRGB.

Does this format support non-color textures, like normal maps, roughness, or glossiness? As far as I can tell the loader does not, but we'd need to assign a different color space if so.

[donmccurdy]

Proposed fix:

• MMDLoader: Apply color management to textures. #26554

[takahirox]

Does this format support non-color textures, like normal maps, roughness, or glossiness?

No.

It looks like we are missing the color space assignments on textures,

Yes, good catch.

@jasondalycan Can you test your PMX files with #26554 ? You mentioned the color has been broken since r92 but the color management stuff was introduced recently. I thought there might be a chance that you also faced another problem (in addition to the color space problem).

[GitHubDragonFly]

Thanks to this conversation I did find the culprit for my issue, it was a single line causing too bright of a model:

renderer.outputEncoding = THREE.sRGBEncoding;

Since I am using an old r131 of three.js in my MMD Viewer then it is a little bit difficult to test any proposed changes which are designed for later revisions.

I did try applying those changes from #26554 but there was no visible difference in my case (and no errors either).

[donmccurdy]

@GitHubDragonFly Yes, the changes to MMDLoader in #26554 would need to be used in a more recent version of three.js.