Extend SkeletonHelper to accommodate "fat" lines? (Perhaps with LineSegments2)

Questions
, ,
1

Hi folks,

As the title says, I’m trying to get lines of variable width for the skeleton helper (for a skeletal animation). It currently extends LineSegments which doesn’t allow variable line width - and I’m struggling to apply the same logic to LineSegments2, especially with the lack of existing examples. I’ve also tried MeshLine, which did generate triangles but was buggy:

Screenshot 2023-12-19 at 12.06.06 PM
Screenshot 2023-12-19 at 12.06.06 PM424×1532 51.7 KB

I’ve also tried using Line2 per the example but nothing I did seemed to accommodate the particular way the skeleton helper works - namely:

  • Create BufferGeometry
  • Create (non basic) LineMaterial
  • Use both to render a Line2

@Mugen87 may have provided a useful hint here - could it be related to the fact the geometry needs to be non-indexed? Naively trying this method did not seem to resolve the issue.

What would be the sensible approach to extending the skeletonhelper to have controllable line width?

Thanks!

PS - naively changing LineSegments to LineSegments2 does result in similar triangles to MeshLine - but obviously not a satisfying result:

Screenshot 2023-12-19 at 12.17.02 PM
Screenshot 2023-12-19 at 12.17.02 PM588×964 28.7 KB

Is there a way to wrangle LineSegments2 into looking like thick lines?

2

solved - in case this helps anyone:

  • have SkeletonHelper extend LineSegments2 instead of LineSegments
  • have it use LineMaterial instead of LineBasicMaterial
  • you’ll have to write new LineMaterial -appropriate attributes . So replace updateMatrixworld with something like:
updateMatrixWorld (force) {
        const bones = this.bones;

        const geometry = this.geometry;
        const lineStart = geometry.getAttribute('instanceStart');
        const lineEnd = geometry.getAttribute('instanceEnd');

        _matrixWorldInv.copy(this.root.matrixWorld).invert();

        for (const [index, bone] of bones.entries()) {
            if (bone.parent && bone.parent.isBone) {
                _boneMatrix.multiplyMatrices(_matrixWorldInv, bone.matrixWorld);
                _vector.setFromMatrixPosition(_boneMatrix);
                lineStart.setXYZ(index, _vector.x, _vector.y, _vector.z);

                _boneMatrix.multiplyMatrices(_matrixWorldInv, bone.parent.matrixWorld);
                _vector.setFromMatrixPosition(_boneMatrix);
                lineEnd.setXYZ(index, _vector.x, _vector.y, _vector.z);
            }
        }

        geometry.getAttribute('instanceStart').needsUpdate = true;
        geometry.getAttribute('instanceEnd').needsUpdate = true;
        super.updateMatrixWorld(force);
3

Any chance you could post the full code for this? I’m trying to do the same thing, but can’t quite get it right. Thanks in advance!

4

sorry, the above excerpt is as much as I can post. If you post your code I can take a look…

5

In case anyone is still looking for an example with the full code, I made this repository :slight_smile: