beginShape/endShape convert LINES shape to triangle fan in WEBGL.

[LBdN]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.6.0
• Web browser and version: chrome 65
• Operating System: win10
• Steps to reproduce this:

create a LINES shape :

        sketch.beginShape(sketch.LINES);
        for (var e of this.edgePool.values()) {
            sketch.vertex(e.x1, e.y1, 0);
            sketch.vertex(e.x2, e.y2, 0);            
        }
        sketch.endShape(sketch.CLOSE);     

see the triangle fan displayed instead.

Probably because those lines in p5.js code :

p5.js/src/webgl/p5.RendererGL.Immediate.js

Line 234 in 834b6ec

if (this.drawMode === constants.FILL || this.drawMode === constants.TEXTURE) {

the code converts the LINES shapes into a triangle fan.

[Spongman]

This should be fixed in #2670

[lmccart]

@Spongman it may be a while before we're able to merge that PR because it's so large. i would welcome pulling out some of these smaller fixes and submitting as individual PRs if you'd like to get them merged faster.

[Spongman]

@kjhollen has already reviewed it and requested changes that I have made. It really can't be broken up any further. it is a rather significant restructuring of the internals of the webgl engine - necessary to fix a bunch of issues related to the location of state within the rendering pipeline. is there anything else about the patch that concerns you apart from the size?

[hamoid]

Is this the same bug? https://discourse.processing.org/t/custom-shape-not-filled-correctly-with-webgl/4631

[AdilRabbani]

Hey @stalgiag I decided to look into this issue and noticed that the current WebGL implementation of LINES with beginShape, fills the shape with a specified color whenever fill() is used. While it can be seen that fill() does not have any effect when drawing shapes with LINES, in 2D mode. Shouldn't this be the desired behavior for WebGL mode as well? i.e for shapes with LINES, it should be ignoring p5.RendererGL.prototype._drawFillImmediateMode function altogether, drawing only the line strokes with p5.RendererGL.prototype._drawStrokeImmediateMode.

[stalgiag]

Hi @AdilRabbani I agree that it probably makes sense to make this consistent between 2D and 3D. I haven't been tracking this issue since getting back into the swing of the project but what you are saying seems like a sensible place to start.

[Spongman]

i think one of the issues is that 'fill' doesn't really mean anything in 3d.

except, maybe a delaunay triangulation of the convex hull of the points given. but i think that's way beyond the scope of p5.

[AdilRabbani]

Tested on Processing v3.4. No fill for shapes drawn with LINES.

So should I submit a PR passing the correct edges for LINES so as to close this issue? Would also limit LINES to only draw line strokes rather than having a weird effect from fill().