I'm currently morphing some meshes by interpolating their positions and normals between target arrays, on the GPU, in WebGL.

Now I need to apply normal maps to those morphs.

For normal maps on static meshes, I'm computing the vertex tangent vectors in JavaScript, which I then use in the shader for the normal mapping math.

For morphs, what I was about to do was compute those tangents for each morph target, then include those in the morph interpolations within the shader morphing routine, so that at every instant we have interpolated tangents with which to do the normal mapping.

Does anyone have experience with this? Does this seem reasonable? Know any examples out there I should look at?


You can interpolate tangents just like you would everything else, there should be no problems with that, as long as your mesh (morph target) count is low - I think there was a rather low limit on how many attribute slots you can use (GLES2.0 says there must be at least 8, Chrome seems to have 16).

An alternative (if you can take the pressure on the pixel shader) is to try doing normal mapping without precomputed tangents:

That would likely take even more pressure off your vertex shaders/attribute channels (no need to pass tangents or even normals) so you could blend even more meshes together.

  • \$\begingroup\$ Nice. I'm going to try interpolating the tangents first, just so low-end GPUs don't suffer too much. \$\endgroup\$ – xeolabs Mar 9 '16 at 12:00
  • \$\begingroup\$ Just implemented the tangent interpolation approach in SceneJS, where I precompute the tangents for each morph target, then morph between them As the morph cycles through it's target list, it loads only the pair of VBOs (for positions, normals and tangents) enclose the current time, so no problem with overrunning attribute slots. This example Isn't 100% correct because the normals are the same at each target, however the positions at target are different. Proves the concept at least. scenejs.org/examples/index.html#geometry_morphTargets_normalMap \$\endgroup\$ – xeolabs Mar 16 '16 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.