消除云中点之间的间隙 - 当你靠近时让它们变大？

Question

当我从远处查看我的点云时，所有的点似乎都重叠，给人一种连续表面的印象，这就是我想要达到的效果。但是，当我离云越来越近时，您可以看到各个点正方形以及它们之间的间隙。我怎样才能摆脱这些差距？例如，随着相机变小，点的大小变大？

这是一个working example。如果按向上箭头放大，您最终会看到单个点，而不是连续的 "cloud"

顺便说一句 - 如果您需要更多上下文，这个问题有一个更详细的版本 here。

谢谢

尼尔

Answer 1

我在 the particle vertex shader for my Cubes 中已经这样做了，可能是以一种不必要的冗长方式。

// Compute pixel scale for points
vec4 testPosition = eyePosition;
testPosition.x = uPixelsPerClipUnit.x / uTileSize * 1.2/*appearance fudge factor*/;
testPosition.y = 0.0;
testPosition = uPMatrix * testPosition;
gl_PointSize = testPosition.x / testPosition.w * animationScale;

这些是您需要提供的变量（以 u 开头的变量，我曾作为制服使用）：

eyePosition 是眼中点的位置 space（即在应用投影矩阵之前，在 model/view matrix/matrices 被应用）。我们真正关心的唯一部分是 z 轴。
uPixelsPerClipUnit 是一个 vec2，它被设置为视口像素尺寸的一半——它只是从 −1 到 1 剪辑的转换因子 space 缩放到像素。
uTileSize 和 animationScale 只是我的游戏特定的参数，关于点应该有多大。他们不需要在两个不同的地方。
uPMatrix是投影矩阵。

我们实际上在这里做的是获得

的产品

eye-space-to-clip-space投影矩阵设置的比例，在点的z深度，
剪辑-space-像素比例

并使用它来设置磅值。

（我想提供一个独立的工作示例，但我不认为我会绕过它，所以你得到了片段和半生不熟的解释。）

消除云中点之间的间隙 - 当你靠近时让它们变大？

Remove gaps between points in cloud - make them bigger as you get closer?

javascript

glsl

webgl

three.js