7 ms·
Could you please share a screenshot so that I investigate what actually happens? I tested on a few different devices, but far from anything extensive.
by aplavin 2mo ago
Could you please share a screenshot so that I investigate what actually happens? I tested on a few different devices, but far from anything extensive.
- nnevatie 2mo agoThis is on Chrome/Win11: https://snipboard.io/W8SXYm.jpg https://snipboard.io/W8SXYm.jpg
- aplavin 2mo agoHmmm I think I see what's happening here. Basically, all devices I tested (laptops/phones/tablets) seem to have small pixel size, and to save on compute power for weaker devices I decided to render with half as many pixels as the screen has, letting the browser upscale the result. In your case, pixels are probably quite a bit larger, and half-res rendering has these prominent artifacts. Can you try if increasing "render scale" in params->display helps?
- nnevatie 2mo agoSetting render scale to 1 definitely helped - the aliasing from the lines is gone. The rest of the circular aliasing could likely be fixed by requesting MSAA, so e.g.: renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: 'high-performance', })
- aplavin 2mo agoWould MSAA compute more samples, effectively multiplying shader computation? Ideally, it should be something adaptive, to the number of pixels/device compute power, eg compute 2x smaller resolution on phones/retina, compute 1x resolution on larger-pixel screens, and maybe even 1x + MSAA beyond some pixel sizes... Just wanted to avoid reinventing these heuristics.