gl_PointSize 到屏幕坐标答案

【问题标题】：gl_PointSize to screen coordinatesgl_PointSize 到屏幕坐标
【发布时间】：2013-12-19 12:41:24
【问题描述】：

当我以与在顶点着色器中相同的方式计算 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;

【问题讨论】：

好的，既然这里有无数个变量，我真的不知道你想给gl_PointSize分配什么值。您能给我一些关于您将使用此代码计算的值范围的线索吗？请记住，OpenGL 实现只需要支持 1.0 - 1.0 的范围（是的，可悲的是，这不是开玩笑）。你可以通过调用glGetIntegerv (GL_POINT_SIZE_RANGE, ...) 来查询你的实现支持的范围，当然我不能开始告诉你如何在 Three.js 中做到这一点。一个好的经验法则是，由于 NV 和 AMD 卡最多只支持 64...
您可能不应该期望嵌入式实现支持任何大于 64 的值 =P 通常您会查询该值而不是按照这种愚蠢的经验法则，但我不知道如何从 Three.js 获取该信息。
nm，我看到你已经这样做了。我认为您的问题文本中的这些数字是测量尺寸，但这些是实际计算的尺寸。不过，我会考虑查看您的实现对最大点大小的限制。它可能会将您的范围限制在 1.0。
感谢您的帮助。 webglreport.com“别名点大小范围：[1, 256]”。夹紧不是问题。问题是我从来没有收到一个点的实际屏幕尺寸。这些点的大小不是 1 到 3 像素，而是 10 到 60 像素。所以现在我不确定如何计算实际的屏幕尺寸。
屏幕尺寸和计算尺寸之间的系数是 69 计算尺寸 4 和测量尺寸 276 和 12 计算尺寸 1.386 和测量尺寸 17

标签： opengl-es three.js webgl

【解决方案1】：

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

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

此外，实际屏幕位置还有 20 像素的偏移量。我还没弄清楚为什么，但我不得不这样做：

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

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

仍然感谢您的帮助。很高兴解决了。

【讨论】：