Jump to content

can I haz gl.LINES and gl.LINE_STRIP?


Recommended Posts

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 :)

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...