Since threejs does not have a built in way to accurately raycast/intersect against a skinned mesh, I am interested in attempting a workaround for my use case.
My current implementation is to just created a slightly oversized bounding box around my meshes. It works well enough and if this is as good as it gets, fine.
However, there have been more than a few moments where I found this simple approximation lacking and quite frustrating.
I’ve seen examples of gpu color picking, seems interesting. I don;t entirely understand it and definitely do not want my characters to be multi colored, geometric looking freaks. So not sure if this method is viable for me.
It seems conceptually strange but simply creating boxes and adding them to desired bones would be the simplest approach. I understand that it is slightly unorthodox to use items meant for rendering purely as collision detectors, but I am not concerned about orthodoxy as long as it works.
Which brings me to my main question/hurdle in getting this approach to work. How do I find the dimensions of a specific bone? I found ways to get the bone position, but I have been unsuccessful in getting the actual dimensions. Is this even possible to do programmatically?
I’m actually having the same issue and ended up with manually defining AABBs in bind pose. When performing the ray/intersection with a character, I first test with the outer hitbox (which is also an AABB enclosing the entire model) and then with the inner ones. This test requires a transformation of the ray into the bind space of a bone where the respective AABB was originally defined. Of course you can replace the AABBs with meshes (cube) but the intersection should be a bit more expensive. You now have to test with 12 triangles instead with a single AABB. Anyway the code for the AABB approach looks like so. It can easily be ported to a three.js based solution (the math classes are from a different library):
Ideally, you work with OBBs and not with AABBs. In this way, you can apply the world rotation of a bone to the respective OBB. I’m planning to integrate OBBs this year into the linked project. However, I’m still trying to figure out if there is way to compute them automatically from a skinned mesh. There are wizards in game engines like Unity doing similar things however the result seems to often require manual adjustments.
I really need to look into AABB’s, I remember reading about them (and OBB’s) in the “3D Math Primer” book. Does three.js have any plan to integrate such functionality?
I’m currently using simple mesh intersections. Each intersection mesh (added to individual bones) is built from pre-defined dimensions (per skinned mesh ugh).
Anyway, thank you for providing this resource. I will study up.