蒙皮网格着色器的均匀顶点位移(动画轮廓,Three.js)

Question

我想我已经解决了Three.js中网格渲染边框/轮廓的实现,这是许多游戏用于突出显示对象/角色的技术.

例如,暗黑破坏神1和3

以下是我的解决方案的详细信息和演示.

现在还有待完成的是动画网格(用于角色等).问题是,蒙皮网格使用顶点着色器进行动画处理,我还使用着色器沿着法线缩放(移位)网格.这可能是非常简单但不幸的是我的数学技能几乎不存在.

问题

因此,为了使网格物体在着色器中按比例放大并设置动画,以下是我认为需要合并的两个方程式:

从蒙皮着色器:

mvPosition = modelViewMatrix * skinned
gl_Position = projectionMatrix * mvPosition

从置换着色器:

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

演示

更新(使用GoodGuy的等式):这是关于jsfiddle(javascript)的完整代码和演示.
在这里你可以找到着色器代码本身(glsl).

内部图是常规的蒙皮动画,轮廓是新的等式,它还不太合适.

Answer 1

感谢 WestLangley 和 GuyGood，解决方案如下：

http://jsfiddle.net/Nv7Up/

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

一个技术问题可能是法线未更新。有关详细信息，请阅读原始帖子下面的讨论主题。

r73 更新：http://jsfiddle.net/frh2d84d/4/