I am trying to use LineMaterial to create fat lines so I can change the width later no. But some of them look dashed even though I have the dash as false in the code that is creating it below:
const matLine = new LineMaterial( {
color: 0xffffff,
linewidth: 1, // in world units with size attenuation, pixels otherwise
worldUnits: true,
vertexColors: true,
dashed: false,
dashScale: 110,
gapSize: 0,
alphaToCoverage: false,
} );
const positions = [];
const colors = [];
let points = [];
for (let pt of pointcurve) {
points.push( new THREE.Vector3( pt[0], pt[1], pt[2] ) );
}
const spline = new THREE.CatmullRomCurve3( points );
const divisions = Math.round( 12 * points.length );
const point = new THREE.Vector3();
const color = new THREE.Color();
let tmpcolor = chromColors.get(masterArrChroms[i]);
let hexcolor = tmpcolor.replace("#", "0x")*1;
//var hexcolor = parseInt(tmpcolor.replace(/^#/, ''), 16);
for ( let i = 0, l = divisions; i < l; i ++ ) {
const t = i / l;
spline.getPoint( t, point );
positions.push( point.x, point.y, point.z );
//color.setHSL( t, 1.0, 0.5, THREE.SRGBColorSpace );
color.setHex( hexcolor, THREE.SRGBColorSpace );
colors.push( color.r, color.g, color.b );
}
const lineGeometry = new LineGeometry();
lineGeometry.setPositions( positions );
lineGeometry.setColors( colors );
let line = new Line2( lineGeometry, matLine );
line.computeLineDistances();
line.scale.set( 1, 1, 1 );
group.add( line );
}
As you can see some lines look dashed and some dont. And overall the lines dont look very smooth even the solid ones. I want the lines to look like this example:
Hi.
Upon reviewing the code, the problem may stem from the way the LineMaterial is configured or how the line geometry is being processed. The dashed property should prevent the lines from appearing dashed, but if there are any inconsistencies in the line geometry or the material settings, it could lead to unexpected rendering results.
const simpleMatLine = new LineMaterial({
color: 0xffffff,
linewidth: 1,
worldUnits: true,
dashed: false,
});
const simplePositions = [0, 0, 0, 1, 1, 1]; // Simple line from (0,0,0) to (1,1,1)
const simpleColors = [1, 0, 0, 1, 0, 0]; // Red color for both points
const simpleLineGeometry = new LineGeometry();
simpleLineGeometry.setPositions(simplePositions);
simpleLineGeometry.setColors(simpleColors);
const simpleLine = new Line2(simpleLineGeometry, simpleMatLine);
simpleLine.computeLineDistances();
scene.add(simpleLine);
if it is helped for you, it’s my very pleasure.
Thanks @Mario_Pacheco and @manthrax . The points I am using are the coordinates I have. When I use LineBasicMaterial instead the lines work just fine. But I cant change the width of it which is what I want.
Here is the same coordinates with LineBasicMaterial:
As you can see not dashed line here. So not sure it is because of inconsistencies in the line geometry. Otherwise LineBasicMaterial would have the same issue.
And yes I do have a window resizing routine in my code.
You are missing sharing a live minimal code that demonstrates the issue. When I try your code (by adding all missing code and missing data), it works fine. So, the problem might be somewhere outside the code that you show or somewhere in the data. Here is a group of fat spline lines:
BTW: two of the back lines of the yellow frame also look dashed (most likely they are not splines) and this might be (or might be not) related to the issue
Thank you much for the code example @PavelBoytchev. After you pasted the code
i decided to experiment with the points you had in your code. And those rendered on my scene without any issues. So I decided to dig further and use my points which were inside the 3d volume and I still saw the same issue. Finally I tried setting the position of the camera after creating those points and that finally did the trick. Here is the line that fixed it:
camera.position.set(0,0,300);
Not sure how this would fix the issue but it did. Here is the new screen shot after the fix:
I suspect the camera position was the culprit here. But the question is: why did the LineBasicMaterial worked without needing to set the initial camera position.
I know you guys wanted me to post a sample code, but this code is very extensive and there is no way to create an example in codepen that could recreate the 3D volume issue I was having. That is why i could only send sample code.
Thanks again to every one for the help and insights on this issue.
I also just used FatLine when you view it in wireframe mode. It has a rather strange structure. and that’s how FatLine works. It tells the camera to keep the faces of the FatLine facing the camera and aids in color rendering, which creates a line with the fewest vertices, opening up more customizations. Very interesting! . For regular lines, the structure is simple, just connecting the points together, however, when you want a thicker/louder line, that means you need to show more triangles and FatLine is more or less related to this aspect, its structure is related to rasterization. This is just my personal opinion, I’m still a newbie
Thanks @L_ng_Tu_n_Anh. Good points to consider. I think what you are saying makes a lot of sense from my experience with this in wireframe. And sure enough before this fix when I rotated or zoomed in on a piece of the volume with dotted lines the lines became solid in some cases. So that is how I guessed it must be camera related.
@siamak Basic Lines are a special type of GL primitive called GL_LINE that will Always render a single pixel line… (unfortunately the support for line thickness varies by platform)
Fat lines, on the other hand, generate the line with Triangle primitives, and triangles can be infinitely thin, so care has to be taken in selecting the size, and making sure the projections work out, but they behave consistently on all platforms since they are GL_TRIANGLE
I’m still not sure why the camera position was affecting things… is your camera added as a child of scene? If not, I could see that causing an issue…
One more issues I have with the fat lines is seeing a gap between each line segment when we zoom in big. I have gapSize: 0, which helps a good bit. But I isee lines like this when zoomed in big:
