我在空间中有一系列 ThreeJS 点,以及一个改变每个点不透明度的顶点着色器。完整的结果可以在这里看到:
https://point-globe.netlify.app/
这在更大的屏幕上更容易看到,但每个白点都是一个面向摄像机的圆盘。我希望圆盘都面向球体的中心 (0, 0, 0)。
在 ThreeJS 中,对象有一个 lookAt() 方法,它旋转对象使其面向空间中的一个点。如何使用着色器完成同样的事情?
这些是应用于上述示例的两个着色器:
export const vertexShader = `
attribute float alpha;
varying float vAlpha;
void main() {
vAlpha = alpha;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = 4;
gl_Position = projectionMatrix * mvPosition;
}
`;
export const fragmentShader = `
uniform vec3 color;
varying float vAlpha;
void main() {
float r = 0.0;
vec2 cxy = 2.0 * gl_PointCoord - 1.0;
r = dot(cxy, cxy);
if (r > 1.0) {
discard;
}
gl_FragColor = vec4( color, vAlpha );
}
`;