Отображение структуры облака точек с использованием освещения в три. js - PullRequest
0 голосов
/ 17 февраля 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, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...