蒙皮的网格着色器的统一顶点位移(动画轮廓，Three.js) [英] Uniform vertex displacement for skinned mesh shader (Animated outline, Three.js)

问题描述

我认为我已经解决了Three.js中网格上渲染边框/轮廓的实现，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.

例如《暗黑破坏神1》和《暗黑破坏神3》

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.

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

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

从蒙皮着色器:

mvPosition = modelViewMatrix * skinned
gl_Position = projectionMatrix * mvPosition

从置换着色器:

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

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

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.

推荐答案

感谢WestLangley和GuyGood，这是解决方法:

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.

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

这篇关于蒙皮的网格着色器的统一顶点位移(动画轮廓，Three.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！