[Bug] WebGL Renderer Blurry

[benz2012]

Describe the bug Using the WebGL renderer in my conditions produces far blurrier output shapes than with the Canvas renderer or SVG renderer. I wouldn't be surprised if Retina magic (or lack thereof) is at play here.

To Reproduce Steps to reproduce the behavior:

1. Head to any of the "Drawing Your First Shapes" examples
2. Add type: Two.Types.webgl to the params object
3. Observe the shapes (especially their strokes)

Expected behavior The WebGL renderer should produce the same or near the same image sharpness as the other two renderers.

Desktop:

• Device: MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports)
• OS: MacOS 12.6.5
• Browser: Google Chrome 112.0.5615.137

Screenshots

[benz2012]

To make it even easier, simply navigate to the Rendering Types example codepen to see the differences as well

[jonobr1]

Thanks for posting. Yes, this has to do with retina displays. The way the WebGL Renderer works is that textures are created of each individual path. These textures are uploaded to WebGL and then rendered on quads. The WebGL canvas takes into account the DPI, but the canvas that generates each texture isn't. I'll have to address this, though I'm not sure what performance hit this will create yet.

[jonobr1]

It could also have to do with how the textures are filtered: https://github.com/jonobr1/two.js/blob/dev/src/renderers/webgl.js#L1418-L1420

[benz2012]

@jonobr1 I played around with the filters and using nearest with MAG eliminates the blurriness. Changing MIN didn't seem to have any effect.

However, once the blurriness was gone, it became apparent that the root cause was still present -- so I think your first hunch might be correct. Pixelation was present.

[jonobr1]

This will be published on NPM by the end of the week. Thanks for reporting!