Jump to content

How to improve sharpness of PIXI.Graphics


Recommended Posts

I have two charts that one is used 2d canvas techniques and another one is based on WebGL (Ongoing development).  Between these two charts, 2d canvas chart sharpness is far better than WebGL chart. I have done several workarounds to improve WebGL chart sharpness but still, I couldn't bring WebGL chart up to 2d canvas chart level. 

2d Canvas Chart



WebGL Chart


Would like to hear any advice on the subject.

Thanks in advance!



Link to comment
Share on other sites

Thank you all for supporting me. 

As @jonforum and @ivan.popelyshev suggested, I did several changes on my project,

  1. Scale mode of PIXI is changed to NEAREST (Texts were become sharper)
  2. Used Pixi dev release
  3. Off antialiasing when creating renderer.      

After chart sharpness came to canvas chart level.  But line chart needs antialiasing, So is there a way to on/off anti-aliasing of graphics object manually. 

Now chart is looking like below,                                        image.thumb.png.1a70fed1266ff2ed428141e8fe4a1155.png                                                                                                                                                                                                                    

Link to comment
Share on other sites

  • 2 weeks later...

also you need understand how market work .
trading  are hard to understand, also mt4 algoritme
take a ;ook here before dev a bot .! 
the new theck are meta5.
Watch your ass because it hard,
it took met one year to dev a mt4 bot.

here example but you will need dev a IA 

this is my very hold bot for hack market white excel from microsoft .


all bot run with Excel

Link to comment
Share on other sites

I think you've correctly diagnosed the problem with lines in WebGL.

When you use anti-aliasing, each pixel is made up of many point samples, so lines will usually be blurry because some of the samples will end up on the line and some of them will not be on the line. Without anti-aliasing, lines end up looking aliased with a staircase effect.

With anti-aliasing on, you can try to nudge lines less than one pixel to the side so that sampling pattern for a pixel falls entirely over the line. I've never had much luck with stuff like that myself, but someone with more patience might be able to figure it out.

With anti-aliasing off, you can write special line-drawing code for anti-aliasing the sides of lines, but I don't think that's implemented in Pixi.js.

Or, maybe, you can create multiple canvases layered on top of each other: one with anti-aliasing and one without.

Link to comment
Share on other sites

  • 3 weeks later...

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