在 ThreeJS 中,如何旋转顶点着色器以“看”一个点?

时间:2021-07-12 04:23:35

标签: three.js fragment-shader vertex-shader

我在空间中有一系列 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 );
  }
`;

0 个答案:

没有答案