threejs 精灵(Sprite)的实现

Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画。在threejs中，可以使用Sprite加载图像纹理，当然也包括用canvas创建的纹理，因此，canvas能创建什么图像，Sprite就能创建什么形状。精灵的最大用途就是,它可以用一张纹理或一个面来表示三维场景中的一个物体,而且这个面始终对着相机,通过这个特效,我们在游戏中进行绘制草,树等一些固定不变的内容就可以采用精灵,需要要太多的顶点来完成.
今天研究了一天threejs 是如何实现让纹理始终对着相机,个人学习的知识结构和理解是需要通过相机的lookAt方向,设置物体的法向量与这个方向相同,每次变化物体,重新计算,而threejs不是这样实现的,很讨巧,它是在shader中,物体的模型矩阵和视图矩阵都不改变顶点的x,y坐标,只改变z坐标,具体实现可以按下面的代码:

precision highp float;
#define SHADER_NAME SpriteMaterial
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float rotation;
uniform vec2 center;
uniform vec2 scale;
uniform vec2 uvOffset;
uniform vec2 uvScale;
attribute vec2 position;
attribute vec2 uv;
varying vec2 vUV;
varying float fogDepth;
void main() {
    vUV = uvOffset + uv * uvScale;
    vec2 alignedPosition = ( position - center ) * scale;
    vec2 rotatedPosition;
    //绕精灵的中心旋转,精灵的中心默认(0,0) 
    rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
    rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
    vec4 mvPosition;
   //物体的模型矩阵和视图矩阵都不改变顶点的x,y坐标,顶点是vec4(0.0, 0.0, 0.0 ,1.0) 
    mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
    mvPosition.xy += rotatedPosition;
    gl_Position = projectionMatrix * mvPosition;
    fogDepth = - mvPosition.z;
}