How to improve sharpness of PIXI.Graphics

[Ravindu89]

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!

 

 

[jonforum]

hum what about ?  it not affect the blur ?

PIXI.SCALE_MODES
{LINEAR: 0, NEAREST: 1}

Hope this can help you

This chart bring me memories!. Some years ago I had a lot of fun coding  in MQL4 language for try made good market Bot. ?

 

[ivan.popelyshev]

Need more information. Maybe its about half-pixels and inner/outer alighment, which will be added in next version https://github.com/pixijs/pixi.js/pull/4886 , you can take dev version of pixi to use it: pixijs.download/dev/pixi.js

[Ravindu89]

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,                                                                                                                                                                                                                                                            

[ivan.popelyshev]

Do you understand that trick with half-int numbers?

[Ravindu89]

You mean half odd integers should be rounded!  or I think that is not an answer from me that you expected. ?

[Ravindu89]

@ivan.popelyshev or anyone,  Kindly give me a support to get through this.  

[jonforum]

you can study how forexagone do .
https://www.forexagone.com/outils-forex/expert-advisor-moyenne-mobile
but you need to get data from reel market 

 

[jonforum]

also you need understand how market work .
trading  are hard to understand, also mt4 algoritme
take a ;ook here before dev a bot .! 
https://www.mql5.com/en/forum/156669
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

[jonforum]

ps my bot are hard to understand , but is break 
|the bot was dev with http://www.networkautomation.com/
you need lear befor how market work also mt4 language

 here another cool  74Hour rec market and hack i made.
trading hare fun when your win.

 

[Ming Iu]

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.

[Ravindu89]

Thank you all for supporting me, 

Chart blurry problem has been solved after,

1. Added PIXI 4.8.1 lib
2. All pixel point values were rounded to integers
3. Setting 0 value to alignment property of PIXI.Graphics lineStyle