Hacker News Reader

Comment by nnevatie | Hacker News Reader

The lines in the demo look upscaled and aliased for some reason.

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.

This is on Chrome/Win11:

https://snipboard.io/W8SXYm.jpg

Hmmm 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?

Setting 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', })

Would 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.

Reply on news.ycombinator.com