在 Three.js 点云中显示深度

I have a 3D scan of a rock that I have represented as a point cloud using Three.js, and I wanted to more explicitly show the features of the rock, perhaps using lighting to show depths with Three. Viewing the rock from the top, I see this: When looking closely from the side, you can see rigid features that I would like to show more closely:

我不确定如何解决这个问题，并希望获得一些帮助来在此可视化中显示这些岩石特征。对于上下文，这是我当前的着色器设置：

vertexShader: `
    precision mediump float;
    varying vec3 vColor;
    attribute float alpha;
    varying float vAlpha;
    
    void main() {
        vAlpha = alpha;
        vColor = color;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

        gl_PointSize = 2.0;

        gl_Position = projectionMatrix * mvPosition;
    }
`

fragmentShader: `
    #ifdef GL_OES_standard_derivatives
    #extension GL_OES_standard_derivatives : enable
    #endif
    precision mediump float;
    varying vec3 vColor;
    varying float vAlpha;

    
    void main() {
        float r = 0.0, delta = 0.0, alpha = 1.0;
        vec2 cxy = 2.0 * gl_PointCoord.xy - 1.0;
        r = dot(cxy, cxy);

        //#ifdef GL_OES_standard_derivatives
        delta = fwidth(r);
        alpha = vAlpha - smoothstep(vAlpha - delta, vAlpha + delta, r);
        //#endif
        if (r > 1.0) {
            discard;
        }
        gl_FragColor = vec4(vColor, alpha);
    }
    //varying vec3 vColor;
    //varying float vAlpha;
    //void main() {
        //gl_FragColor = vec4( vColor, vAlpha );
    //}
`

我正在使用创建我的点云THREE.Points，有一个BufferGeometry几何和ShaderMaterial材料。

有没有办法更明确地显示我的点云深度？

谢谢你！

当前片段的深度存储在.z的组成部分gl_FragCoord。深度存储在范围 [0.0, 1.0] 中（除非该范围由glDepthRangef):

有了这些信息，您可以设置点的 Alpha 通道，并根据其深度降低不透明度：

float depth = gl_FragCoord.z;
gl_FragColor = vec4(vColor, 1.0 - depth);

由于深度为透视投影不是线性的（参见如何在现代 OpenGL 中使用片段着色器中的 gl_FragCoord.z 线性渲染深度？），最好有一个 rage [0.0, 1.0] 的值，它线性地表示近平面和远平面之间的点的深度。
这可以通过函数来​​完成LinearizeDepth在以下示例中：

uniform vec2 u_depthRange;

float LinearizeDepth(float depth, float near, float far)
{
  float z = depth * 2.0 - 1.0; // Back to NDC 
  return (2.0 * near * far / (far + near - z * (far - near)) - near) / (far-near);
}

void main()
{
    // [...]

   float lineardepth = LinearizeDepth(gl_FragCoord.z, u_depthRange[0], u_depthRange[1]);
   gl_FragColor = vec4(vColor, 1.0 - lineardepth);
}

为了使示例运行，深度范围必须设置为统一的u_depthRange。的近平面PerspectiveCamera存储在.x分量和远平面.y成分：

var near = 1, far = 10

camera = new THREE.PerspectiveCamera(fov, width / height, near, far);

var uniforms = {
      // [...]
      u_depthRange: {type: 'v2', value: {x:near, y: far}} 
};

var material = new THREE.ShaderMaterial({  
      uniforms: uniforms,
      // [...]
});

请注意，为了获得“良好”的效果，相机的近平面和远平面必须尽可能接近几何形状！