[Bug] When WebGL mode is enabled, the zooming behavior of ZUI causes Path to lose its sharp appearance.

[Coooookies]

Two.JS is NICE, and I've been using it recently to develop a drawing tool.

Describe the bug
When WebGL mode is enabled, the zooming behavior of ZUI affects the appearance of Path. Specifically, the precision of Path created at the smallest zoom level differs from those created at the largest zoom level.
This issue does not occur in Canvas or SVG modes

Screenshots
First line: Path created at the smallest zoom level
Second line: Path created at the largest zoom level


Environment (please select one):

• Code executes in browser (e.g: using script tag to load library)
• Packaged software (e.g: ES6 imports, react, angular, vue.js)
• Running headless (usually Node.js)

Desktop (please complete the following information):

• OS: Windows
• Browser: Google Chrome
• Version 131.0.0.0

Additional context
The Zoom & Pan UI example exhibits a similar issue.
When WebGL is enabled and the zoom level is at its highest, the shapes no longer have sharp edges.

Official example
Official example in WebGL mode

[jonobr1]

Thanks for the kind words. I'll get to this on Monday.

[jonobr1]

This is a limitation of the WebGLRenderer at the moment. The precision error is due to the way rendering works. This is how it works:

When you create a path, the renderer generates a texture of the bitmap and uploads it to draw on the GPU via WebGL.
So, instead of redrawing the entire path every frame it draws a cached texture. This can be helpful for performance, but is potentially too low resolution if you zoom in or out.

To circumvent this you can request the renderer to update the texture whenever you change the zoom. Adding this line will match the precision of the rendering with the scale in your WebGL mode example:

L75: stage._flagOpacity = true;

You'll notice this can have performance impact because we're re-rendering each shape as a texture and uploading it to the GPU. In general, this is something I'm working towards fixing in the WebGPU Renderer tracked here. Hope this is helpful

[Coooookies]

This is a limitation of the WebGLRenderer at the moment. The precision error is due to the way rendering works. This is how it works:

When you create a path, the renderer generates a texture of the bitmap and uploads it to draw on the GPU via WebGL.
So, instead of redrawing the entire path every frame it draws a cached texture. This can be helpful for performance, but is potentially too low resolution if you zoom in or out.

To circumvent this you can request the renderer to update the texture whenever you change the zoom. Adding this line will match the precision of the rendering with the scale in your WebGL mode example:

L75: stage._flagOpacity = true;

You'll notice this can have performance impact because we're re-rendering each shape as a texture and uploading it to the GPU. In general, this is something I'm working towards fixing in the WebGPU Renderer tracked here. Hope this is helpful

Thanks for your help, I will give it a try.