这是重构渲染器的最后一部分了,将会给出一个 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 使用例子的更多相关文章

  1. 基于OpenGL编写一个简易的2D渲染框架-05 渲染文本

    阅读文章前需要了解的知识:文本渲染 https://learnopengl-cn.github.io/06%20In%20Practice/02%20Text%20Rendering/ 简要步骤: 获 ...

  2. 基于OpenGL编写一个简易的2D渲染框架-06 编写一个粒子系统

    在这篇文章中,我将详细说明如何编写一个简易的粒子系统. 粒子系统可以模拟许多效果,下图便是这次的粒子系统的显示效果.为了方便演示,就弄成了一个动图. 图中,同时显示了 7 种不同粒子效果,看上去效果挺 ...

  3. 基于OpenGL编写一个简易的2D渲染框架-01 创建窗口

    最近正在学习OpenGL,我认为学习的最快方法就是做一个小项目了. 如果对OpenGL感兴趣的话,这里推荐一个很好的学习网站 https://learnopengl-cn.github.io/ 我用的 ...

  4. 基于OpenGL编写一个简易的2D渲染框架-03 渲染基本几何图形

    阅读文章前需要了解的知识,你好,三角形:https://learnopengl-cn.github.io/01%20Getting%20started/04%20Hello%20Triangle/ 要 ...

  5. 基于OpenGL编写一个简易的2D渲染框架-02 搭建OpenGL环境

    由于没有使用GLFW库,接下来得费一番功夫. 阅读这篇文章前请看一下这个网页:https://learnopengl-cn.github.io/01%20Getting%20started/02%20 ...

  6. 基于OpenGL编写一个简易的2D渲染框架-08 重构渲染器-整体架构

    事实上,前面编写的渲染器 Renderer 非常简陋,虽然能够进行一些简单的渲染,但是它并不能满足我们的要求. 当渲染粒子系统时,需要开启混合模式,但渲染其他顶点时却不需要开启混合模式.所以同时渲染粒 ...

  7. 基于OpenGL编写一个简易的2D渲染框架-04 绘制图片

    阅读文章前需要了解的知识,纹理:https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/ 过程简述:利用 FreeI ...

  8. 基于OpenGL编写一个简易的2D渲染框架-09 重构渲染器-Shader

    Shader 只是进行一些简单的封装,主要功能: 1.编译着色程序 2.绑定 Uniform 数据 3.根据着色程序的顶点属性传递顶点数据到 GPU 着色程序的编译 GLuint Shader::cr ...

  9. 基于OpenGL编写一个简易的2D渲染框架-11 重构渲染器-Renderer

    假如要渲染一个纯色矩形在窗口上,应该怎么做? 先确定顶点的格式,一个顶点应该包含位置信息 vec3 以及颜色信息 vec4,所以顶点的结构体定义可以这样: struct Vertex { Vec3 p ...

随机推荐

  1. stenciljs 学习六 组件开发样式指南

    组件不是动作,最好使用名词而不是动词, 文件结构 每个文件一个组件. 每个目录一个组件.虽然将类似的组件分组到同一目录中可能是有意义的,但我们发现当每个组件都有自己的目录时,更容易记录组件. 实现(. ...

  2. stardog graphql 简单操作

    预备环境: 下载stardog 软件包 graphql 查询地址 创建一个简单数据库 ./stardog-admin db create -nstarwars graphql 查询方式 http 地址 ...

  3. java设计模式--创建型模式(一)

    2016-04-24 10:10:34 创建型模式:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式 注意:工厂模式可以分为三类: 1)简单工厂模式(Simple Factory) 2)工厂 ...

  4. NOSQL详解

    Nosql的全称是Not Only Sql,这个概念早起就有人提出,在09年的时候比较火.Nosql指的是非关系型数据库,而我们常用的都是关系型数据库.就像我们常用的mysql,sqlserver一样 ...

  5. asterisk channel driver dev ref

    入口函数load_module    load_config    ast_channel_register console_tech    ast_cli_register_multiple     ...

  6. 使用fiddler进行genymotion安卓虚拟机手机抓包

    1.首先先下载fiddler,这个直接百度就有啦. 2.打开fiddler ,可以看到这个界面还是挺帅的: 3.选择Tools - Fiddler Options -Https选项卡将配置设置为如下: ...

  7. 【python】class之类的定义

    使用class定义类,可以提供一个可选的父类或者基类,如果没有合适的基类,那就使用object作为基类,也可以不写.class FooClass (object)或者class FooClass: v ...

  8. qt 中文乱码

    首先呢,声明一下,QString 是不存在中文支持问题的,很多人遇到问题,并不是本身 QString 的问题,而是没有将自己希望的字符串正确赋给QString. 很简单的问题,"我是中文&q ...

  9. 峰Spring4学习(3)注入参数的几种类型

    People.java  model类: package com.cy.entity; import java.util.ArrayList; import java.util.HashMap; im ...

  10. django从请求到响应的过程深入讲解

    django启动 我们在启动一个django项目的时候,无论你是在命令行执行还是在pycharm直接点击运行,其实都是执行'runserver'的操作,而ruserver是使用django自带的的we ...