spite / THREE.MeshLine

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

Drawing EdgesGeometry #37

Open MikeJohnsonDev opened 7 years ago

MikeJohnsonDev commented 7 years ago

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 commented 7 years ago

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

spite commented 7 years ago

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

MikeJohnsonDev commented 7 years ago

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.

spite commented 7 years ago

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.

jpryne commented 7 years ago

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)

jeremyabel commented 7 years ago

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.

makc commented 7 years ago

@jeremyabel

no extra geometry

extra vertex attribute does not count as extra geometry?