You can see in apple m2 safari looks fine, and on apple m2 chrome the sprites are so small.
Any idea what is causing this inconsistent rendering?
You can see in apple m2 safari looks fine, and on apple m2 chrome the sprites are so small.
Any idea what is causing this inconsistent rendering?
I am using THREE.PointsMaterial for the sprites,
You can see the three.js examples scale is slightly different also between safari and chrome on mac m2
Various graphics drivers/platforms handle the sizing of point sprites differently.
Some platforms clamp the max size of the “points” primitives, to help reduce overdraw in texture bandwidth limited devices.
You can switch to using mesh+plane geometry if you want it to be consistent across all platforms, but you’ll have to orient them yourself by doing something like…
mesh.onBeforeRender = function(){
this.quaternion.copy(camera.quaternion)
}
edit: Had a brain freeze… as @PavelBoytchev mentioned… use THREE.Sprite instead.
I’m using a M2 Pro, macMini, macOS 13.5.2. Latest Chrome and Safari render the sprites in the same way. So I can’t reproduce the results of your second screenshot on my system.
What OS version and white kind if device are you using?
@FuzzyWobble: Does this page show the same values with Safari and Chrome:
If the issue is with the point size, look at block “Rasterizer” → “Aliased Point Size Range”.
See the arrows:
I think this answers your question. The left image is for a system that can draw ‘points’ up to 64 pixels big. The right image is of a system that can draw almost 10 times larger points (up to 511 pixels).
My suggestion is not to use Points
and PointsMaterial
, but Sprite
and SpriteMaterial
. They should have no such limitation.