BabylonJS MeshLine - a port of THREE.MeshLine

[roland]

@sebavan @Evgeni_Popov @Deltakosh

@Evgeni_Popov LinesMesh didn’t directly help (anyways thank you! ), but I believe, the intersects method of the mesh must be overriden. I’ll give it a try.

Guys, I’m so excited! It is getting to look really good But I still have to comment the code, write the docs, solve the picking stuff, revise the code (I always find something to improve or to add - for example I forgot dispose in the first round ). Contributing is like 5x times more work than just coding on private projects

Unfortunatelly I was forced to have a break from GreasedLine again. This time that sucker COVID infected me. I didn’t even think that it’s still a threat. This is the 4th time since the outbreak. Now it seriously tries to kill me I was spitting out blood and I’m on oxygen nearly the whole day and I feel I could sleep all day long. Since I am coughing like crazy, I can’t even sleep. More time to code

[Evgeni_Popov]

Take care of yourself!

[Deltakosh]

I’m so excited as well but as @Evgeni_Popov said: take care!! We have to integrate your great work!!!

[roland]

@sebavan @Evgeni_Popov @Deltakosh

Guys! Let me help to decide regarding a change in GreasedLine!
I am thinking about to introduce blend mode for the color and colors. Is it worth?

Let me explain: If you want a line with a single color, the code goes like this:

  const line2 = GreasedLineBuilder.CreateGreasedLine(
    'basic-line-2',
    {
      width: 30,
      color: Color3.Magenta(),
      points: [
        new Vector3(0, -4, 0),
        new Vector3(5, -4, 0),
        new Vector3(10, -4, 0),
      ],
    },
    scene
  )

Now because the fragment shader does this (where singleColor is the color from parameters):
gl_FragColor.rgb *= singleColor;

Youi have to actually set the line2’s emmisiveColor to white to get Color3.Magenta() at the end.

How about to introduce colorMode parameter, which could tell the shader which way I want to blend the singleColor with gl_Color.`

Something like this:
COLOR_MODE_SET
COLOR_MODE_ADD
COLOR_MODE_MULTIPLY

I think this way the users can do more amazing color mixing

Or just stick to existing solution?

Thanks!

[sebavan]

Love all your progress @roland

As a general rule I d suggest to keep it the simplest as possible and grow the options based on user feedback. Back compat being a central point of focus, I agree the API shape is a strong concern.

About your question, in PBR, we basically solved this one with an unlit parameter disabling the multiplication so it is similar to your mode.

As I do not have any strong preference here let me summon @Deltakosh, @Evgeni_Popov and @RaananW to see what they think.

[roland]

@sebavan

About your question, in PBR, we basically solved this one with an unlit parameter disabling the multiplication so it is similar to your mode.

I’ve just tried it out Thanks!

Shouldn’t be unlit implemented on the StandardMaterial as well?

[Evgeni_Popov]

Adding this color mode parameter does sound nice to me, as it’s a small thing and it could be useful.

@roland

Shouldn’t be unlit implemented on the StandardMaterial as well?

It is, more or less, with the disableLighting property of the standard material (but it does not behave exactly like the unlit parameter, you have to set an emissive color/texture).

[Deltakosh]

Agreed with both @Evgeni_Popov and @sebavan

I would also recommend to do a progressive update… Get a first PR out that is not a monster to review

[roland]

So the color modes can be achieved (to my best knowledge of shaders) this way

gl_FragColor.rgb = gl_FragColor.rgb * singleColor * isMulColorMode;
gl_FragColor.rgb = gl_FragColor.rgb + singleColor * isAddColorMode;
gl_FragColor.rgb = gl_FragColor.rgb * isNotSetColorMode + singleColor;

or this wayt

if (colorMode == ${GreasedLineMesh.COLOR_MODE_SET}.) {
  gl_FragColor.rgb = singleColor;
} else if (colorMode == ${GreasedLineMesh.COLOR_MODE_ADD}.) {
  gl_FragColor.rgb += singleColor;
} else if (colorMode == ${GreasedLineMesh.COLOR_MODE_MULTIPLY}.) {
  gl_FragColor.rgb *= singleColor;
}

I did some performance tests on both solutions and the second solution with ifs runs a bit quicker. Do you have any tricks to make it quicker? Thanks!

Do you use things such?

GitHub - aras-p/glsl-optimizer: GLSL optimizer based on Mesa's GLSL compiler....

[jeremy-coleman]

hope ur feeling better roland. no cigars on the back porch pls. who needs that^^, we have papa popov!! actually a good idea might be to make a material plugin factory that just allows the user to arbitrarily put whatever they want there, like using glslify (my savior) to do something like this glsl-blend/blend.frag at master · jamieowen/glsl-blend · GitHub or this is a js version idk if so useful though GitHub - Matt-Esch/blender-compiler: A high performance blend function compiler

[CodingCrusader]

@roland

Do you have any tricks to make it quicker?

Switch statements are quicker

but my solution is quickest, I suppose ^^

        let mode = 3;   // 1=assign, 2=add, 3=multiply
        let singleColor = 3;
        let rgb =
            (mode == 1) * singleColor +
            (mode == 2) * (singleColor + singleColor) +
            (mode == 3) * (singleColor * singleColor);
        console.log(rgb)

Outputs for mode 1 => 3, 2 => 6, 3 => 9

[roland]

@CodingCrusader

Switch statements are quicker

Gonna perftest it, thank you!

@CodingCrusader

(mode == 1)

I’ve read about this, but it should be casted to float I believe and it’s performance penalty, as I read, but perftest will show the results! Many thanks for both suggestions!

EDIT: Did you notice we are talking about shader code?

[roland]

@CodingCrusader

Bad luck - switch and the second solution runs at the same speed (approx.) as the if’s.

EDIT: I think, we could see some different result using different approaches on mobile GPUs, what I’ve learned from reading articles about GPU optimizations.

[Evgeni_Popov]

The easiest (and fastest) way would be to have a single colorMode property in the material plugin and use a define to set the value in the shader, something like:

Babylon.js Playground

[roland]

@Evgeni_Popov thank you!

I was thinking about this solution. I use defines for dealing with the color property:

I didn’t use it because I could imagine a situation where the user wants to implement mouse over highlighting of the line just by changing the colorMode to SET from other modes and as you said previously recompilation of the shader is a heavy task. What’s your opinion?

[Evgeni_Popov]

Indeed, in this case, passing the colorMode as a uniform variable and testing all 3 values is the best solution. Branching when the condition involves only uniform variables is normally not very expensive.

[Evgeni_Popov]

Related to drawing lines, I have implemented this paper from Emil Person to draw thin wires:

Babylon.js Playground

Maybe it will be useful to some people.

[roland]

@jeremy-coleman

hope ur feeling better roland. no cigars on the back porch pls

Thanks man! I am already past the worst part, still coughing though but I couldn’t resist to smoke and I am just having one I am convincing myself that the 70% oxygen I receive will balance it out

[roland]

It throws en error:

[Evgeni_Popov]

I don’t know what this error is but it’s not related to the PG (I also get it sometimes)