放大时增加点长答案

【问题标题】：Increase point length when zoom in放大时增加点长
【发布时间】：2021-08-05 03:51:35
【问题描述】：

我为 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;
        }
    `
})

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

当前不受欢迎的缩放行为：

【问题讨论】：

this post 中的答案不考虑缩放，只考虑旋转。
你的意思是你想在相机放大时增加点的大小？你的意思是你只需要标准的基于距离的缩放，因为它可以追溯到更远的地方？喜欢in this example？
@Marquizzo 也不尊重缩放，使用与PointsMaterial 相同的顶点着色器（顶部带有#define USE_SIZEATTENUATION）不尊重缩放。

标签： javascript three.js glsl shader

【解决方案1】：

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

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

float depth = -mvPosition.z;

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

gl_PointSize = size / depth;

【讨论】：

相机为透视相机。我会检查这是否有效。
它不工作，同样的行为。根据我对 GLSL 的了解，当您更改相机位置时它会起作用，但变焦不会改变相机位置，只会改变 FOV（至少在我的项目中）。
哦！我明白你的意思了。您的意思是您正在更改 camera.zoom 参数。您在这里有 2 个选项：您可以改为更改视野角度.fov，然后每次更改updateProjectionMatrix()。缩放 2 与划分 fov/2 相同。或者，您可以使用 zoom 属性在着色器代码中创建一个新的 uniform，并使用它来影响您的点大小。
Marquizzo 感谢您的帮助！关于camera.fov，我已经在用了。

【解决方案2】：

哦，我找到了答案！

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

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

【讨论】：