RenderOutline with LineMesh bug

Bugs
1

Hi

When creating a Line I needed to have a fixed width in pixels, no matter the zoom or camera position. The renderEdges was not the solution cause it was wider with the zoom.

I found renderOutline that is behaving weirdly with LineMesh. The outline is drawn next to the LineMesh. It’s not creating the outline. And setting outlineWidth makes it separate even more from the LineMesh:

image

White is the line, Green is the outline.

https://playground.babylonjs.com/#QVV8DJ#6

I do not know how to correct this.

Also if this will not be my solution can you tell me how to modify, shaderMaterial with:

curve.material.customShaderNameResolve = (s): string => {
        const vertex = Effect.ShadersStore['colorVertexShader'];
        const pixel = Effect.ShadersStore['colorPixelShader'];

        Effect.ShadersStore['color2VertexShader'] = shader.replace('<what>', '<with what?>');

        Effect.ShadersStore['color2PixelShader'] = Effect.ShadersStore['colorPixelShader'];

        return s+ '2';
};

To have a consistent line width? Like always 3px width no mather the zoom? What should I put in:

'<what>', '<with what?>'

Regards
Peter

2

You should use a smaller value for outlineWidth (0.02 for eg), as it depends on the scale of your objects.

The outline renderer works by rendering a slightly bigger version of the mesh before drawing the regular mesh. In the case of lines, however, what you will get is simply a copy of your lines which are slightly offsetted from the initial lines. I’m not sure it’s what you want.

There’s no simple way to draw thick lines. What others have done is to use small tubes instead of lines (but they will be bigger with the zoom…).

Another solution is to use the glow layer:

https://playground.babylonjs.com/#QVV8DJ#7

Or the highlight layer:

https://playground.babylonjs.com/#QVV8DJ#8

3

I looked at glow but I will have like 10 of those lines and I do not want to kill the performance with it cause this will be always visible.

Is there a way to modify the shader to draw it thicker? with customShaderNameResolve() or even apply a different shader entirely?

Regards
Peter

4

You will need some custom shaders, there’s no standard shaders in Babylon to draw thick lines.

One repo I stumbled upon that could help: GitHub - mattdesl/webgl-lines: some interactive content for a blog post