opengl-es - gl_PointSize 到屏幕坐标

Question

当我以与在顶点着色器中相同的方式计算 gl_PointSize 时，我得到一个“以像素为单位”的值(根据 http://www.opengl.org/sdk/docs/manglsl/xhtml/gl_PointSize.xml )。然而这个值与屏幕上点的测量宽度和高度不匹配。计算的尺寸和测量的尺寸之间的差异似乎并不是恒定的。

计算值范围从 1(非常远)到 4(非常近)

当前代码(使用三个.js，但没什么神奇的)，试图计算屏幕上一个点的大小:

var projector = new THREE.Projector();

var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;

var vector = new THREE.Vector3();
var projector = new THREE.Projector();
var matrixWorld = new THREE.Matrix4();

matrixWorld.setPosition(focusedArtCluster.object3D.localToWorld(position));

var modelViewMatrix = camera.matrixWorldInverse.clone().multiply( matrixWorld );

var mvPosition = (new THREE.Vector4( position.x, position.y,  position.z, 1.0 )).applyMatrix4(modelViewMatrix);

var gl_PointSize = zoomLevels.options.zoom * ( 180.0 / Math.sqrt( mvPosition.x * mvPosition.x + mvPosition.y * mvPosition.y + mvPosition.z * mvPosition.z ) );
projector.projectVector( vector.getPositionFromMatrix( matrixWorld ), camera );

vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = - ( vector.y * heightHalf ) + heightHalf;

console.log(vector.x, vector.y, gl_PointSize);

让我澄清一下:目标是获取某个点的屏幕大小(以像素为单位)。

我的顶点着色器:

vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

gl_PointSize = zoom * ( 180.0 / length( mvPosition.xyz ) );

gl_Position = projectionMatrix * mvPosition;

Answer 1

由于在 GLSL 中矩阵是列优先，而在 Three.js 中矩阵是行优先，因此我需要转置矩阵以获得正确的矩阵乘法:

var modelViewMatrix = camera.matrixWorldInverse.clone().transpose().multiply( matrixWorld).transpose();

此外，还有一个与实际屏幕位置 20px 的偏移量。我还没弄清楚为什么，但我必须这样做:

vector.x = ( vector.x * widthHalf ) + widthHalf - 20;
vector.y = - ( vector.y * heightHalf ) + heightHalf - 20;

第三，我们必须考虑浏览器缩放。对于宽度和高度，我们可能必须以某种方式使用 renderer.devicePixelRatio。我希望尽快弄清楚，然后我会将其发布在这里。

不过还是谢谢你的帮助。很高兴问题解决了。