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

Question

我需要定位一个THREE.Mesh实例，使其始终面向相机。我知道可以使用[THREE.Mesh].lookAt()方法，但我想更多地学习GLSL，希望能够在顶点着色器中完成。

我已经阅读了NeHe的广告牌教程，这让我感觉很有道理。除了将这些方向向量应用于每个顶点的部分之外。

我觉得我离让它工作很近了，但是目前为止，我的顶点着色器看起来更像90年代的狂欢视频而不是广告牌：

进展到现在的fiddle：http://jsfiddle.net/RZ4XE/2/ 以下是我的顶点着色器（片段着色器只分配一个vec4颜色）。它使用了THREE.js提供的各种默认uniforms/attributes，下面列出了这些内容，以防有人不熟悉THREE.js。 :)

• cameraPosition (vec3),
• position (vertex position, another vec3),
• projectionMatrix (camera's 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 );
  }
  

提前感谢。

- SquareFeet

---

只需执行以下代码：mesh.quaternion = camera.quaternion;，并使用任何three.js材质（http://jsfiddle.net/RZ4XE/3/）... 或者使用THREE.Sprite。 - WestLangley

谢谢 - 这确实解决了问题，但它并没有帮助我在掌握GLSL和完全理解矩阵变换的道路上。 - SquareFeet

是的，我知道...只是向您展示如何让three.js为您完成工作。 :-) - WestLangley

是的，我很感激 :) - SquareFeet

Answer 1

显然这个有效：

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

我实际上正在尝试弄清如何制作轴向对齐的广告牌。

- Kyle Paulsen