Opengl es gl_点大小到屏幕坐标

Opengl es gl_点大小到屏幕坐标,opengl-es,three.js,webgl,Opengl Es,Three.js,Webgl,当我计算gl_PointSize的方法与我在顶点着色器中的计算方法相同时,我得到一个“以像素为单位”的值(根据)。然而,该值与屏幕上测得的点的宽度和高度不匹配。 计算尺寸和测量尺寸之间的差异似乎不是常数 计算值范围从1(非常远)到4(非常近) 当前代码(使用three.js,但没有什么神奇之处),正在尝试计算屏幕上某个点的大小: var projector = new THREE.Projector(); var width = window.innerWidth, height = wind

当我计算gl_PointSize的方法与我在顶点着色器中的计算方法相同时,我得到一个“以像素为单位”的值(根据)。然而,该值与屏幕上测得的点的宽度和高度不匹配。 计算尺寸和测量尺寸之间的差异似乎不是常数

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

当前代码(使用three.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;

由于在GLSL中,矩阵是列主矩阵,在three.js row major中,我需要转置矩阵以获得正确的矩阵乘法:

var modelViewMatrix = camera.matrixWorldInverse.clone().transpose().multiply( matrixWorld).transpose();
此外,屏幕实际位置的偏移量为20px。我还没有弄明白原因,但我必须:

vector.x = ( vector.x * widthHalf ) + widthHalf - 20;
vector.y = - ( vector.y * heightHalf ) + heightHalf - 20;
第三,我们必须考虑浏览器缩放。对于宽度和高度,我们可能必须以某种方式使用渲染器.devicePixelRatio。我希望能尽快找到答案,我会把它贴在这里


谢谢你的帮助。很高兴它被解决了。

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