gl_PointSize changing with devicePixelRatio?

Question

I'm working on particles via threejs and i don't get the same result on different devices. On other screens the point size look smaller, same on my smartphone, in vertical orientation only. While i saw the issue in several different screens I only tested the following experiments with my laptop + smartphone.

Left : correct look with the actual code on certain screens & on my smartphone in horizontal orientation. Right : incorrect look with the actual code on other screens & my smartphone in vertical orientation.

I first thought it had something to do with window.devicePixelRatio but alert(window.devicePixelRatio) prints the same number (3) in my smartphone with both orientations, though the rendering is only correct in the horizontal one.

I further tried :

• renderer.setPixelRatio(window.devicePixelRatio) : renderings in both orientation show 3 times smaller sizes, and still different.

• passing window.devicePixelRatio to the vertex shader to write something like gl_PointSize*=devicePixelRatio, in addition to the previous idea, gets this size issue back at its initial state.

How can one make particles look the same on every screens ?

Whole code at http://codepen.io/Astrak/pen/BoBWPB

Answer 1

After resizing enough windows i understood gl_PointSize somehow represents an absolute size while in my example i want it to be proportional to window.innerHeight. I added this value in the shader : gl_PointSize*=innerHeight which solved the issue.