放大时增加点长

Question

我为 three.js 编写了一个自定义着色器，所以这些点是四舍五入的。着色器如下：

new ShaderMaterial({
    transparent: true,
    depthWrite: false,
    uniforms: {
        size: { value: pointSize * canvasSize * 0.5 },
        color: { value: [...color, opacity ?? 1] },
    },
    vertexShader: `
        uniform float size;

        void main() {
            gl_PointSize = size;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform vec4 color;

            void main() {
            if (length(gl_PointCoord - vec2(0.5)) > 0.5) discard;

            gl_FragColor = color;
        }
    `
})

但我还需要在相机放大时增加点大小。我该怎么做？

当前不希望出现的缩放行为：

Answer 1

要得到每个点离相机有多远，可以通过乘以原始position * modelViewMatrix得到模型-视图-位置。然后使用该结果的 .z 分量来获取它到相机的距离：

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

float depth = -mvPosition.z;

我不确定您要做什么，但从您发布的 GIF 来看，您似乎使用的是正交相机，它没有透视缩放，也就是尺寸衰减。如果你想强制它，你必须手动更改点大小

gl_PointSize = size / depth;

Answer 2

哦，我找到答案了！

根据 this 的 FOV 是 projectionMatrix[0][0]，因此将点大小更改为以下解决了我的问题：

gl_PointSize = size * projectionMatrix[0][0];

放大时增加点长

Increase point length when zoom in

javascript

shader

glsl

three.js