Three.js: PointsMaterial size attenuation doesn't appear to consider FOV

Created on 7 Sep 2017  ·  3Comments  ·  Source: mrdoob/three.js

I'm using PerspectiveCamera and a model including some Points using a PointsMaterial. I'm using a customised version of OrbitControls.js to allow the viewing of a large and complex model. One of the changes is that zoom function changes the FOV of the camera instead of moving it closer. The camera moves to show a specfic part of the models. I've noticed that the PointsMaterial attenuation changes sizes when the camera moves closer to the model but not when the FOV is changed.

I assume the size algorithm uses distance to the camera but not FOV? I've never posted to this repo before so excuse me if I miss something. I tried to test with IE but cannot get it to load the page at the moment. Equally, not sure exactly which version of Three it is but within the last year.

Code that creates the PointsMaterial:

var texFlame = new THREE.TextureLoader().load("textures/flame.png");
mtlFlame = new THREE.PointsMaterial ({size: 2, sizeAttenuation: true, color: 0xffffff, transparent: true,  blending: THREE.AdditiveBlending, depthWrite: false, map: texFlame});

The code that changes FOV is similarly unexciting:

this.camera.fov = fov;
this.camera.updateProjectionMatrix ();
Three.js version
  • [ ] Dev
  • [ ] r87
  • [x] ...
Browser
  • [ ] All of them
  • [x] Chrome
  • [x] Firefox
  • [ ] Internet Explorer
OS
  • [ ] All of them
  • [x] Windows
  • [ ] macOS
  • [ ] Linux
  • [ ] Android
  • [ ] iOS
Hardware Requirements (graphics card, VR Device, ...)

Don't know if this is hardware specific but it seems unlikely. I'm using GeForce GTX950 in Windows 10.

Question
Source
picture orangebowlerhat

All 3 comments

PointsMaterial.size has units of pixels -- not world units. You will have to adjust the size yourself.

This related post may be informative: https://github.com/mrdoob/three.js/issues/10385#issuecomment-267789138.

Beware that gl_PointSize may be limited, so the size you request may not be the size you get.

WestLangley picture WestLangley on 7 Sep 2017
👍1

@WestLangley. So I need to change the size property of the PointsMaterial when I change the FOV?

I did find that post before asking but I don't quite follow why it works that way. I understand that size is in pixels but attenuation already makes it not relate to devices pixels and that process surely must relate to perspective which must relate to FOV in some sense?

However, that's just explaining my own lack of understanding. I'm perfectly happy with the solution you give. Thanks.

orangebowlerhat picture orangebowlerhat on 7 Sep 2017

I expect PointsMaterial.size will remain in units of pixels, so for reference, I'll post this work-around here.

Based on this stackoverflow answer, you can scale your points using the following pattern, which should work for reasonable values of camera.fov.

var defaultSize = 10;
points.material.size = defaultSize / Math.tan( ( Math.PI / 180 ) * camera.fov / 2 );
WestLangley picture WestLangley on 7 Sep 2017
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

akshaysrin picture akshaysrin  ·  3Comments
scrubs picture scrubs  ·  3Comments
seep picture seep  ·  3Comments
alexprut picture alexprut  ·  3Comments
danieljack picture danieljack  ·  3Comments