New Meshline #11040

Mugen87 · 2017-03-21T09:20:37Z

This PR introduces a new and flexible way of drawing lines via Screen-Space Projected Lines. The implementation is based on https://github.com/spite/THREE.MeshLine by @spite.

Demo

You can create a mesh line like this:

var line = new THREE.MeshLine( geometry, material );

geometry can be a Geometry or BufferGeometry. Users can provide vertices (position) and color data (for vertex colors).
material must be a MeshBasicMaterial. It's the only material that is supported right now. You can use three new material properties to control the visual appearance of the line: meshLine(like morphTargets) , meshLineWidth, meshLineSizeAttenuation. Other material properties like color, transparent or opacity also work.
Besides, there is a third and optional parameter of MeshLine that can be used to create nice curve shapes (widthCallback).

As soon as we commit to a final API design and naming conventions, i will also create some docs with a subsequent PR.

There is still an open issue. I'm not sure how to handle the situation if the geometry of a mesh line changes. MeshLine always needs to process the given geometry to prepare the data for the vertex shader. The original MeshLine project does this with a separate method setGeometry. But i wonder if we can find a way that fits better to the library conventions and is maybe more convenient.

mrdoob · 2017-03-21T18:03:06Z

You're such a life saver! ❤️

mrdoob · 2017-03-21T18:07:18Z

What do you think about make this transparent though? So if THREE.Line's linewidth > 1 then WebGLRenderer uses this code. Otherwise it goes through the usual path.

We'll have to lose widthCallback but, at the end of the day, I think it would be great if THREE.Line linewidth just worked.

Mugen87 · 2017-03-21T21:48:29Z

So if THREE.Line's linewidth > 1 then WebGLRenderer uses this code. Otherwise it goes through the usual path.

After some research i was not able to find a nice integration of both approaches. But to be honest, i don't know all parts of WebGLRenderer in detail. If there is a smart solution to do this, i'm of course open to it. But currently it seems to me, that the code in WebGLRenderer will be more complicated if we mix the rendering of line primitives and screen-space projected lines.

Therefore i would propose something different 😅.

Line, LineLoop and LineSegments should be exclusively used for rendering line primitives. Because the usage of gl.lineWidth() is not reliable (reference), i would remove linewidth from LineBasicMaterial and LineDashedMaterial and render all line primitives with the default line width of 1. If users still apply linewidth > 1 to a Line* material, three.js could log a warning to use MeshLine in combination with MeshBasicMaterial instead.

fernandojsg · 2017-03-21T22:16:38Z

So if THREE.Line's linewidth > 1 then WebGLRenderer uses this code. Otherwise it goes through the usual path.

As this is screen space implementation it won't work properly when using WebVR. That's why I needed to create a actual geometry mesh line for a-painter.
I'd planned to send a PR to add it, we could probably use three of them:

If non-vr and Linewidth == 1 -> THREE.line
If non-vr and LineWidth > 1 -> THREE.MeshLineSS
If vr -> THREE.MeshLine.

Actually for me is also confusing the name MeshLine as I expected it to be real geometry mesh instead of a SS representation, so probably renaming it to a more clear name could be nice too.
Another problem I got with Jaumes THREE.MeshLine` implementation is that it lacks of most of the material options that we have for the rest of geometry and that could be applied to an actual geometry mesh line.

WestLangley · 2017-03-21T22:51:50Z

examples/webgl_meshline.html

+
+					var object = scene.children[ i ];
+
+					if ( object instanceof THREE.Line ) {


THREE.MeshLine

WestLangley · 2017-03-21T22:54:17Z

examples/webgl_meshline.html

+
+				// animate line width
+
+				material1.meshLineWidth = 10 * ( 1 + 0.5 * Math.sin( 5 * time ) );


material2.meshLineWidth = 100 * ( 1 + 0.5 * Math.sin( 5 * time ) );

Suggestion. Vary material2 instead, and use OrbitControls. It is easier to zoom and see the subtitles of what is going on.

100 *
please so it is visible on small devices.

Perhaps also set size attenuation on the first one.

What are the units of width?

Sry, overlooked the 100 * thing. I've also added size attenuation to the first material.

meshLineWidth should be equal to the value of gl.lineWidth() so it's pixel...

Thanks for this. You can change it later if you want. For now, it is helpful. :)

Mugen87 · 2017-03-22T12:10:25Z

I'm not sure about the way how to handle different line implementations. We could create separate entities like THREE.Line or THREE.MeshLine and let the user decide what to use. On the other hand we can have just a single entity (e.g. THREE.Line) and run transparently different implementations dependent on various factors (material properties or VR/non-VR).

@fernandojsg, @WestLangley What's your opinion about this?

Mugen87 · 2017-03-22T12:25:19Z

As this is screen space implementation it won't work properly when using WebVR.

What's the actual problem in this case?

That's why I needed to create a actual geometry mesh line for a-painter.

Can you share the code for this? I am interested to see your solution 😊

WestLangley · 2017-03-22T14:04:56Z

I am not sure MeshLine is a good name for a screen-space approach. Trying to think of an alternate nomenclature...

If non-vr and Linewidth == 1 -> THREE.Line
If non-vr and LineWidth > 1 -> THREE.ThickLine ??? or THREE.Line if implementation is transparent
If vr -> THREE.Ribbon ???

mrdoob · 2017-03-22T16:17:18Z

That's why I needed to create a actual geometry mesh line for a-painter.

Can you share the code for this? I am interested to see your solution 😊

He's probably creating a tube. Which makes me think that we could also create a tube too..

WestLangley · 2017-03-22T16:34:28Z

What are the units of width?

meshLineWidth should be equal to the value of gl.lineWidth() so it's pixel...

If it is consistent with THREE.Points, then fine. If not, we should figure out why. Also consider DPR.

fernandojsg · 2017-03-22T16:59:34Z

Thinking about names I like @WestLangley proposal for THREE.Ribbon , as it's actually that, not a tube.
I'm not sure about the approach discussed for vr/non-vr and linewidths as they're not really consistent for example regarding materials, so probably I'll just leave it to the user to choose which one they want to use.

I'll try to open a PR for the THREE.Ribbon later this week.

WestLangley · 2017-03-22T17:07:50Z

We used to have THREE.Ribbon. I do not recall the implementation details, though. It was removed for some reason...

spite · 2017-03-22T17:08:55Z

It's not a Ribbon, either, if we're being technical.

I'm afraid you're trying to cram way too functionality in Line: WebGL Lines are mathematical lines, and there's the unfortunate problem with lineWidth across platforms, which makes sense, since the definition of a line is precisely that doesn't have breadth or thickness.

That's the main and only thing to solve for a Line replacement (and it could be built into the THREE.Line family transparently). Other stuff, like adding properties from other materials or rendering lines in VR (what does that even mean!), it should just be a Mesh, any Mesh: CurvePath, ShapePath, Ribbon, what have you.

Just my two cents.

mrdoob · 2017-03-22T17:29:11Z

Agreed. I think we should leave the VR use case out of this discussion. We don't want to turn THREE.Line into TiltBrush. We just want to have lines with lineWidth > 1, which is something that used to work (OSX only anyway).

mrdoob · 2017-03-22T17:36:01Z

After some research i was not able to find a nice integration of both approaches. But to be honest, i don't know all parts of WebGLRenderer in detail. If there is a smart solution to do this, i'm of course open to it. But currently it seems to me, that the code in WebGLRenderer will be more complicated if we mix the rendering of line primitives and screen-space projected lines.

So, unless someone else tries it before me, I'll use this code as reference and try to add support for lineWidth > 1 in WebGLRenderer for r86.

Mugen87 · 2017-03-22T21:34:33Z

Sounds good to me. If i can manage it, i'll have a look at the integration of the code into WebGLRenderer in the next days again. For the case i make any kind of progress, i'll post it here.

fernandojsg · 2017-03-22T21:46:03Z

Ok I agree, it sound good to me too, better to leave the "ribbon" out from this and just in case add as an external example but nothing more.
Maybe just for the vr case, we could just force use simple lines instead of the SS ones.

Mugen87 · 2017-03-22T21:50:30Z

Also consider DPR.

@WestLangley That was a good hint! 👍 The last commit makes the line width of MeshLine consistent to Line.

Mugen87 · 2017-04-16T12:54:25Z

Related issues: #10686, #10357

This is needed to distinguish WebGLProgram instances that use mesh lines from those that don't. This is done based on a so called program code, which is, besides other things, based on the list of known parameter values for the parameters names from the parameter list. If two materials only differ in whether they use mesh lines and the one that doesn't is loaded first, then without this change no new program will be generated if the material with enabled mesh lines is loaded afterwards, which effectively disables mesh lines for this material.

WebGLProgram: add meshLine to list of parameter names

WestLangley · 2017-05-10T18:45:16Z

When the number of points is reduced, there appears to be a problem with the implementation.

var spline = new THREE.CatmullRomCurve3( points );
var divisions = points.length / 6; // previously points.length * 6

Mugen87 · 2017-05-10T19:36:15Z

I think a too small sampling rate causes issues when calculating the line extrusions in the vertex shader.

Mugen87 · 2017-05-17T16:31:23Z

see #11349

Mugen87 added 7 commits March 18, 2017 17:43

MeshLine: Initial commit

9ea5fa0

MeshLine: More comments and better variable names

0d5f58a

MeshLine: Correct typo

1566535

MeshLine: Support vertex colors

83d4e23

MeshLine: Clean up example

79ecbbb

MeshLine: Added size attenuation

f48a3c9

MeshLine: Clean up

11612b5

WestLangley reviewed Mar 21, 2017

View reviewed changes

MeshLine: Improve Example

fd98956

MeshLine: Improve Example

179f34c

MeshLine: Regard DPR

2a79ffb

MeshLine: Improve Example

6a68388

Mugen87 mentioned this pull request Apr 16, 2017

linewidthscalefactor has no effect on lineSet x3dom/x3dom#733

Open

tomka and others added 3 commits April 30, 2017 22:43

Merge pull request #1 from tomka/meshline

ecf3cb7

WebGLProgram: add meshLine to list of parameter names

merge upstream/dev

6d5e596

Mugen87 mentioned this pull request May 17, 2017

Added linewidth support #11349

Merged

Mugen87 closed this May 17, 2017

Mugen87 deleted the meshline branch May 17, 2017 16:31

Mugen87 mentioned this pull request Nov 26, 2024

Line2NodeMaterial: Add opacityNode support #29964

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Meshline #11040

New Meshline #11040

Mugen87 commented Mar 21, 2017 •

edited

Loading

mrdoob commented Mar 21, 2017

mrdoob commented Mar 21, 2017

Mugen87 commented Mar 21, 2017

fernandojsg commented Mar 21, 2017

WestLangley Mar 21, 2017

Mugen87 Mar 22, 2017

WestLangley Mar 21, 2017

Mugen87 Mar 22, 2017

WestLangley Mar 22, 2017

WestLangley Mar 22, 2017

Mugen87 Mar 22, 2017 •

edited

Loading

Mugen87 Mar 22, 2017 •

edited

Loading

WestLangley Mar 22, 2017

Mugen87 commented Mar 22, 2017 •

edited

Loading

Mugen87 commented Mar 22, 2017 •

edited

Loading

WestLangley commented Mar 22, 2017

mrdoob commented Mar 22, 2017

WestLangley commented Mar 22, 2017

fernandojsg commented Mar 22, 2017

WestLangley commented Mar 22, 2017

spite commented Mar 22, 2017

mrdoob commented Mar 22, 2017

mrdoob commented Mar 22, 2017

Mugen87 commented Mar 22, 2017

fernandojsg commented Mar 22, 2017

Mugen87 commented Mar 22, 2017 •

edited

Loading

Mugen87 commented Apr 16, 2017

WestLangley commented May 10, 2017

Mugen87 commented May 10, 2017 •

edited

Loading

Mugen87 commented May 17, 2017


		var object = scene.children[ i ];

		if ( object instanceof THREE.Line ) {


		// animate line width

		material1.meshLineWidth = 10 * ( 1 + 0.5 * Math.sin( 5 * time ) );

New Meshline #11040

New Meshline #11040

Conversation

Mugen87 commented Mar 21, 2017 • edited Loading

mrdoob commented Mar 21, 2017

mrdoob commented Mar 21, 2017

Mugen87 commented Mar 21, 2017

fernandojsg commented Mar 21, 2017

WestLangley Mar 21, 2017

Choose a reason for hiding this comment

Mugen87 Mar 22, 2017

Choose a reason for hiding this comment

WestLangley Mar 21, 2017

Choose a reason for hiding this comment

Mugen87 Mar 22, 2017

Choose a reason for hiding this comment

WestLangley Mar 22, 2017

Choose a reason for hiding this comment

WestLangley Mar 22, 2017

Choose a reason for hiding this comment

Mugen87 Mar 22, 2017 • edited Loading

Choose a reason for hiding this comment

Mugen87 Mar 22, 2017 • edited Loading

Choose a reason for hiding this comment

WestLangley Mar 22, 2017

Choose a reason for hiding this comment

Mugen87 commented Mar 22, 2017 • edited Loading

Mugen87 commented Mar 22, 2017 • edited Loading

WestLangley commented Mar 22, 2017

mrdoob commented Mar 22, 2017

WestLangley commented Mar 22, 2017

fernandojsg commented Mar 22, 2017

WestLangley commented Mar 22, 2017

spite commented Mar 22, 2017

mrdoob commented Mar 22, 2017

mrdoob commented Mar 22, 2017

Mugen87 commented Mar 22, 2017

fernandojsg commented Mar 22, 2017

Mugen87 commented Mar 22, 2017 • edited Loading

Mugen87 commented Apr 16, 2017

WestLangley commented May 10, 2017

Mugen87 commented May 10, 2017 • edited Loading

Mugen87 commented May 17, 2017

Mugen87 commented Mar 21, 2017 •

edited

Loading

Mugen87 Mar 22, 2017 •

edited

Loading

Mugen87 Mar 22, 2017 •

edited

Loading

Mugen87 commented Mar 22, 2017 •

edited

Loading

Mugen87 commented Mar 22, 2017 •

edited

Loading

Mugen87 commented Mar 22, 2017 •

edited

Loading

Mugen87 commented May 10, 2017 •

edited

Loading