.  关于2D地图擦除算法,去年我写过一个实现,勉强实现了地形擦除,但跟最终效果还相差甚远,这次我写了一个完整的实现,在此记录,留个印象。

.  去年的版本<<算法 & 数据结构——裁剪多边形>>,因为受限于当时框架用GDI实现的渲染器,只有擦除地形没有擦除地图,这次换了OpenGL渲染器,终于可以实现最终效果了。

这个算法看似简单,实际上就是很简单,大致可分为三个部分。

地图擦除:擦除地图的图像,产生视觉效果。

地形擦除:擦除地图的形状,用于物理计算。

橡皮擦:用于定义擦除的形状。

地图擦除

假设这是一副画在纸上的彩笔画,如果要擦除画上的一部分,有过生活经验的人立马就能想到用橡皮擦就好了,很多算法灵感来自生活,生活多姿多彩的人适合做程序员。这个实现过程大概就是:绑定地图到当前渲染目标,渲染“橡皮擦”让其覆盖范围内的像素,从而达到擦除效果。

橡皮擦

接着上一个环节,“橡皮擦”可以是从文件读取的一张图,也可以是程序生成的一张图。如果从文件读取,设置合适的BlendFunc,直接渲染覆盖像素颜色就行了,本例使用程序生成的图,因为这个灵活度更高。

这是一个正10边形的“橡皮擦”,从图中可看出,里面有几条线,把正10边形分割成了8个三角形,这8把三角形的面积和形状等于这个正10边形,如果你困惑为什么要切成三角形,你运气很好,有一个大佬刚好懂你的困惑,并为你量身定做了一篇答案<<算法 & 数据结构——任意多边形填充>>

以上则是地图的擦除效果,其中有一处细节,擦除的边缘有点生硬,如果要制作类似《弹弹堂》这样的游戏,地图是通过炮弹炸掉的,那么被擦除的边缘应该留下被炸过的痕迹,不用做的太真实,只要让边缘产生一些不一样的渐变色就行了,要实现这一点,只需扩展一下“橡皮擦”的边缘。

柔滑边缘,用于生成描边。

拆分三角网格,用于渲染。

柔滑边缘后的擦除效果。

地形擦除

以上是一张加了地形的图,你没有看错,就只是多了一个黑边。

现在要通过“橡皮擦”擦除这个黑边,与地图擦除不同的是,地图擦除是覆盖像素,而地形则是几何计算。

算法:

  1. 从“橡皮擦”与地形相交部分计算出N条切线。

  2. 取第i(0 <= i < N)条切线将地形一分为二。

  3. 丢弃完全包含在“橡皮擦”内的地形。

  4. i + 1,返回 2。

  5. 当前地形被切分完毕,如果还有下一个地形则返回 1,否则结束。

最终效果

2D地图擦除算法的更多相关文章

  1. 2D地图随机生成

    2D地图随机生成基础绘图 海陆分布

  2. 2D激光SLAM算法比较+cartographer

    Hector slam: Hector slam利用高斯牛顿方法解决scan-matching问题,对传感器要求较高. 缺点:需要雷达(LRS)的更新频率较高,测量噪声小.所以在制图过程中,需要rob ...

  3. GPS部标平台的架构设计(五)-地图服务算法库

    GPS平台,需要和各种地图打交道,需要解决以下的问题: 1.坐标偏移,这个不用多说,需要将原始坐标加偏,然后在百度地图或谷歌上显示出来,需要注意的是百度地图的加偏是偏上再偏,谷歌.高德地图等是火星坐标 ...

  4. Google地图数据算法

    Google Maps与Google Earth中的每个级别的每一副图片都有一个URL,例如下面这幅我们学校的图的地址是http://kh.google.com/kh?v=3&t=trstrq ...

  5. 百度地图TILE算法

    Creating primary keyvar LLBAND2 = [75, 60, 45, 30, 15, 0]; var LL2MC2 = [[-.0015702102444, 111320.70 ...

  6. 图像处理之3d算法----2d转3d算法介绍

    http://www.3dov.cn/html/c/37/index.html http://news.ifeng.com/a/20151117/46275220_0.shtml 磁力矩阵 http: ...

  7. RViz 实时观测机器人建立导航2D封闭空间地图过程 (SLAM) ----27

    原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ ROS提供了非常强大的图形化模拟环境 RViz,这个 RViz 能做的事情非常多.今天我们学习一下如何使 ...

  8. .NET开发笔记(二十三) 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  9. 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

随机推荐

  1. Python--day61--Django的ORM

    下载驱动

  2. P1106 细胞分裂

    题目描述 Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家.现在,他正在为一个细胞实验做准备工作:培养细胞样本. Hanks博士手里现在有 \(N\) 种细胞,编号从 \(1\) 到 ...

  3. 2018-4-29-C#-金额转中文大写

    title author date CreateTime categories C# 金额转中文大写 lindexi 2018-04-29 09:50:38 +0800 2018-04-02 21:4 ...

  4. 关于IFRAME的onload事件

    昨天遇到一个关于iframe的问题,比如a页面中嵌入了一个iframe称为a_iframe,如果直接在a_iframe的标签上直接加入属性的设置,onload=’’,这样才onload事件才是起作用的 ...

  5. SVN:符号

    问号:未纳入SVN控制之下的新文件感叹号:已经修改过还没上传的文件红叉:准备删除尚未提交绿勾:从服务器上取下来没修改过的文件黄色感叹号:发生冲突蓝色加号:准备加到服务器上还没提交

  6. H3C RIP可选配置

  7. H3C DHCP租约更新

  8. H3C设置下次启动的配置文件

  9. vue-learning:24 - component - 目录

    component 组件 组件的概念 Vue 组件同时也都是 Vue 实例,可接受相同的选项对象option (除了一些根级特有的选项) 和使用相同的生命周期钩子,以及模板调用方式. 组件的构建和注册 ...

  10. jekyll 在博客添加流程图

    本文告诉大家如何在博客使用流程图. 如果你使用的是我博客的模板,那么就可以直接使用我说的文件,如果是自己的主题,就需要在自己文件对应的地方加上代码. 在我的博客里,需要添加下面的js到博客,可以打开 ...