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.
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
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With