/LGC图形渲染/旗帜(waving texture)特效的实现

来源：互联网发布：网络教育秋季报名时间编辑：程序博客网时间：2024/05/02 06:46

旗帜(waving texture)特效的实现

作者: 刘鹏

日期: 2010-10-26

本文详细介绍了如何实现3D的旗帜(waving texture)特效。

简介

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

旗帜效果

3D 方法

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

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

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

正弦波图像

网格的生成算法伪代码如下所示，通过一个 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

Nehe Lesson 11