Three.js: Increase upper limit on number of morph targets / blend shapes

[s5g]

Description of the problem

As discussed in #6465 the maximum number of rendered morph targets is either 8 (targets have vertices only) or 4 (targets have vertices and normals). This limit is related to the WebGL MAX_VERTEX_ATTRIBS value which in turn is based on GPU support.

http://webglstats.com/webgl/parameter/MAX_VERTEX_ATTRIBS
http://webglstats.com/webgl2/parameter/MAX_VERTEX_ATTRIBS

However many models, in particular those used for facial animation, may have more than 4 or 8 active blendshapes. So currently these models will not render correctly.

The suggestion is to look for ways to increase the limit.

Three.js version

• [x] Dev
• [x] r94

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[makc]

I have patched 3js for someone, doubling the limit. Worked for them with no problems. It is not too hard to have this as a setting

[mrdoob]

Yeah, a way of changing this setting would be nice.
Anyone up for giving it a go?

[JosephCoppola-FW]

@makc, did you achieve doubling the limit by simply changing the maxAttributes and maxVertexAttributes in WebGLCapabilities.js and WebGLState.js to a number that works for you?

Edit: To further clarify, I need to have potentially up to 43 blendshapes active at a given time. Is this even possible with Three?

Edit 2: It does not seem to be as easy as changing some variables. I modified some logic/shader logic and was able to get up to 11 firing. If I added more than 14 attributes to the shader logic WebGL threw an error saying "Too Many Vertex Attributes". So I've given up trying in that regard. In #6465, @jspdown mentioned they used the CPU to compute some of the blendshapes, so I am going to try and go down that route.

[makc]

@JosephCoppola-FW probably different GPU. This says only 1 in 5 GPUs can do more than 16 attributes.

My reading of @jspdown comment is that they still use 8 targets on GPU:

Those that are mostly used for the initial configuration of the model and that aren't supposed to be updated [run] on the CPU.
...to configure a human body that had ~32 morphtargets. Only 6 of them needed real-time updates, others were only used to pre-configure the model.

[makc]

btw, 16 attributes is actually 16 * 4 numbers. so if we consider 3 numbers for the single set of normals and 2 for UVs, potentially there can be (16*4-3-2)/3 = 19 morph targets.

[marcoantonioroldan]

He parcheado 3js para alguien, duplicando el límite. Trabajó para ellos sin problemas. No es muy difícil tener esto como escenario

Could you share the way you did it?

[marcoantonioroldan]

I am currently working with a model in .glb format, it is a humanoid and semi-realistic facial expressions require at least 14 shape keys / morphing targets. Given this scenario of a limit of 8, is there a way to increase them? Can anyone share it?

[JosephCoppola-FW]

@marcoantonioroldan I posted a detailed shader material example in #15556

Specifically here -> https://github.com/mrdoob/three.js/issues/15556#issuecomment-478161986