Three.js: LineBasicMaterial.linejoin not work

[jiangxiayun]

Description of the problem

when I set LineBasicMaterial.linejoin as 'bevel' or 'miter',it not work.The appearance of line joints always be 'round'.

renderer = new THREE.CanvasRenderer();

var material = new THREE.LineBasicMaterial({
        color: 0x0000ff,
        linewidth: 25,
        linecap: 'round',
        linejoin: 'miter',
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
        new THREE.Vector3( -10, 0, 0 ),
        new THREE.Vector3( 0, 0, 20 ),
        new THREE.Vector3( 10, 0, 0 )
);

var line = new THREE.Line( geometry, material );
scene.add( line );

Three.js version

• [ ] Dev
• [ ] r85
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

Can you please provide a fiddle to demonstrate this issue? You can use one of these starter templates:

http://jsfiddle.net/akmcv7Lh/ (current)
http://jsfiddle.net/hw9rcLL8/ (dev)

[WestLangley]

@Mugen87 This is a CanvasRenderer question.

[mrdoob]

We're definitely setting the lineCap:
https://github.com/mrdoob/three.js/blob/dev/examples/js/renderers/CanvasRenderer.js#L1104

As @Mugen87 said, a jsfiddle showing the issue would great to have.

[jiangxiayun]

here is a jsfiddle showing : https://jsfiddle.net/18ae5p09/1/

[WestLangley]

I think this is because with CanvasRenderer, the line is rendered as a sequence of individual line segments:

ctx.moveTo(10, 10);
ctx.lineTo(200, 150);

ctx.moveTo(200, 150);
ctx.lineTo(300, 100);

instead of:

ctx.moveTo(10, 10);
ctx.lineTo(200, 150);
ctx.lineTo(300, 100);

Hence, linecap is honored, but linejoin is not.

[kaftz]

I took a look into this. You could edit Projector.js and add a segmentNumber to THREE.RenderableLine to ensure that the ordering of individual line segments is preserved by painterSort.

You can then delay ctx.stroke() calls in CanvasRenderer --> renderLine() until you are ready to draw a set of segments.

The problem with adding support for linejoin in this way is that you'll break vertex colors.

[mrdoob]

The problem with adding support for linejoin in this way is that you'll break vertex colors.

And z-sorting between line segments and other elements.

[Mugen87]

CanvasRenderer has been removed, see #15029