Root cause of blurry lines?

Skip to first unread message

Taekyu Shin

Apr 12, 2016, 3:23:47 PM4/12/16
to WebGL Dev List

I hope that everybody is doing well today.

In a short summary, we need to implement a feature to draw a crisp line(one-pixel width) even when MSAA is on.

Since ANGLE translates OpenGL ES codes to DX codes.
I marked up some DX11 line drawing codes with MSAA on.
(sample count = 4, quality = 0).

Codes is here. It does not do 'rendering to texture' but just on-screen rendering.

But I get all crispy lines. (one-pixel width lines. Even diagonal lines are crispy.).

my WebGL codes shows blurry lines somehow. (My WebGL codes fix all the vertex position to the center of each pixel. So with MSAA on, it should draw a crispy line. but it doesn't.)

My GPU : Intel HD Graphics 5500.

I am confused here. There is discrepancies between what WebGL codes do on Chrome and what my DX11 codes do.

Would you be able to give me any guess on why? (Or what the difference would be? It seems that ANGLE renders to textures and do texture sampling to render the final screen. Would that cause this?)

Thanks a lot. Anything will be appreciated.


Andre Weissflog

Apr 12, 2016, 3:59:43 PM4/12/16
to WebGL Dev List
I've had the same problem recently with crisp text rendering in this demo (which had blurry text before):

The problem there was that the after the WebGL framebuffer was rendered, the composition of the framebuffer with the webpage may be upscaled (e.g. on a Retina display) and have a blurry appearance. Since this is a composition problem, not WebGL, it must be fixed via CSS, and this isn't standardized across browsers. I googled around and found this:

.game {
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 0px none;
    display: block;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;

(the image-rendering and -ms-interpolation-mode are the important parts).

There's also a chance that you have some subpixel precision problem (like D3D9's 'half-pixel-offset', but D3D11 and GL/WebGL should have the same pixel-center behaviour).

Finally, canvas-filtering on Chrome Canary recently regressed, see here:

Also: that CSS trick doesn't seem to work on Safari, it's always blurry there.

Hope this helps.

Theo Armour

Apr 12, 2016, 4:29:46 PM4/12/16

Here's a link to your demo that displays the code in your browser:

Use your browser's zoom feature to see the issue.

Here's what I get:

And, given all the anti-aliasing that's going on, it looks fine to me. 

To see what I mean, try drawing some diagonal lines, circles and curves and you will see what I mean.

But you may have a specific task where antialiasing is an issue. If so can you tell us what actual problem you are trying to solve? 


You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
For more options, visit

Taekyu Shin

Apr 13, 2016, 4:01:13 PM4/13/16
to WebGL Dev List

Thanks everybody! I really appreciate your answers.

I would like to give a little more information so I can resolve this issue.

I am implementing this feature. When MSAA (CSS antialias style is true for the GL canvas) is on, our users should be able to draw crispy lines.

It is done by fixing all the vertex position to the 0.5 (center of pixels) according to DX10/11/openGL rasterization specs.
Presumably, MSAA is within one pixel, that should draw a crispy straight line (pixel width = 1).
We did the same thing for Desktop OpenGL, and it works well on most GPUs.

But For WebGL only on Intel GPU only, it seems to still draw 3 pixel-width lines when antialiasing is on for the GL canvas.
(even though I fix all the position to the 0.5 center of each pixel.
That is the webGL code I attached above.( here. )

With this special WebGL code on Intel GPU, IE/FireFox/Chrome version 49 still draws  3-pixel-width-lines. (Canvas Antialiasing is on. on modern Lenovo laptop - Intel HD Graphics 5500. It supports DX 11.)
Funny thing is that NVidia/AMD GPUs still draws crispy lines (one-pixel-width). (This one-pixel-width line drawing is what I need.)

I also turned off filtering with CSS {padding: 0px; margin-left: auto; margin-right: auto; border: 0px none; display: block; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }

I still don't get what I need. So this might be coming from something else, not filtering.

I would appreciate any any any ideas! There was somebody from ANGLE community that suspected the intel driver may draw sqrt(2) width of lines sometimes.

Thanks everybody! Have a great week! :-)


Bob Blaine

May 4, 2021, 3:17:51 AM5/4/21
to WebGL Dev List

I'd like to bring this back up and see if there's any other thoughts on this. It's been a puzzle for me for quite a while. I'm attaching an HTML page that shows the issue. If you open the page in Chrome (version 90) on a Windows system with Intel graphics and use the default ANGLE backend, the lines are drawn multiple pixels wide. If I change the backend to OpenGL, they are drawn 1 pixel wide, which is the desired behavior. While it seems like the solution would be to just tell our customers to switch to the OpenGL back end, it feels like a big change for a somewhat cosmetic issue.

We are using this to draw lines like axis rulers on plots. Since it works so well on other graphics cards, our users perceive it as a bug. Any thoughts or suggestions would be appreciated.



Ken Russell

May 4, 2021, 8:23:41 PM5/4/21
to WebGL Dev List
Hi Bob,

Please review this recent article on the new ResizeObserver entry, device-pixel-content-box:

It lets you determine very precisely the number of device pixels the canvas is rendering to, and is crucial for use on high-DPI monitors.

Your example is using devicePixelRatio (also there's a stray </script> tag in there breaking it) and that might be why the lines aren't as crisp as they could/should be.


Ben Adams

May 4, 2021, 8:28:05 PM5/4/21
Are you multiplying the canvas' height and width attributes (not the css style height/width) by window.devicePixelRatio to get a 1:1 mapping with pixels?

James Darpinian

May 7, 2021, 1:08:20 PM5/7/21
Is CMAA set to "Override Application Settings" in the Intel graphics control panel?

Reply all
Reply to author
0 new messages