Uniform vertex displacement for skinned mesh shader (Animated outline, 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

Here are details and demo of my solution.

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 full code and demo on jsfiddle (javascript).
Here you can find the shader code itself (glsl).

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

回答1:

Thanks to WestLangley and GuyGood, here is the solution:

http://jsfiddle.net/Nv7Up/

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.

Update for r73: http://jsfiddle.net/frh2d84d/4/

来源：https://stackoverflow.com/questions/23245748/uniform-vertex-displacement-for-skinned-mesh-shader-animated-outline-three-js