Jump to content

Weird lines when using extreme coordinate values


Recommended Posts

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 });

var stage = new PIXI.Container();

var scale = 6.705827927172184;

var xPos = 67176678.12079786;
var yPos = 110837733.5166879;

stage.interactive = true;

var graphics = new PIXI.Graphics();

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

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





Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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...