THREE.MeshLine icon indicating copy to clipboard operation
THREE.MeshLine copied to clipboard

Drawing EdgesGeometry

Open MikeJohnsonDev opened this issue 7 years ago • 7 comments

Hi,

I'm having issues drawing EdgesGeometry with MeshLine, see first image. Second image uses LineSegments.

I'm using the following to get the positions:

let position = geometry.getAttribute("position").array;

for (let i = 0; i < position.length; i++)
{
	let counter = i / position.length;

	this.positions.push(position[i], position[i + 1], position[i + 2]);
	this.positions.push(position[i], position[i + 1], position[i + 2]);

	this.counters.push(counter);
	this.counters.push(counter);
}

Thanks, Mike

edgesgeometry1 edgesgeometry2

MikeJohnsonDev avatar Mar 10 '17 12:03 MikeJohnsonDev

I've sort of fixed it. The loop should be:

for (let i = 0; i < position.length; i += 3)

However, now I have another issue (see image).

edgesgeometry3

MikeJohnsonDev avatar Mar 10 '17 12:03 MikeJohnsonDev

It's difficult to tell with just an image. Is it possible that those are z-fighting results?

spite avatar Mar 11 '17 11:03 spite

Please check out https://github.com/MikeJohnson1337/three-meshline-edgesgeometry, where I have created a simple example of 2 cubes and created their THREE.EdgesGeometry, then rendered them, one using THREE.LineSegments, and the other using MeshLine.

MikeJohnsonDev avatar Mar 14 '17 12:03 MikeJohnsonDev

With

let secondCubeWireframeMesh = new THREE.Mesh(secondCubeWireframe.geometry, new MeshLineMaterial({
    color: new THREE.Color(0x00000000),
    near: camera.near,
    far: camera.far,
    lineWidth: 4.,
    sizeAttenuation: false,
    resolution: new THREE.Vector2(width, height)
}));

looks a bit better, but this is not really a case THREE.MeshLine is designed for. I need to consider it.

screen shot 2017-03-19 at 22 16 26

Also, renderer.setPixelRatio( window.devicePixelRatio) improves the quality in high DPI screens.

spite avatar Mar 19 '17 21:03 spite

Meshline isn't intended to overcome the ANGLE issue on LineWidth? That is indeed the reason I'm looking into Meshline too. I need to be able to render the geometry edges with a nice, clean line of a consistent width. (~20-40px)

jpryne avatar Mar 26 '17 22:03 jpryne

https://threejs.org/examples/#webgl_materials_wireframe For wireframe meshes, the technique used in this example is fantastic. Really clever solution, only like 4 lines of shader code, no extra geometry, etc etc.

jeremyabel avatar May 12 '17 02:05 jeremyabel

@jeremyabel

no extra geometry

extra vertex attribute does not count as extra geometry?

makc avatar May 16 '17 17:05 makc