can I haz gl.LINES and gl.LINE_STRIP?

[Eugenius]

Back again with another question!

 

The issue was already discussed in GitHub.

 

So as the comments from others say, I tried drawing using gl.LINES || gl.LINE_STRIP.  I started off from modifying buildLine method in PIXI.WebGLGraphics class. 

 

        var i = 0;        var points = graphicsData.points;        if (points.length === 0) return;        //! this causes mismatch between road and border        if (graphicsData.lineWidth%2) {            for (i = 0; i < points.length; i++) {                points[i] += 0.5;            }        }        var firstPoint = new PIXI.Point( points[0], points[1] );        var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );        if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)        {            points = points.slice();            points.pop();            points.pop();            lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );            var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;            var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;            points.unshift(midPointX, midPointY);            points.push(midPointX, midPointY);        }        var verts = webGLData.points; // links        var indices = webGLData.indices;        var indexCount = points.length;        var indexStart = verts.length/6;        // sort color        var color = PIXI.hex2rgb(graphicsData.lineColor);        var alpha = graphicsData.lineAlpha;        var r = color[0] * alpha;        var g = color[1] * alpha;        var b = color[2] * alpha;        var pointLen = points.length / 2;        for (i = 1; i < pointLen; i++) {            verts.push(points[(i-1)*2], points[(i-1)*2 + 1]);            verts.push(r, g, b, alpha);        }        for (i = 0; i < indexCount; i++)        {            indices.push(indexStart++);        }        return;

then draw the points as follow

 

            webGLData = webGL.data[i];            renderSession.shaderManager.setShader( shader );//activatePrimitiveShader();            shader = renderSession.shaderManager.primitiveShader;            gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));            gl.uniform2f(shader.projectionVector, projection.x, -projection.y);            gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);            gl.uniform3fv(shader.tintColor, PIXI.hex2rgb(graphics.tint));            gl.uniform1f(shader.alpha, graphics.worldAlpha);                        gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);            gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, Float32Array.BYTES_PER_ELEMENT * 6, 0);            gl.vertexAttribPointer(shader.colorAttribute, 4, gl.FLOAT, false, 4 * 6, 4 * 2);            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);            gl.drawElements(gl.LINE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0);            // gl.drawArrays(gl.LINE_STRIP, 0, webGLData.points.length);

Then I get the following error message

GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

Obviously I am missing something important but I can't seem to find the cause. Many hours I put into this have been meaningless so far.

 

Thanks for reading

[Eugenius]

Wrong index..

 

Managed to draw "something" on the screen but not exactly what I wanted.

 

Need to replace

for (i = 0; i < indexCount; i++)    {        indices.push(indexStart++);    }

into 

indices.push(indexStart);

[chg]

Dumb question (related more to your linked discussion): is the default line rendering acceptable for width = 1.4142136 (ie. sqrt(2)) ? (or to extend upon that, could you vary the line's thickness by its angle, assuming you know that antialiasing is off in the browser)

 

Note: by using thicker quads and varying the opacity across the line's width you can fake antialiased lines (assuming the gamma is correct the lines can be made properly antialiased against their background assuming you don't care for the end points and overlapping lines, the latter of course will be composited which won't be correct)