我想我已经解决了在 Three.js 中渲染网格上的边框/轮廓的实现,这是许多游戏用于突出显示对象/角色的技术。
Diablo 1 and 3 for example
这是详细信息 https://stackoverflow.com/questions/23183507/outline-object-normal-scale-stencil-mask-three-js and 我的解决方案演示 http://jsfiddle.net/Eskel/g593q/5/.
现在剩下要做的是动画网格(对于角色等)。问题是,蒙皮网格是使用顶点着色器进行动画处理的,我还使用着色器沿法线缩放(置换)网格。这可能非常简单,但不幸的是我的数学技能几乎不存在。
问题
因此,要在着色器中放大网格并进行动画处理,我认为需要合并以下两个方程:
从蒙皮着色器:
mvPosition = modelViewMatrix * skinned
gl_Position = projectionMatrix * mvPosition
从位移着色器:
mvPosition = modelViewMatrix * vec4( position + normal * offset, 1.0 )
gl_Position = projectionMatrix * mvPosition
Demo
更新(使用 GoodGuy 方程):
这里是jsfiddle 上的完整代码和演示 http://jsfiddle.net/Eskel/RFbfJ/3/(JavaScript)。
在这里您可以找到着色器代码本身 http://codeshare.io/rmVz0 (glsl).
内部图形是常规蒙皮动画,轮廓是还不太适合的新方程。
感谢 WestLangley 和 GuyGood,解决方案如下:
http://jsfiddle.net/Nv7Up/ http://jsfiddle.net/Nv7Up/
mvPosition = modelViewMatrix * (vec4( skinned.xyz + normal * offset, 1.0 ))
一个技术问题可能是法线未更新。有关详细信息,请阅读原始帖子下面的讨论主题。
r73 更新:http://jsfiddle.net/frh2d84d/4/ http://jsfiddle.net/frh2d84d/4/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)