Showing Point Cloud Structure using Lighting in Three.js

问题

I am generating a point cloud representing a rock using Three.js, but am facing a problem with visualizing its structure clearly. In the second screenshot below I would like to be able to denote the topography of the rock, like the corner (shown better in the third screenshot) of the structure, in a more explicit way, as I want to be able to maneuver around the rock and select different points. I have rocks that are more sparse (harder to see structure as points very far away) and more dense (harder to see structure from afar because points all mashed together, like first screenshot but even when closer to the rock), and finding a generalized way to approach this problem has been difficult.

I posted about this problem before here, thinking that representing the ‘depth’ of the rock into the screen would suffice, but after attempting the proposed solution I still could not find a nice way to represent the topography better. Is there a way to add a source of light that my shaders can pick up on? I want to see whether I can represent the colors differently based on their orientation to the source. Using a different software, a friend was able to produce the below image - is there a way to simulate this in Three.js?

For context, I am using Points with a BufferGeometry and ShaderMaterial. Below is the shader code I currently have:

Vertex:
    precision mediump float;
    varying vec3 vColor;
    attribute float alpha;
    varying float vAlpha;
    uniform float scale;

    void main() {
        vAlpha = alpha;
        vColor = color;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

        #ifdef USE_SIZEATTENUATION
          //bool isPerspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 );
          //if ( isPerspective ) gl_PointSize *= ( scale / -mvPosition.z );
        #endif
        gl_PointSize = 2.0;

        gl_Position = projectionMatrix * mvPosition;
    }

Fragment:
    #ifdef GL_OES_standard_derivatives
    #extension GL_OES_standard_derivatives : enable
    #endif
    precision mediump float;
    varying vec3 vColor;
    varying float vAlpha;
    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 r = 0.0, delta = 0.0, alpha = 1.0;
        vec2 cxy = 2.0 * gl_PointCoord.xy - 1.0;
        r = dot(cxy, cxy);

        float lineardepth = LinearizeDepth(gl_FragCoord.z, u_depthRange[0], u_depthRange[1]);

        if (r > 1.0) {
            discard;
        }

        // Reseted back to 1.0 instead of using lineardepth method above
        gl_FragColor = vec4(vColor, 1.0);

    }

Thank you so much for your help!

来源：https://stackoverflow.com/questions/59952998/showing-point-cloud-structure-using-lighting-in-three-js

标签

three.js

glsl

shader

point-clouds

lighting