首页 > 代码库 > openGL点精灵PointSprite详解: 纹理映射,旋转,缩放,移动

openGL点精灵PointSprite详解: 纹理映射,旋转,缩放,移动

第一,什么是点精灵

openGL的图形由顶点构成,以后利用顶点进行纹理的映射。点精灵就是,一个顶点被当作一个精灵来处理。特别之处就是,一个顶点也可进行纹理贴出。例如,原来是个顶点构成的一个矩形,现在一个顶点就可以完成了。瞬间我们就可以想想,粒子效果,那些云雾水流火花什么的用了点精灵,就可以瞬间减少3个顶点的计算,glDrawArrays使用GL_POINT就可以了,完全也不需要什么顶点索引了。这是非常诱人的效率。


第二,点精灵的局限

一个顶点缩放都必须是矩形。并且大小的最大最小值是有范围的,每个openGL的实现不一样需要查询获得。既然是一个纹理映射到一个顶点上,那么纹理映射就和原来完全不同,有些复杂。可能会抵消掉一些性能的优势。


第三,点精灵的使用

首先绘制的时候使用GL_POINT类型,那么在顶点着色器中就会有一个内置的只读变量可以使用,叫做gl_PointSize。这个值控制了点精灵顶点的大小,是像素数值。这个数值的范围使用如下查询:

glGetFloatv(GL_ALIASED_POINT_SIZE_RANGE, glInfo.pointSizeRange);
 
logD("GL_ALIASED_POINT_SIZE_RANGE[%f, %f]", glInfo.pointSizeRange[0], glInfo.pointSizeRange[1]);

经过测试我发现不同的机器这个数值却别很大,有的机器有500多像素,有的只有1个像素,这确实是个问题。

接下来就是如何在这个顶点上映射纹理了。在片段着色器中仍然有一个内置的只读变量叫做gl_PointCoord。这个值是已经插值计算后的纹理坐标。就是纹理上每个像素点的xy坐标。所以这个变量是一个vec2类型的。


特别需要说明的是,纹理映射的坐标是bottom left为00点,这里是top left为00点。那么片段着色器看起来就是这样的。

gl_FragColor = texture2D(uSampler2D,gl_PointCoord);

这里以前texture2D采样的是,我们计算出来的UV值,现在这个值是默认提供的,从左上角开始的坐标。片段着色器在每个像素上执行,就会把一个默认的纹理绘制到顶点上。



第四,如何旋转,缩放,移动纹理

这里能明显感到一个问题,就是以前纹理映射到顶点上,对顶点进行矩阵运算就可以一起变化映射好的纹理了。可是现在压根就只有一个顶点,一个默认的纹理坐标如何完成操作呢。

有一点需要有一个清晰的概念。以前顶点和纹理是映射的,我们对顶点的矩阵操作就是对纹理的变换。现在需要区分开,矩阵对顶点的变换依然有效,可是对纹理没有任何作用。所以,我们需要单独对纹理进行操作,也就是对纹理坐标的变换。



方法有2种:

1,我们直接对gl_PointCoord直接操作。 这个值是一个区间在[0,1]之间的数值,代表了纹理坐标,从左上点开始。我们可以尝试的这样:

gl_FragColor = texture2D(uSampler2D, gl_PointCoord + vec2(0.5));
gl_FragColor = texture2D(uSampler2D, gl_PointCoord - vec2(0.5));

尝试一下就会发现最终点精灵上的纹理发生了偏移。但我们要把偏移,旋转,用这个坐标计算是非常麻烦的也不是不可能。但是复杂的算法放到片段着色器上,每个像素点上都运行是不明智的。


2,既然矩阵可以把各种变化一次性施加到顶点上,那么我们同样可以用矩阵来变换gl_PointCoord的坐标。这样我们可以把纹理上的像素坐标看作是顶点,顺其自然的用矩阵来变换这些顶点。只不过这些纹理顶点只有xy2个坐标,而通常我们计算顶点的矩阵是xyzw坐标。

再一次强调,纹理gl_PointCoord坐标是从top left 为00点开始。但是我们的矩阵是用00点做中心点的。这就出现一个情况,纹理矩形的几何中心点没有和矩阵的中心点重合。为了正确旋转,我们需要把纹理矩形的中心点移动到矩阵的中心点。类似如下操作

varying mat4 vTextureMat;
void main()                                          
{                               
  gl_FragColor = texture2D(uSampler2D, 
  (vTextureMat * vec4(gl_PointCoord - vec2(0.5), 0.0, 1.0)).xy + vec2(0.5));
}



这是一个片段着色器脚本。我们可以当看到,vec4构造器把纹理坐标转换到mat4可以操作的大小。gl_PointCoord – vec2(0.5)就是把纹理矩形移动到矩阵的中心点。在做矩阵操作,以后在移动回去 + vec2(0.5), 偏移0.5是为了正确使用矩阵运算。纹理坐标必须在[0,1]之间才有像素值,否则是没有像素数据的。

如此这样,我们看到了只要我们正确给出mat4 vTextureMat就能得到我们想要的一切。这个矩阵从哪里来,直接uniform传过来,或是顶点着色器varying过来都是可以的。

就像变换顶点一样,我们可以在客户端计算正确的mat4以后当纹理坐标移动,旋转,缩放。记住,这个mat4应该是和顶点变换的mvpMatrix是2个不同的矩阵。一个是为了变换顶点,一个是为了变换纹理坐标。顶点矩阵是model view projection的合体。 纹理坐标可以没有那么麻烦一个model就可以了。可以在顶点着色器计算这个矩阵,也可以在客户端算好传过来。



第五,如何在一个大图上进行UV操作,让顶点纹理是大纹理的一个部分,这样就可以BatchDraw操作了。

在顶点图形UV映射的时候,我们常常会把UV映射到大纹理上面的区域,这样我们就能搞在一个绘制中,绘制多个不同的图形了。点精灵这里只有一个顶点进行UV操作貌似没有门路。这就是问题的所在。

经过我的研究经过测试,进行UV是可以的,依然是利用矩阵来进行变换。前提是,要首先理解gl_PointCoord真正的意义所在。texture2D对顶点纹理采样的时候,是00点到11点区域进行像素处理。gl_PointCoord的范围也是[0,1]之间。那如果采样的时候,我对gl_PointCoord * vec2(0.5)进行计算会如何呢。这样就把纹理坐标映射到了[0, 0.5]之间。原来每个gl_PointCoord坐标都乘以了0.5 结果就是纹理被放大了。同理,gl_PointCoord * vec2(2.0)就会缩小纹理。

进行UV基本思路就是,把大纹理上的需要的小纹理的区域中心点,通过矩阵移动到点精灵的中心点,以后在放大区域的倍数。就会得到设置gl_PointSize大小的区域纹理,当然我们会把gl_PointSize设置的和区域纹理一样大小。这样UV的操作其实变成了矩阵的变换计算,移动,缩放就可以完成UV了。

这样做的话,UV操作用掉了矩阵缩放,点精灵的自己的缩放就要通过gl_PointSize来设置大小。还有一个问题,就是在一次性进行多个点精灵绘制的时候。针对每个点精灵都会有自己的UV坐标点,那么纹理旋转矩阵开如何是好呢,难道每个点精灵上传一个mat4矩阵么,这样的数据量太大虽然可行。我们其实还有一个选择在顶点着色器进行自己运算。

因为每个点精灵只有一个顶点,顶点着色器脚本智慧运行一次,所以在这里进行矩阵运算不会重复执行。那么旋转,缩放,平移,可能都需要去写着色器函数去实现。其实就是把cpu的计算移到显卡,我觉得速度应该更快。

最后, 点精灵有自己的局限也有效率上的优势,在研究过程中我发现点精灵可以完成square图形所有的操作。只是着色器会写的复杂一些。其中的取舍,使用的必要性,需要具体的情况去考量。