为蒙皮网格着色器实现统一的顶点位移（动态轮廓，Three.js）

Question

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

例如Diablo 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）。

内部图形是常规皮肤动画，轮廓是新方程式，但尚未完全适配。

- Eskel

---

@GuyGood 经过仔细检查，动画似乎被缩小了，就像运动范围被某种方式减少了一样。当您将偏移值设置为零时，可以看到它。有什么想法如何修复它吗？我会更新示例。 - Eskel

这是您正在寻找的吗？http://jsfiddle.net/RFbfJ/4/ - WestLangley

http://jsfiddle.net/Nv7Up/ - GuyGood

哦，抱歉，Westlangley更快了，尽管我的方法不同。我只是在蒙皮发生之前添加了缩放后的顶点...无论如何，很酷 :) - GuyGood

@GuyGood 我认为这也是一种有效的方法，只要矩阵变换不涉及非均匀缩放...毕竟，蒙皮是一个线性算子，所以您实际上是在更新法线。 - WestLangley

Answer 1

感谢WestLangley和GuyGood，以下是解决方案： http://jsfiddle.net/Nv7Up/

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

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

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

- Eskel