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矩阵中是列主要的并且在三个.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 。我希望能够多快弄清楚，我会在这里发布它。

尽管如此，感谢您的帮助。很高兴它解决了。

gl_PointSize到屏幕坐标

1 个答案: