spite / THREE.MeshLine

Mesh replacement for THREE.Line
MIT License
2.14k stars 381 forks source link

Incorrect Line Width with sizeAttenuation in perspective camera #52

Open matthewsanders opened 6 years ago

matthewsanders commented 6 years ago

I am writing an application that uses a perspective camera to render line traces. I need them to be very specific widths and they should maintain the correct dimensions as the camera moves.

The current MeshLine 1.0.3 appears to create lines that taper in from the ends. The ends appear to be the correct width but the lines between are thinner. I have made sure that all of my verts have a 0 Z coordinate and the camera is aligned with the Z axis.

I was able to get mostly correct results using a different library, but it has a bug that doesn't allow me to clone the lines for rendering to texture very easily. The other library also seems to have issues with consistent width between camera distance which I currently work around with a multiplier to try and correct at distances I care about currently. The other lib is MeshLineAlt.

Here is my Material:

new MeshLine.MeshLineMaterial( {
            useMap: false,
            color: new THREE.Color( 0x000000 ),
            opacity: 1,
            lineWidth: width,
            resolution: this._lineResolution,
            sizeAttenuation: true,
            near: this._camera.near,
            far: this._camera.far
        });

Later in the file I create the lines where this.currentLine is the verts and this.currentLineMaterial is a material with the properties above:

        var g = new MeshLine.MeshLine();
        g.setGeometry( this.currentLine );

        var mesh = new THREE.Mesh( g.geometry, this.currentLineMaterial );

My camera is created like so:

new THREE.PerspectiveCamera(60, self._width / self._height, 1, 1000);

Here are a few screenshots showing the issue:

meshline-test meshline-longtest

Here is the correct result of the short 2 segment line above rendered with the Other MeshLineAlt lib:

meshlinealt-test

The only change I need to make to get the correct results with the other library is to override the mesh created in the above snippet:

        var altMat = new THREE.MeshLineAltMaterial({});
        altMat.linewidth = this.currentLineWidth + (this.currentLineWidth * 0.48);
        //altMat.linecolor = new THREE.Vector3(1, 1, 1);
        mesh = new THREE.MeshLineAlt([ this.currentLine.vertices ], altMat);
mkarnicki commented 6 years ago

FTR I noticed similar behavior, using orthographic camera. With thinner lines the problem is even more visual.

screen shot 2018-03-24 at 12 22 09

EDIT: I know it's really suboptimal, but because I have raytracing for MeshLine working (as opposed to fat lines that don't support raytracing), I workaround the problem by always using MeshLine with no more than 2 vertices and grouping those segments.