路径动画——牛郎织女鹊桥会

题目：给出鹊桥（路径）；牛郎织女分别在桥两头走到一起。可以是图形方式，也可以是图像方式

效果

image.png

一、输入图片

绘制出路径动画，依然从简单的做起。先把静态的绘制出来：包括牛郎、织女、鹊桥、背景，此外可自主添加素材。
于是我们第一步便是将这个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坐标系是以中心为原点

xyz示意

而uv坐标系是以左下角为原点

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);

看起来和实验一差别不大，同样会有让人抓狂的地方