Weird lines when using extreme coordinate values

[dinther]

Am I running out of coordinate resolution here?

So far I have had no trouble using the Pixi coordinate system to span the planet in a Google Mercator projection where one pixi unit = 1 meter on the map (longitude wise)

Sprites move fine, things scale fine and I can even draw polygons very accurately using coordinate values exceeding 70 million.

However, I can not draw proper lines (yeah I know they are made of triangles) as shown in the attached picture. This appears to be due to the coordinates and scales I am using.

Have a look at the fiddle: https://jsfiddle.net/g7tqghp5/8/

However, if I wrap the lines in a container then they render correctly: https://jsfiddle.net/2v0pyshk/ 

Any suggestions what I can do to get these lines rendered correctly without the use of containers?

 

(Edit: All pixi versions show this behavior)

var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true });
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

var scale = 6.705827927172184;
stage.scale.set(scale);

var xPos = 67176678.12079786;
var yPos = 110837733.5166879;
stage.position.set(-xPos,-yPos);

stage.interactive = true;

var graphics = new PIXI.Graphics();

// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(2, 0xffd900, 1);

// draw a shape
graphics.moveTo((xPos/scale)+10, (yPos/scale)+10);
graphics.lineTo((xPos/scale)+50, (yPos/scale)+50);

graphics.endFill();

stage.addChild(graphics);

renderer.render(stage);

[ivan.popelyshev]

move big coordinates part to Graphics.position , like floor of top left point. Shapes must have small coords.

thats third time we have this issue in a month: js computes with double precision, shader receives single, shader computes half of it.

[dinther]

Duh, that now seems painfully obvious. Sorry to waste your time.

As it is always easy to complain, let me just say that working with Pixi has been an absolute blast! My ship simulator went Beta last night and soon I be confident enough to submit it to your gallery.

I love the way the API is structured and it is very intuitive to use. I honestly don't think I could have pulled this off without Pixijs . 

A huge thank you for your patience and your help.

[ivan.popelyshev]

That's not the obvious issue, you are just lucky because I captured it a month ago. 

I just figured out that my fork of pixi.js, http://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards, is affected in a big way: I have separated camera, and both translationMatrix and projectionMatrix will have big numbers inside. Basically, we have to use root transform that reduces number of significant digits, not a camera. I dont even know how other rendering engines deal with that, gonna ask PlayCanvas guy how do they manage it.