Rendering solid lines with webgl

[anvaka]

Hi guys,

I'm trying to render 1px wide lines with WebGL renderer, but instead of solid lines like this (canvas renderer):

I'm getting dashed lines like this (webgl renderer):

Here is a live demo.

I'm not using anything fancy here. Just a regular PIXI.Graphics instance graphics, and render lines like this:

graphics.lineStyle(1, 0xcccccc, 1);
graphics.moveTo(from.x, from.y);
graphics.lineTo(to.x, to.y);

Is there any way to make them solid?

PS: I know I was able to make them solid using gl.drawArrays(gl.LINES, ...) in custom built webgl library (see here) PIXI however uses gl.drawElements(gl.TRIANGLE_STRIP, ...). Not sure if this is what's causing the problem.

[GoodBoyDigital]

Hi @anvaka thats unfortunately a know issue in pixi when using really thin 1px lines in webGL. The solution is as you have suggested that for thin lines we should use glLINES I will make sure to add this to my todo list.

I have added a new function to the graphics object called cachAsBitmap and generateTexture which convert the graphics objects to sprites? But not too sure if that will speed up / slow down your example?

[mattdesl]

Works fine on my OSX Safari and Chrome, but I get a stippling pattern in FF when it zooms out.

A couple issues with gl.LINES:

• They are scale-independent. You can see the difference when you zoom in and out really far. Current WebGL implementation (triangle strips) will scale the lines along with zoom -- similar to the canvas renderer. Whereas your other demo, the line width remains constant regardless of scale.
• The line width isn't known until the local transformation is applied. So even if the user requests a very thin line, it might need to be drawn much thicker when scaled up, at which point gl.LINES won't work (GPU-dependent line thickness).
• Using gl.LINES may cause a lot of draw calls in degenerate cases; e.g. rect, line, rect, line...
• gl.LINES and its thickness is kind of unpredictable across GPUs, especially once you throw anti-aliasing into the mix.

One solution would be to have a switch for each Graphics instance that enables gl.LINES for the WebGL backend, by default set to false. That would allow you to replicate your own WebGL demo, with a consistent 1px line thickness across browsers and regardless of zoom level. In your demo, you could use two Graphics objects; one for the rectangles (which would batch all into a single triangle strip), and one for lines (which would draw all with a single set of line vertices). This way you don't run into thousands of draw calls.

[anvaka]

@GoodBoyDigital, @mattdesl thank you very much for quick response.

@GoodBoyDigital, When I use cachAsBitmap or generateTexture will I still be able to update nodes/links positions on each frame? I couldn't find it's possible from the sources.

@mattdesl, fair points. I'm on OSX too, still always see it (MBP late 2011).

Maybe we could have a primitive line object, child of DisplayObjectContainer, which will use gl.LINES (with all their caveats). Developers could then use it, instead of PIXI.Graphics when scale factor is less than 1. Not sure if everyone would benefit from this though. I'd definitely love to have something like this.

btw, I'm pretty sure I saw PIXI.CustomRenderable at some point, but now I can't find it anywhere. Is it removed?

Thank you once again for helping out!

[GoodBoyDigital]

@anvaka making a custom pixi display object is definitely a good way to get the specific result you are after. I removed PIXI.CustomRenderable as the with the new version of pixi it should simply be a case of extending PIXI.DisplayObject and overwriting the _renderWebGL and _renderCanvas functions. Thanks!

[GoodBoyDigital]

Hey guys, closing this as it feels like this discussion has run its cause. thanks!

[r4jin]

Hi guys! not sure if this issue has been solved as it's closed but I could not figure out a way to get it right. The options I had were

1. I cannot use cacheAsBitmap since it causes wrong graphic in Ejecta (which I will create an issue soon with example).
2. Using gl.drawArrays, which I could not figure out how to modify the code in PIXI given that I'm a webgl newb.

So.. I am not sure where this is heading to but hope I here something!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.