Best practice for version update

Questions
,
1

Hi,

I’m updating my viewer’s three-js version (REVISION) from 106 to 112 and there’s a difference with the render result.

I’ve notice that renderer.gammaInput = true is not supported but I’m loading GLTFLoader so that’s fine (baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding).

I’ve also notice that renderer.gammaOutput = true has been deprecated. I’m using renderer.outputEncoding = THREE.GammaEncoding (tried also THREE.sRGBEncoding).

My scene (lights color, position and intensity) parameters are exactly the same but the 2 versions still doesn’t look the same.

Is there anything else I can do to compensate the difference?

What is the best practice in terms of version updates in general? We are saving our scene parameters for each model - all hundreds of thousands of them. Fixing it manually is not an option.

I really don’t want to maintain 2 viewer versions.

Here’s a screenshot of the 2 versions side by side:

image
image1612×368 82.7 KB

No environment map, no light probe and no lights other then one spot light with the same position. renderer.toneMappingExposure = 1

Thanks.

2

Check out @donmccurdy’s guide to color management here:

In particular take note of material.color.convertSRGBToLinear() and texture.encoding.

If you follow the guide exactly and the new version doesn’t match your old version, it probably means that the old version was incorrect.

1 Like
3

Thank you for the quick response @looeee.

As mentioned on your shared link, using GLTFLoader got you covered excluding colors. On my model I don’t use emissive and all of the material colors are default (white).

I’ve tried convertSRGBToLinear anyway but it doesn’t seems to work.

I’m not saying that the newer version is incorrect, just asking for a solution for the inconsistency (if there is any).

Thanks.

4

The implementation of MeshStandardMaterial and PMREMGenerator has been improved so it’s not surprising that things look a bit different.

BTW: You should set WebGLRenderer.outputEncoding to THREE.sRGBEncoding for best color fidelity.

1 Like
5

O.K. cool, thanks

6

Can you please let me know in what three-js version the MeshStandardMaterial and PMREMGenerator has been improved?

7

I’ve just realized there are 2 factors that are causing the difference.

One is the three-js version - in REVISION 110 it looks exactly the same.

The second cause is the fact that I’m rendering the webGL from a web worker via an offscreen canvas.

In case I’m rendering the model in a regular canvas with REVISION 112 there’s a difference.

In case I’m rendering the model in an offscreen canvas from a web worker with REVISION 110 there’s a difference.

In case I’m rendering the model in a regular canvas with REVISION 110 the versions looks exactly the same.

Any ideas for what is causing the discrepancy with the offscreen canvas or how to overcame it?

8

A whole bunch of long-standing rendering issues were fixed. Check out the solved issues in this PR for more details: https://github.com/mrdoob/three.js/pull/18004

9

I can also confirm that the discrepancy persist even when working without offscreen canvas. It’s the CanvasTexture from the ImageBitmapLoader that causes the difference.

11

I wasn’t able to reproduce this issue on stackblitz so it’s probably an issue on my end.
Sorry about that.

12

I have reproduce the issue on stackblitz.
With CanvasTexture and with regular textures.