gl_PointSize到屏幕坐标 [英] gl_PointSize to screen coordinates

问题描述

当我以与在顶点着色器中相同的方式计算gl_PointSize时，我得到一个以像素为单位"的值(根据

When I calculate the gl_PointSize the same way I do it in the vertex shader I get a value "in pixels" (according to http://www.opengl.org/sdk/docs/manglsl/xhtml/gl_PointSize.xml). Yet this value doesn't match the measured width and height of the point on the screen. The difference between the calculated and measured size is no constant it seems.

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

Calculated values range from 1 (very far away) to 4 (very near)

当前代码(带有three.js，但没有魔术)，试图计算屏幕上一个点的大小:

Current code (with three.js, but nothing magic), trying to calculate the size of a point on screen:

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);

让我澄清一下: 目的是获得一个点的屏幕大小，以像素为单位.

Let me clarify: The goal is to get the screen size of a point, in pixels.

我的顶点着色器:

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

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

gl_Position = projectionMatrix * mvPosition;

推荐答案

由于在GLSL中矩阵是列主的，而在three.js行中，我需要转置矩阵以具有正确的矩阵乘法:

Since in GLSL matrices are column-major and in three.js row-major I needed to transpose the matrices in order to have the correct matrix multiplications:

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

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

Further there's awlays an offset of 20px to the actual screen position. I haven't figured out why yet, but I had to do:

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

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

Thirdly we'll have to take browser zoom into account. For width and height we probably have to somehow work with renderer.devicePixelRatio. I hope to figure out how soon enough, and I'll post it here.

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

Thanks for the help nonetheless. Glad it's solved.

这篇关于gl_PointSize到屏幕坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！