在Three.js点云中显示深度

问题描述

我对岩石进行了3D扫描，并使用Three.js将其表示为点云，我想更明确地显示岩石的特征，也许使用照明来显示Three的深度.从顶部查看岩石，我看到以下内容:从侧面观察时，您会看到一些刚性特征，我想更仔细地展示它们:

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:

我不确定该如何处理，希望在此可视化中显示这些岩石特征方面有所帮助.对于上下文，这是我当前的着色器设置:

I am unsure in how to approach this, and was hoping for some help in showing these rock features within this visualization. For context, this is my current shader setup:

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材质.

I am creating my point cloud using THREE.Points, with a BufferGeometry geometry and ShaderMaterial material.

是否有办法更明确地显示我的点云深度?

Is there a way to go about this more explicitly showing my point cloud depths?

谢谢！

推荐答案

当前片段的深度存储在.z组件中. -Refpages/es3.0/html/gl_FragCoord.xhtml"rel =" nofollow noreferrer> gl_FragCoord .深度存储在[0.0，1.0]范围内(除非该范围由 glDepthRangef ):

The depth of the current fragment is stored in the .z component of gl_FragCoord. The depth is stored in range [0.0, 1.0] (except this range is changed by glDepthRangef):

利用这些信息，您可以通过降低其不透明度来设置该点的Alpha通道深度:

With that information you can set the alpha channel of the point, with decreasing opacity, by its depth:

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

由于透视投影处的深度不是线性的(请参见如何在片段着色器中使用gl_FragCoord.z在现代OpenGL中线性渲染深度?)，最好将rage [0.0，1.0]的值线性表示近点和远点之间的深度飞机.
在下面的示例中，可以通过功能LinearizeDepth完成此操作:

Since the depth at perspective projection is not linear (see How to render depth linearly in modern OpenGL with gl_FragCoord.z in fragment shader?), it would be nice to have a value in rage [0.0, 1.0], which linearly represents the depth of the point between the near and the far plane.
THis can be done by the function LinearizeDepth in the following example:

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组件中的远平面:

To make the example tun, the depth range has to be set to the uniform u_depthRange. The near plane of the PerspectiveCamera is stored in the .x component and the far plane in .y component:

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,
      // [...]
});

请注意，为获得良好"效果，相机的近平面和远平面必须尽可能靠近几何体！

Note, for a "good" effect, the near and the far plane of the camera, have to be as close to the geometry as possible!

这篇关于在Three.js点云中显示深度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！