shader 雪 顶点位移_蒙皮网格着色器的均匀顶点位移（动画轮廓，Three.js）

I think I've solved implementation of rendering borders/outlines over meshes in Three.js, a technique many games use for highlighting objects/characters.

Diablo 1 and 3 for example

Now what remains to be done are animated meshes (for characters etc). The problem is, skinned mesh is animated with a vertex shader and I also used a shader to scale (displace) the mesh out along the normals. It might be pretty straight-forward but unfortunately my math skills are pretty much non-existent.

The problem

So to have the meshes scaled up AND animated in the shader, here are the two equations that I think need to be merged:

From the skinning shader:

mvPosition = modelViewMatrix * skinned

gl_Position = projectionMatrix * mvPosition

From the displacement shader:

mvPosition = modelViewMatrix * vec4( position + normal * offset, 1.0 )

gl_Position = projectionMatrix * mvPosition

Demo

Updated (with GoodGuy's equation):

Here is the

The inner figure is regular skinned animation, the outline is the new equation which doesn't quite fit yet.

解决方案

Thanks to WestLangley and GuyGood, here is the solution:

mvPosition = modelViewMatrix * (vec4( skinned.xyz + normal * offset, 1.0 ))

One technical problem might be that normals are not updated. For details, read through the discussion thread below the original post.