P5.js: TRIANGLE_STRIP with WEBGL not working properly?

[eivindml]

Nature of issue?

• [X] Found a bug

Most appropriate sub-area of p5.js?

• [X] WebGL

Which platform were you using when you encountered this?

• [X] Desktop/Laptop

Details about the bug:

• p5.js version: p5.js v0.5.16 October 11, 2017
• Web browser and version: Safari 11.0.2
• Operating System: macOS High Sierra
• Steps to reproduce this:

Using this code:

var cols, rows, w, h;
var scl = 100;

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);

    w = windowWidth;
    h = windowHeight;
    cols = w / scl;
    rows = h / scl;
}

function draw() {
    background(245, 244, 236);
    stroke(17, 18, 16);
    noFill();

    translate(0, 600);
    rotateX(PI / 3);
    translate(-w / 2, -h / 2);

    for (var y = 0; y < 1; y++) {
        beginShape(TRIANGLE_STRIP);
        for (var x = 0; x < cols; x++) {
            vertex(x * scl, y * scl, 1);
            vertex(x * scl, (y + 1) * scl, 2);

        }
        endShape();
    }
}

I get this result:

I would expect all vertices to be connected like this:

It works like it should in 2D environment, but not when I set it to WEBGL.

[eivindml]

Anyone else experiencing this?

[sahilkhanna]

Facing the same issue on P5.js "0.5.16"
Running it on chrome on windows with WEBGL.
Honestly it looks more like LINE_LOOP than TRIANGLE_STRIP.

[eivindml]

Yes. It definitely behaves as a LINE_LOOP rather than TRIANGLE_STRIP. It works as expected in 2D, but not in 3D.

[stalgiag]

Good catch! The strokes themselves are actually drawn with gl.TRIANGLES because they are polygons with faces but you are right that there should be a way to fake the other drawing modes. I'll look into how Processing does it.

[stalgiag]

Okay so it seems like doing this will require some pretty big changes to how lines are added. You can see here how Processing handles this. I think the first step would be change the code so that the lines are drawn one segment at a time as opposed to all at once during endShape(). I'll keep investigating but a patch may take a while.

[yousifalyousifi]

Not sure if this should go in it's own new issue, but TRIANGLES also seems to not work as expected in 3D WEBGL.

I supply beginShape(TRIANGLES) six vertices.
Two disjoint triangles are expected. https://p5js.org/reference/#/p5/beginShape

https://alpha.editor.p5js.org/

function setup() {
    createCanvas(400,400,WEBGL);
}

function draw() {
    background(186, 244, 255);
    var changingAngle = frameCount/130;
    rotateX(-PI*0.1);
    rotateY(changingAngle);
    drawTriangles(0,0,0,140,120,300);
}

function drawTriangles(x, y, z, width, height, length) {
    let v1 = [x+length/2,y,z+width/2];
    let v2 = [x+length/2,y,z-width/2];
    let v3 = [x+length/2,y-height,z+width/2];
    let v4 = [x-length/2,y,z+width/2];
    let v5 = [x-length/2,y,z-width/2];
    let v6 = [x-length/2,y-height,z+width/2];
    push();
    beginShape(TRIANGLES);
    vertex(v1[0],v1[1],v1[2]);
    vertex(v2[0],v2[1],v2[2]);
    vertex(v3[0],v3[1],v3[2]);
    vertex(v4[0],v4[1],v4[2]);
    vertex(v5[0],v5[1],v5[2]);
    vertex(v6[0],v6[1],v6[2]);
    endShape();
    pop();
}

[Spongman]

indeed. this was fixed in #2670.

demo here: https://codepen.io/Spongman/pen/xjvwWz?editors=0010

[AdilRabbani]

Hey, if I'm not wrong the TRIANGLE_STRIP issue is solved now after #3213. Shouldn't this be closed? The issue with TRIANGLES still persists though, but I think it would be better to make it a separate issue...

[AdilRabbani]

TRIANGLES fixed in #3244