Examples: Make tone mapping demos more interesting.

[Mugen87]

Related issue: -

Description

We use the DamagedHelmet glTF asset in many demos. To add a bit more variety, I have updated the the tone mapping demos for WebGL and WebGPU renderer with a new one. Since the scene already uses an environment map that shows Venice, I though something cultural from that place would be nice. I've found a very aesthetic mask asset at Sketchfab that makes the demos more visual appealing. Thanks to gltf-transform, I was able to compress it under 5 MB without loosing much of its fidelity. The original size was over 40 MB.

[WestLangley]

@Mugen87 The mask renders slightly differently with WebGPURenderer than with WebGLRenderer. The tiny beads around the face have a different appearance. (lighting or normals, perhaps?) I am guessing WebGLRenderer is rendering correctly in this case.

[Mugen87]

Yes, the WebGLRenderer version looks correct. I bet this is related to normals but it would be good if we could isolate somehow the issue in a smaller test case.

[Mugen87]

When adding the following below scene.add( gltf.scene );, the beads render identical. Can you confirm this on your side as well?

const object = gltf.scene.getObjectByName( 'zhu_low_lambert5_0' );
object.material.normalMap = null;

zhu_low_lambert5_0 is the mesh part that just represents the beads.

[WestLangley]

Well, yes, they render the same if you do that. But the WebGLRenderer unaltered version more closely matches the source -- except for the colors for some reason.

[Mugen87]

That might be related to the different lighting, tone mapping or FX. I've often experienced this when comparing three.js and Sketchfab.

So for some reasons, WebGPURenderer does not handle the normal map in this particular asset correctly.

[WestLangley]

/ping @sunag