基于OpenGL编写一个简易的2D渲染框架-13 使用例子

这是重构渲染器的最后一部分了，将会给出一个 demo，测试模板测试、裁剪测试、半透明排序等等：

上图是本次 demo 的效果图，中间的绿色图形展现的是模板测试。

模板测试

void init(Pass*& p1, Pass*& p2)

{

    p1 = new Pass;

    p2 = new Pass;

    Shader* s1 = new Shader("Shader/defaultGeometryShader.vs", "Shader/defaultGeometryShader.frag", CVA_V3F_C4F);

    Shader* s2 = new Shader("Shader/defaultGeometryShader.vs", "Shader/defaultGeometryShader.frag", CVA_V3F_C4F);

    p1->enableBlend(true);

    p2->enableBlend(true);

    p1->setBlendFunc(BLEND_SRC_ALPHA, BLEND_ONE_MINUS_SRC_ALPHA, BLEND_ONE, BLEND_ZERO);

    p2->setBlendFunc(BLEND_SRC_ALPHA, BLEND_ONE_MINUS_SRC_ALPHA, BLEND_ONE, BLEND_ZERO);

    p1->setShader(s1);

    p2->setShader(s2);

    p1->setPrimType(PT_TRIANGLES);

    p2->setPrimType(PT_TRIANGLES);

    p1->enableStencilTest(true);

    p1->setStencilMask(0xFF);

    p1->setStencilCompareFunc(COMPARE_ALWAYS);

    p1->setStencilRef();

    p1->setStencilOp(STENCIL_OP_KEEP, STENCIL_OP_KEEP, STENCIL_OP_REPLACE);

    p2->enableStencilTest(true);

    p2->setStencilMask(0xFF);

    p2->setStencilCompareFunc(COMPARE_EQUAL);

    p2->setStencilRef();

    p2->setStencilOp(STENCIL_OP_KEEP, STENCIL_OP_KEEP, STENCIL_OP_REPLACE);

}

使用模板测试需要两个 Pass，第一个 Pass 绘制圆的时候，把圆范围内的模板值设置为 1,。在时候 p1 绘制好圆后，再使用第二个 pass 绘制两个波纹效果的图形，这时的 pass 设置比较函数为等于，即只有模板值等于 1 的像素才不会被抛弃：

/* 模板测试 */

void stencilTest(GraphicsContext* gc, Canvas2D* canvas, Pass* p1, Pass* p2)

{

    static float d = ;

    static float d1 = ;

    static float h = ;

    Vec2 vs1[];

    Vec2 vs2[];

    gc->render();

    canvas->setCustomPass(p1);

    canvas->fillCircle(Vec3(, , ), , , Color(, , , ));

    gc->render();

    canvas->setCustomPass(p2);

    float hz = ;

    vs1[].set(, );

    vs1[].set(, );

    for ( int i = ; i <= hz; i++ ) {

        float y = sinf(i / hz * PI_2 + d + i / hz * );

        vs1[i + ].set( + i / hz * , y *  +  + h);

    }

    canvas->fillPath(vs1, , Color(, , , 0.5));

    vs2[].set(, );

    vs2[].set(, );

    for ( int i = ; i <= hz; i++ ) {

        float y = sinf(i / hz * PI_2 + d1 + i / hz * );

        vs2[i + ].set( + i / hz * , y * ( + i / hz * ) +  + h);

    }

    canvas->fillPath(vs2, , Color(, , , 0.7));

    gc->render();

    canvas->setCustomPass(nullptr);

    h += 0.08;

    if ( h >  ) {

        h = ;

    }

    d += 0.01;

    if ( d >= PI_2 ) d = ;

    d1 += 0.02;

    if ( d1 >= PI_2 ) d1 = ;

}

最终的效果:

和迅雷的悬浮球显示下载进度的效果相差不多。

裁剪测试

在使用裁剪测试时，使用一种粒子效果作为测试对象。粒子会拖出一条长长的尾巴，碰到窗口边缘时反弹。四条绿线围成的矩形为裁剪区域，粒子在矩形区域外的部分不会被显示出来。代码实现：

    ParticleSystem* ball = new ParticleSystem();

    ball->initWithPlist("Particle/motion.plist");

    ball->setTexture("Particle/fire.png");

    ball->getEmitter()->setEmitPos(Vec2(, ));

    Pass* pass = ball->getPass();

    pass->enableScissor(true);

    pass->setScissorRect(, , , );

    ParticleSystemManager manager;

    manager.appendParticleSystem(ball);

先创建一个粒子系统，实现拖尾的粒子效果。然后获取粒子系统的 Pass 对象（每个粒子系统都会有一个 pass 对象），开启裁剪测试，随机给出一个裁剪区域，初始化到此结束。

/* 裁剪测试 */

void scissorTest(ParticleSystem* ps, Canvas2D* canvas)

{

    static float x = , y = ;

    static int xdir = , ydir = ;

    static float clipx1 = , clipy1 = , clipx2 = , clipy2 = ;

    static int clipdx = , clipdy = ;

    ps->getEmitter()->setEmitPos(Vec2(x, y));

    int speed = 2.5;

    x -= xdir * speed;

    y -= ydir * speed;

    if ( x <  ) {

        xdir = -;

    }

    else if ( x > DEFAULT_WIN_W ) {

        xdir = ;

    }

    if ( y <  ) {

        ydir = -;

    }

    else if ( y > DEFAULT_WIN_H ) {

        ydir = ;

    }

    clipx1 += clipdx * 0.5f;

    clipx2 -= clipdx * 0.5f;

    clipy1 += clipdy * 0.5f;

    clipy2 -= clipdy * 0.5f;

    if ( clipx1 >=  ) {

        clipdx = -;

    }

    else if ( clipx1 <=  ) {

        clipdx = ;

    }

    if ( clipy1 >=  ) {

        clipdy = -;

    }

    else if ( clipy1 <=  ) {

        clipdy = ;

    }

    canvas->drawLine(, clipy1, DEFAULT_WIN_W, clipy1, Color(, , , ));

    canvas->drawLine(clipx1, , clipx1, DEFAULT_WIN_H, Color(, , , ));

    canvas->drawLine(, clipy2, DEFAULT_WIN_W, clipy2, Color(, , , ));

    canvas->drawLine(clipx2, , clipx2, DEFAULT_WIN_H, Color(, , , ));

    ps->getPass()->setScissorRect(clipx1, clipy1, clipx2 - clipx1, clipy2 - clipy1);

}

每一帧，都移动四条绿线，实现裁剪区域的变化。在改变裁剪区域后，要更新 pass 的裁剪区域。作为对比，还加入了火焰的粒子效果（没有对 pass 做任何的更改），火焰跟随鼠标的位置移动。

半透明图形排序

这个主要在绘制图形的时候设置深度值即可：

        for ( int i = ; i < ; i++ ) {

            int x =  + i * ;

            int y =  + i * ;

            if ( i <  ) {

                canvas.fillRect(x, y, x + , y + , Color(0.2 * i, , , 0.1 + 0.1 * i), i);

            }

            else {

                canvas.fillRect(x, y, x + , y + , Color(, , 0.2 * i, 0.1 * i), i);

            }

        }

fillRect 函数的最后一个参数就是深度值（渲染器中就是根据深度值 depth 进行排序的），数值小的先被绘制。

巴特西

基于OpenGL编写一个简易的2D渲染框架-13 使用例子

最新文章

热门文章