Отображение структуры облака точек с использованием освещения в три. js - PullRequest
2 голосов
/ 28 января 2020

Я создаю облако точек, представляющее камень, используя Three. js, но столкнулся с проблемой четкой визуализации его структуры. На втором скриншоте ниже я хотел бы иметь возможность обозначить топографию скалы, например, угол (лучше показан на третьем скриншоте) структуры, более четко, так как я хочу иметь возможность маневрировать вокруг качать и выбирать разные точки. У меня есть камни, которые являются более разреженными (труднее увидеть структуру в виде точек очень далеко) и более плотными (труднее увидеть структуру издалека, потому что точки все сшиты вместе, как на первом снимке экрана, но даже ближе к скале), и нахожу обобщенный Способ решения этой проблемы был трудным.

enter image description here

Я писал об этой проблеме раньше, чем здесь , думая, что это означает «глубину». «скалы в экран было бы достаточно, но после попытки предложенного решения я все еще не мог найти хороший способ лучше представить топографию. Есть ли способ добавить источник света, который мои шейдеры могут подхватить? Я хочу посмотреть, могу ли я по-разному представлять цвета в зависимости от их ориентации на источник. Используя другое программное обеспечение, друг смог получить изображение ниже - есть ли способ смоделировать это в Три. js?

enter image description here

Для контекста я использую точки с BufferGeometry и ShaderMaterial. Ниже приведен код шейдера, который у меня есть:

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);

    }

Большое спасибо за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...