路径动画--牛郎织女鹊桥相会
题目：给出鹊桥（路径）；牛郎织女分别在桥两头走到一起。可以是图形方式，也可以是图像方式
效果
一、输入图片
绘制出路径动画，依然从简单的做起。先把静态的绘制出来：包括牛郎、织女、鹊桥、背景，此外可自主添加素材。
于是我们第一步便是将这个4张图片传入CPU，根据上一个实验，已经实现了一张图片灌进CPU，那么接下来的便可以如法炮制。
注意下面这部分，这是一张贴图没有传递参数的原因
你可能会奇怪为什么sampler2D变量是个uniform，我们却不用glUniform给它赋值。使用glUniform1i，我们可以给纹理采样器分配一个位置值，这样的话我们能够在一个片段着色器中设置多个纹理。一个纹理的位置值通常称为一个纹理单元(Texture Unit)。一个纹理的默认纹理单元是0，它是默认的激活纹理单元，所以教程前面部分我们没有分配一个位置值。
依照教程的方法
//激活纹理单元
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);
//fragmentshader内部
uniform sampler2D texture1;
uniform sampler2D texture2;
void main()
{
FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);
}
法一
观察以上代码可知：多个纹理单元应用在于一张图的的多重效果，如例子中的mix效果。这个效果类似PS中图层混合。
而我们需要的是完全覆盖的效果，那么只能设想一个条件语句：
if（x）do (FragColor =ImageA)
if（y）do (FragColor =ImageB)
此时出现了问题，条件如何判定？
- 只能是在人物和背景都出现的位置，绘制人物
- 只出现背景，绘制背景
判断每一个像素后，在决定绘制什么
技术有限，还未想到如何实现，故抛弃。可以预见，此法只需一次glDrawArrays函数
法二
不用纹理单元。glDrawArrays绘制多次
glBindTexture();
glDrawArrays();
此为一组绘制一张贴图，后绘制的会覆盖先前绘制的。
所以的传输图片数据、bindTexture都是一样的。
二、VAO、VBO设置
我们需要VBO来获取贴图绘制到视窗的位置(xyz)以及截取自贴图的位置(uv)，同时需要设置VAO来决定从VBO取值的规则。
我们当然可以为每一张贴图建立单独对应的VAO和VBO，我原本本便是这么想的。
通过设定z轴的不同来决定贴图的先后位置，而非改变绘制的顺序决定前后关系。但最终失败了，不知是何原因。
那么只建一个VAO和一个VBO就好了，因为最终呈现在一个平面上，那么所有的xyz都确定成一样，uv值也选择整张图片。
float vertices[] =
{
-1.0f,-1.0f,0, 0.0f,0.0f,
-1.0f,1.0f,0, 0.0f,1.0f,
1.0f,1.0f,0, 1.0f,1.0f,
1.0f,-1.0f,0, 1.0f,0.0f
};
glBindVertexArray(VAO[0]);
glBindBuffer(GL_ARRAY_BUFFER, VBO[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(0 * sizeof(float)));
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
值得一提的是标准化设备坐标(Normalized Device Coordinates, NDC)(xyz)和纹理坐标(uv)的差异。
xyz坐标系是以中心为原点
而uv坐标系是以左下角为原点
关于透明度
由于选择覆盖的方式绘制，那么我们不得不考虑一张人物的贴图的边界问题。
其实我们存在两种选择:
- xyz坐标确定人物形状边界，uv贴图只作为纹理填充。
- xyz坐标中为规则形状，uv贴图即人物图。
选择法一存在以下问题：
- 人物形状难以用顶点确定。
- 不利于实验三人物变形
所以选择法2。那么问题又来了，规则边界和人物的差集部分需要用透明，否则会覆盖底层图片。所以我们需要将素材不需要的部分扣成透明，这一步需要在PS中操作。（牛郎）
需要注意的，只有png格式存在透明区域，若转成jpg格式，透明区域将会变化成白色或黑色。
同时，传输图片数据的代码也要少许修改。
stbi_set_flip_vertically_on_load(true); // 为防止图像颠倒，在图像加载时翻转y轴
data = stbi_load("background.png", &width, &height, &nrChannel, 0);
if (data)
{
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);//第3、7个参数均要把alpha透明通道加上
glGenerateMipmap(GL_TEXTURE_2D);
}
else
{
cout << "load image failed." << endl;
};
stbi_image_free(data);
还要添加透明区域的函数
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
看起来和实验一差别不大，同样会有让人抓狂的地方