javascript - THREE.js - 广告牌顶点着色器

Question

我需要将 THREE.Mesh 的实例定位为始终面向相机。我知道我可以只使用 [THREE.Mesh].lookAt() 方法，但我正在尝试更多地处理我的 GLSL 印章，并希望能够在顶点着色器中执行此操作。

我已通读 NeHe's Billboarding tutorial ，这对我来说很有意义。好吧，除了将这些方向向量应用于每个顶点的那一点。

我觉得我已经非常接近这个工作了，但就目前而言，我的顶点着色器看起来更像是 90 年代狂欢视频而不是广告牌:

到目前为止的进展:http://jsfiddle.net/RZ4XE/2/

下面是我的顶点着色器(片段着色器只是分配了一个 vec4 颜色)。它利用了 THREE.js 提供的各种默认制服/属性，在下面列出以防不熟悉 THREE.js 的人正在阅读本文:)

• cameraPosition (vec3),
• position(顶点位置，另一个vec3)，
• projectionMatrix(相机的projectionMatrix，mat4)，

• modelViewMatrix (camera.matrixWorldInverse * object.matrixWorld, mat4)

  void main() {
  
      vec3 look = normalize( cameraPosition - position );
  
      if( length( look ) == 0.0 ) {
          look.z = 1.0;
      }
  
      vec3 up = vec3( 0.0, 1.0, 0.0 );
      vec3 right = normalize( cross( up, look ) );
      up = normalize( cross( look, right ) );
  
  
      mat4 transformMatrix;
  
      transformMatrix[0][0] = right.x;
      transformMatrix[0][1] = right.y;
      transformMatrix[0][2] = right.z;
  
      transformMatrix[1][0] = up.x;
      transformMatrix[1][1] = up.y;
      transformMatrix[1][2] = up.z;
  
      transformMatrix[2][0] = look.x;
      transformMatrix[2][1] = look.y;
      transformMatrix[2][2] = look.z;
  
      gl_Position = projectionMatrix * modelViewMatrix * transformMatrix * vec4( position, 1.0 );
  }
  

提前致谢。

Answer 1

显然这是可行的:

gl_Position = projectionMatrix * (modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0) + vec4(position.x, position.y, 0.0, 0.0));

我实际上是在想办法制作轴对齐的广告牌。