WebGLRenderer: Add support for morphing colors.

[Mugen87]

Related issue: #23467

Description

This PR adds support for morphing vertex colors. Meaning having geometry.morphAttributes.color is now valid.

The PR also ensures that GLTFLoader can load assets which define morph targets for COLOR_0.

The new feature is only supported with WebGL 2 since the implementation requires the morph texture for managing the data.

[Mugen87]

@AleksandarCebov We can only add support for COLOR_0 since three.js only supports a single set of vertex colors. However, ColorMorphing.glb should load with this PR as expected.

[AleksandarCebov]

That is also fine. As much data that can consume as possible.

[donmccurdy]

Great work, and thanks @Mugen87 and @AleksandarCebov!

Thoughts, in no particular order ...

• Morphing vertex colors and UVs seems like a very useful technique, and with a good authoring workflow I expect artists and devs will do interesting things with it.
• Popular workflows do not support the technique today. I checked Blender, Maya, and Unreal Engine, and all appear to support only positions and normals in morph targets.
• If we were to pick only one of the two (morph colors vs morph UVs) I might choose UVs, since that provides the option of morphing colors on a simple gradient, or more complex animations like flipboards or scrolling textures. Of course we could also do both.
• Node-based shaders can give similar results without the need of a dedicated morph target feature within the renderer. Usability might be a bit lower, e.g. users must identify the right input node to morph the colors, rather than accessing mesh.morphTargetInfluences. And I'm not sure of the right timeline for providing node-based materials from GLTFLoader.

tl;dr — We'd be stepping out a bit "in front" of the ecosystem by adding this feature before real workflows exist. There are times when that's a good thing to do, so I'm not opposed to adding this, but just want to be sure we're aware of both the implications and alternatives.

[mrdoob]

We actually used morph colors in http://www.ro.me/ to morph between animals 🤓

So we actually used to support this, but I think I removed it because the implementation was way too messy. The implementation in this PR is nice and it also cleans up the code around it 💆‍♂️

[mrdoob]

Thanks!

[donmccurdy]

Didn't know ro.me used this method! Do you recall what the Blender workflow was? I guess it was using three.js' custom Blender exporter at that point...

I could hook something up with glTF Transform to support this, using steps like...

1. Create 2+ sets of vertex colors in Blender, optionally include some (position-only) morph targets, export to glTF/GLB
2. Run CLI command to associate vertex colors with morph targets, where COLOR_0 is the base:

  gltf-transform morphAttributes input.glb output.glb --assign COLOR_1:MorphName1,COLOR_2:MorphName2

3. Import with THREE.GLTFLoader

[mrdoob]

Didn't know ro.me used this method! Do you recall what the Blender workflow was? I guess it was using three.js' custom Blender exporter at that point...

Yes, we had a bunch of python scripts I think.

[donmccurdy]

Just tested this out, working other than a minor issue fixed in #23654!

1. Export from Blender with N morph targets and N+1 vertex color sets (base color + 1 for each target, in that order)
2. Open model in https://gltf.report/
3. Paste script into script tab, and execute
4. Export

morph-color-anim.mov

This script doesn't yet support sparse accessors, which would save a lot of space when only some of the vertices are re-colored.