案例03 补充:金字塔等图形边框的绘制

简介: 案例03 补充:金字塔等图形边框的绘制

案例 03:金字塔、六边形、圆环的绘制的文章中,针对边框的绘制,并没有作详细说明,下面将这部分补充完善下。


首先,我们先思考,如果在绘制金字塔时,在没有绘制黑色边框问题的情况下,是什么样的。效果如图所示:

微信图片_20220513150048.png


从图上我们可以看出,金字塔绘制的过程中出现类似ZFighting的问题,主要是OpenGL中没有办法通过相同颜色的图层,来区分图层关系,因此需要给图形绘制黑色边框,以便于区分不同图层。


黑色图层的绘制流程如图所示

微信图片_20220513150236.png


函数中主要包含两部分


  • 图形的绘制 即 金字塔
  • 边框的绘制 即 黑色边框


图形的绘制这里就不过多说明了,主要说说边框绘制的过程


边框绘制


  • 开启多边形偏移、设置偏移量


在同一个位置同时绘制填充和边线,会产生ZFighting问题,而ZFighting问题的解决可以通过多边形偏移,所以需要设置一个偏移量,通常默认是 -1 和 -1

    glPolygonOffset(-1.0f, -1.0f);
    //启用线的深度偏移
    glEnable(GL_POLYGON_OFFSET_LINE);
  • 开启抗锯齿功能:主要是为了让线条更光滑
glEnable(GL_LINE_SMOOTH);


  • 开启颜色混合功能

颜色混合主要适用于边框颜色与填充颜色的混合,但是个人感觉其实这里是没有必要开启颜色混合的,图形上层并没有半透明颜色需要与其他颜色进行混合(在代码中已验证,开启与不开启并没有差别)

glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
  • 绘制边框、设置线条宽度
    其实,在整个绘制过程中,图形绘制了两边,第一遍是以颜色和面的方式填充金字塔,第二遍是以颜色和线的方式填充线框


    //绘制线框几何黑色版 三种模式,实心,边框,点,可以作用在正面,背面,或者两面
    //通过调用glPolygonMode将多边形正面或者背面设为线框模式,实现线框渲染
    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
    //设置线条宽度
    glLineWidth(2.5f);
    shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vBlack);
    pBatch->Draw();


  • 还原设置属性
    //通过调用glPolygonMode将多边形正面或者背面设为全部填充模式
    glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
    glDisable(GL_POLYGON_OFFSET_LINE);
    glLineWidth(1.0f);
    glDisable(GL_BLEND);
    glDisable(GL_LINE_SMOOTH);


最终实现的效果如图所示

微信图片_20220513150737.png


相关文章
|
数据可视化
绘制热图时看不出颜色差异?四种方式转换处理使结果显而“易”见
绘制热图时看不出颜色差异?四种方式转换处理使结果显而“易”见
19499 2
|
7月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
74 0
|
7月前
|
数据可视化
QChart多个图布局使坐标轴对齐的方法
QChart多个图布局使坐标轴对齐的方法
191 0
Echarts实战案例代码(48):堆叠图实现图形和坐标轴对齐的解决方案
Echarts实战案例代码(48):堆叠图实现图形和坐标轴对齐的解决方案
163 0
|
JSON 前端开发 数据可视化
【图形基础篇】02 # 指令式绘图系统:如何用Canvas绘制层次关系图?
【图形基础篇】02 # 指令式绘图系统:如何用Canvas绘制层次关系图?
199 0
【图形基础篇】02 # 指令式绘图系统:如何用Canvas绘制层次关系图?
|
数据可视化
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
177 0
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
|
XML 前端开发 数据可视化
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
129 0
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
如何用两种不同的方法动态绘制饼状图
如何用两种不同的方法动态绘制饼状图
206 0
如何用两种不同的方法动态绘制饼状图
|
计算机视觉
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
SwiftUI—通过Path路径绘制不规则的线条和图形
SwiftUI—通过Path路径绘制不规则的线条和图形
658 0
SwiftUI—通过Path路径绘制不规则的线条和图形