简介

旗帜特效是一张图实时波动，像旗帜飘扬一样，截图如下所示：

旗帜效果

3D 方法

实现旗帜(waving texture)特效需要从两个方面考虑：

1. 网格的生成算法；
2. 实时波动效果的实现。

本质上将，旗帜效果的网格模型是一个正弦曲面(见下图)，随着时间的改变实时调整波峰 的位置即可实现旗帜飘扬的特效。

正弦波图像

网格的生成算法伪代码如下所示，通过一个 GRID_WIDTH/GRID_HEIGHT 循环计算 x,y,z 生成网格，其中 z 决定曲面的弯曲程度，由 sinx 求得。

    for (int x = 0; x < GRID_WIDTH; x++) {
        for (int y = 0; y < GRID_HEIGHT; y++) {
            points[x][y][0] = (float)x / (float)TILE_COUNT_LINE;
            points[x][y][1] = (float)y / (float)TILE_COUNT_COL;
            points[x][y][2] = Amplitude * (float)sin(Period * points[x][y][0]/360.0f * PI * 2.0f);
        }
    }

其中振幅 Amplitude 决定了波峰、波谷的大小，Period 决定了波动周期。

当图片连续波动时，需要逐帧调整波的位置，只需将网格的顶点数据逐列循环右 移即可，伪代码如下所示：

    for (int y = 0; y < GRID_HEIGHT; y++){
        hold = points[0][y][2];
        for (int x = 0; x < GRID_WIDTH - 1; x++) {
            points[x][y][2] = points[x+1][y][2];
        }
        points[GRID_WIDTH-1][y][2] = hold;
    }

Reference

1. Nehe Lesson 11