跟月影学可视化
月影
前奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
新⼈⾸单¥29.9
4205 人已学习
课程目录
已更新 28 讲 / 共 45 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统:如何用Canvas绘制层次关系图?
03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?
04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段?
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线?
08 | 如何利用三角剖分和向量操作描述并处理多边形?
09 | 如何用仿射变换对几何图形进行坐标变换?
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色?
11|图案生成:如何生成重复图案、分形图案以及随机效果?
12 | 如何使用滤镜函数实现美颜效果?
13 | 如何给简单的图案添加纹理和复杂滤镜?
14 | 如何使用片元着色器进行几何造型?
15 | 如何用极坐标系绘制有趣图案?
16 | 如何使用噪声生成复杂的纹理?
17 | 如何使用后期处理通道增强图像效果?
视觉高级篇 (8讲)
18 | 如何生成简单动画让图形动起来?
19 | 如何用着色器实现像素动画?
20 | 如何用WebGL绘制3D物体?
21 | 如何添加相机,用透视原理对物体进行投影?
22 | 如何用仿射变换来移动和旋转3D物体?
23 | 如何模拟光照让3D场景更逼真?(上)
24 | 如何模拟光照让3D场景更逼真?(下)
25 | 如何用法线贴图模拟真实物体表面
特别放送 (1讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

08 | 如何利用三角剖分和向量操作描述并处理多边形?

月影 2020-07-08
你好,我是月影。
在图形系统中,我们最终看到的丰富多彩的图像,都是由多边形构成的。换句话说,不论是 2D 图形还是 3D 图形,经过投影变换后,在屏幕上输出的都是多边形。因此,理解多边形的基本性质,了解用数学语言描述并且处理多边形的方法,是我们在可视化中必须要掌握的内容。
那今天,我们就来说说,不同的图形系统是如何用数学语言描述并处理多边形。首先,我们来说说图形学中的多边形是什么。

图形学中的多边形是什么?

多边形可以定义为由三条或三条以上的线段首尾连接构成的平面图形,其中,每条线段的端点就是多边形的顶点,线段就是多边形的边。
多边形又可以分为简单多边形复杂多边形。我们该怎么区分它们呢?如果一个多边形的每条边除了相邻的边以外,不和其他边相交,那它就是简单多边形,否则就是复杂多边形。一般来说,我们在绘图时,要尽量构建简单多边形,因为简单多边形的图形性质比较简单,绘制起来比较方便。
而简单多边形又分为凸多边形和凹多边形,我们主要是看简单多边形的内角来区分的。如果一个多边形中的每个内角都不超过 180°,那它就是凸多边形,否则就是凹多边形。
在图形系统中绘制多边形的时候,最常用的功能是填充多边形,也就是用一种颜色将多边形的内部填满。除此之外,在可视化中用户经常要用鼠标与多边形进行交互,这就要涉及多边形的边界判定。所以今天,我们就来重点讨论多边形的填充和边界判定。首先,我们来看多边形的填充。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥29.9
立即订阅
登录 后留言

精选留言(5)

  • gltjk
    在之前代码的基础上封装了 Canvas 类和自己的 Vector2D 类,同时增加简单的 WebGL 类(其中封装了用 Tesser2 三角剖分实现的画多边形方法),然后试了试小试牛刀里要求的椭圆、正五角星和菱形星星。因为文件比较多,不用 Codepen 了,改用 Github 放代码。
    之后有时间再把判断点在多边形内部做出来,同时把之前 Codepen 的例子迁移过来。
    话说感觉 WebGL 好深奥啊,可能我连门都没算入吧……

    在线预览:https://g.gltjk.com/learn-visualization/canvas-webgl-polygon/

    代码仓库:https://github.com/gltjk/learn-visualization

    作者回复: 赞👍能动手自己做非常棒,多实践可以快速学习成长。webgl上手不太容易,不过掌握了学习诀窍,打好基础,后面就越来越容易了,而且会觉得越来越有趣

    2020-07-09
    7
  • 孙华
    月影大佬
    WebGL fill 的例子中
    修改一下 gl.drawElements 的渲染模式,将 gl.TRIANGLES 改成 gl.LINE_STRIP。这样,我们就可以清晰地看出,经过 Earcut 处理的这个多边形被分割成了 8 个三角形。
    但例子展示的结果中只有6个三角形和一个四边形。这是什么原因?

    作者回复: 因为LINE_STRIP是绘制连续线段,所以最终每个点只经过一次,就会出现四边形。不过这里只是大概地显示出三角形形状,所以没关系。如果要严格显示出各个三角形,需要改一下数据,把每个顶点和它的三角形的其他顶点对应的边数据重新存一下然后用LINES绘制

    2020-07-24
    1
  • kylin
    月影老师,您好,请问三角形向量a b c三个点A B C有没有对应关系,而且a b c 的方向在图上也没有,看不明白您说的如何判断一个点在三角形内

    作者回复: 有的,向量abc就是点p和ABC连接的线段表示向量

    2020-08-01
    1
  • Mingzhang
    关于判断一个点是否在三角形内(包括边上)我曾经用代数方法做过:对每一条边而言其对应的顶点必然与要判定的点在同一侧,因此需要进行三组测试。判定函数如下:
    /**
     * Determine whether p3 and p4 are on the same side of the segment of p1-p2
     * @param p1
     * @param p2
     * @param p3
     * @param p4
     * returns -1 (not on the same side) | 0 (at least one is on the segment) | 1 (on the same side)
     */
    function onSameSide(p1=[0,0], p2=[0,0], p3=[0,0], p4=[0,0]) {
      let angle0 = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
      let angle1 = Math.atan2(p3[1] - p1[1], p3[0] - p1[0]);
      let angle2 = Math.atan2(p4[1] - p1[1], p4[0] - p1[0]);
      let product = (angle1 - angle0) * (angle2 - angle0);
      if (product === 0) {
        return 0;
      }
      return product > 0 ? 1 : -1;
    }

    作者回复: 嗯,算atan很消耗性能

    2020-07-27
    1
  • Presbyter🎱
    老师,没脸的问一句。自己已经要疯了,很多数学概念已经不明白了。现在在恶补线性代数,然后在回来看文章。老师能麻烦一下,给出咱们这个课程所需要的数学知识嘛?我好一次性都看了,然后一点一点的在重新读咱们文章。麻烦老师了。

    作者回复: 在第9讲的最后我放了一张图,列出了所有的知识点,你可以看一下

    2020-07-14
收起评论
5
返回
顶部