Issues with complex lines and lineStyle colors?

[fishyman]

Hi - I have a program that draws a line (a ground trace of a satellite), made of ~180 segments, and I'm having issues setting the lines to be a color other than black(default), when using the webGL renderer. Everything works just fine in the canvas renderer. I followed this example (the part with the moving, filled square) as closely as possible, with a couple changes due to my architecture. 

 

I did a small case study and found the following, using autoDetectRenderer():

 

Linux(CentOS 6.5 on a VM with no 3D or 2D acceleration):

Chrome: Works fine (Canvas Renderer)

Mozilla: Works fine (Canvas Renderer)

 

Windows 7:

Chrome: Black line (WebGL Renderer)

Mozilla: No line (WebGL Renderer)

IE: Black line (WebGL Renderer)

 

Mac OSX: 

Chrome: Works fine (Canvas Renderer) 

Mozilla: No line (WebGL Renderer)

Safari: Works fine (Canvas Renderer)

Opera: Works fine (Canvas Renderer)

 

I'll start by explaining my program code a little. Since I don't like huge blocks of code, my script runs a exec() function that calls several other functions that initialize and create PIXI objects and call animate.

 

Below is my initialization function that sets up the stage, and renderer.  There's some primus(websocket wrapper for node.js) here that receives a JSON object that includes the lat & lng of endpoints for each of the 180 segments.

function initPixi(){    // create an new instance of a pixi stage    stage = new PIXI.Stage(0xffffff, true);    // create a renderer instance    renderer = new PIXI.autoDetectRenderer(1024, 512);    // add the renderer view element to the DOM    document.body.appendChild(renderer.view);    // When primus receives data, store it in SatMapOut    primus.on("data", function(data) {        try{            SatMapOut = JSON.parse(data.data[1])        } catch(exception){            console.log(exception)        };    });    // Set ratio of pixels/degrees of longitude    a_ratio = renderer.width/(2*world.x_radius);    requestAnimFrame( animate );}

Next is the code that creates the spacecraft, and sets up the scTrack(the line which is the problem child(haha get it?)) 

// Draw the spacecraftfunction drawSC(){    // create a texture from an image path    scLabel = new PIXI.Text("SPACESHIP!!!", {font: "bold 14px Arial ", fill: "#ff7105", stroke: "#000000", strokeThickness:2});    scTrack = new PIXI.Graphics();    scTrack.lineStyle(1, 0xffffff, 1); // Same results whether this is here or not.    // create a new Sprite using the texture    scSprite = new PIXI.Sprite.fromImage("textures/GenScSprite.png");    // center the sprites anchor point    scSprite.anchor.x = 0.5;    scSprite.anchor.y = 0.5;    stage.addChild(scTrack);    stage.addChild(scLabel);    stage.addChild(scSprite);}

Last is the animate function, where the line is actually drawn. Since it models the orbit of a spacecraft, the whole line is constantly moving and shifting, as the craft has variations in its flight path.

 

I set the line style here too, but I also tried other combinations (w/ & w/out lineStyle in drawSC, w/ & w/out lineStyle in animate()). 

 

I also tried using beginFill(0xffffff) and endFill(); but this didn't change anything.

 

P.S.: wTS is a function which converts degrees latitude and longitude to pixel coordinates. 

P.P.S: is there a pixi function that does that?

function animate() {        // If SatMapOut is populated, then update positions of sprites.    if(!($.isEmptyObject(SatMapOut))){        //-------------------------------------------------------------------------------        // Some code is here for updating positions of other sprites on the page, but I omitted it to be concise.        //--------------------------------------------------------------------------------        // Clear scTrack buffer(delete old line)        scTrack.clear();        scTrack.clear();        // Cycle through line segment objects and draw orbit track in segments        for(var p in SatMapOut.OrbTrack) {            // SETTING LINE STYLE            scTrack.lineStyle(1, 0xffffff, 1);            // If endpoints cross the edge of the screen, draw two half segments instead of one.            if(p.wrap == true){                scTrack.moveTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[0]),                     wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[0]));                scTrack.lineTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[1]),                     wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[1]));                                scTrack.moveTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[2]),                     wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[2]));                scTrack.lineTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[3]),                     wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[3]));            }else{                scTrack.moveTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[0]),                     wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[0]));                scTrack.lineTo(wTS(a_ratio, world.x_radius, SatMapOut.OrbTrack[p].lng[1]),                     wTS(a_ratio, world.y_radius,-SatMapOut.OrbTrack[p].lat[1]));                }        }    }    // Update time    time.setText(moment().utc().format("YYYY-MM-DDTHH:mm:ss.SSS"));    // render the stage    renderer.render(stage);    // Loop animate again    requestAnimFrame ( animate );}

And that's everything that is pertinent(I think). 

 

 

Lastly, here's the html page that calls the script: 

<!DOCTYPE HTML><html>  <head>    <meta charset="UTF-8">    <title>SatMap with pixi.js</title>    <style>      body {          margin-left: 128px;        margin-top: 96px;        padding: 0;        background-color: #000000;      }    </style>    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>    <script src="libs/pixi.js"></script>    <script src="libs/moment.js"></script>    <script src="source/ws.js"></script>  </head>  <body>      <script src="source/satmap_pixi.js" type="text/javascript"></script>  </body></html>

 

 

[wayfinder]

ctx.beginPath(); ctx.lineStyle = .... ctx.moveTo....ctx.lineTo....etc.... ctx.stroke();