Я создаю облако точек, представляющее камень, используя Three. js, но столкнулся с проблемой четкой визуализации его структуры. На втором скриншоте ниже я хотел бы иметь возможность обозначить топографию скалы, например, угол (лучше показан на третьем скриншоте) структуры, более четко, так как я хочу иметь возможность маневрировать вокруг качать и выбирать разные точки. У меня есть камни, которые являются более разреженными (труднее увидеть структуру в виде точек очень далеко) и более плотными (труднее увидеть структуру издалека, потому что точки все сшиты вместе, как на первом снимке экрана, но даже ближе к скале), и нахожу обобщенный Способ решения этой проблемы был трудным.
Я писал об этой проблеме раньше, чем здесь , думая, что это означает «глубину». «скалы в экран было бы достаточно, но после попытки предложенного решения я все еще не мог найти хороший способ лучше представить топографию. Есть ли способ добавить источник света, который мои шейдеры могут подхватить? Я хочу посмотреть, могу ли я по-разному представлять цвета в зависимости от их ориентации на источник. Используя другое программное обеспечение, друг смог получить изображение ниже - есть ли способ смоделировать это в Три. js?
Для контекста я использую точки с 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);
}
Большое спасибо за помощь!