Subpixel rendering for crisp edges

[louisstow]

Hi. I've looked into the source for the WebGL renderer which looks like it makes use of 2D canvas to create a texture. The problem I am having is with a 1px width stroke, the edges are blurry. I believe this is due to the nature of canvas 2D which requires drawing on the pixel boundary (offset by .5) to create sharp edges. Is it possible to do this with current two.js functions or will that require some work to the internals?

http://diveintohtml5.info/canvas.html

[jonobr1]

Thanks for the question @louisstow. Both the Canvas2d and WebGL renderers account for subpixel rendering... I'm kind of curious to see the line in question to help diagnose the problem. Do you have it running online?

For reference, this JSFiddle is with the WebGL renderer and is a 50px x 1px line. It actually uploads out a 100px x 2px ( or equivalent Device Pixel Ratio ) line to the GPU as a texture and then scales it down in the rendering process.

[louisstow]

Thanks @jonobr1 ! I'll have to test this on my external display but the problem was occurring on displays with devicePixelRatio = 1.

[jonobr1]

Ah, if that's the case you can force the ratio with:

var two = new Two({ ratio: 2 });

On Sat, Jul 28, 2018, 6:30 PM Louis Stowasser notifications@github.com wrote:

Thanks @jonobr1 https://github.com/jonobr1 ! I'll have to test this on my external display but the problem was occurring on displays with devicePixelRatio = 1.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/jonobr1/two.js/issues/302#issuecomment-408645561, or mute the thread https://github.com/notifications/unsubscribe-auth/AANbgZIR5ar5N-tbGiqIC2GDYzUF3Ne0ks5uLRAogaJpZM4VlBv- .

-- http://jonobr1.com/

[louisstow]

Thanks so much! I shall try that. I have another question but I'll make a new issue.