三维图形学(3D-CGI)–cesium冷知识大用途

前言

做webgis开发，特别是cesium三维地图开发，需要具备一些冷知识基本图形学常识，网络上各种版本繁多，查阅起来东拼西凑难成体系，于是乎自己查阅大量片段资料学习的同时整理出干货分享，建议收藏~~ 后续会陆续更新cesium相关干货知识~~

【备注：图片从网络摘抄若涉及侵权请联系删除。】

了解计算机图形学

      计算机图形学（ComputerGraphics），简称CG。也称计算机图形学的主要研究内容就是研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示的相关原理与算法。计算机图形学（Computer Graphics）和三维图形学（3D Computer Graphics）是紧密相关但不同的领域。计算机图形学是一个广泛的领域，包括二维图形（2D Computer Graphics）和三维图形（3D Computer Graphics）。计算机图形学是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学。计算机图形学主要包含四大部分的内容：建模(Modeling)、渲染(Rendering)、动画(Animation)和人机交互(Human–computer Interaction, HCI)。

一、概念

三维图形学是计算机图形学的一个特殊领域，专注于处理在三维空间中表示和操作的图形。

3D 计算机图形制作工作流程分为三个基本阶段： 3D 建模 – 形成物体形状的计算机模型的过程 布局和 CGI 动画 – 场景中对象（模型、灯光等）的放置和移动 3D 渲染 – 根据光线位置、表面类型和其他质量生成图像（光栅化场景）的计算机计算

三维图形学是研究如何在计算机中表示和处理三维图形的学科。它涵盖了许多领域，包括三维建模、渲染、动画等。

三维计算机图形和二维计算机图形的不同之处在于计算机内存储存了几何数据的三维表示，用于计算和绘制最终的二维图像。二维图形可以看作三维图形的子集。相对于二维计算机图形而言，三维计算机图形更显真实，而且对空间操作的随意性也较强。不管我们觉得自己的眼睛看到的三维图像有多么真实，但是屏幕上的像素实际上是二维的。

三维图形学作为一门交叉学科，以其独特的技术和应用领域为我们展示了数字化时代的无限可能。通过建模、渲染、动画和交互等关键技术，我们可以创造出逼真的虚拟世界。

公式：2D + 透视 = 3D

三维（3D）这个术语表示显示的物体具有三个维度：宽度、高度和深度。

小注：并非所有以 3D 形式显示的计算机图形都基于线框模型。具有 3D 逼真效果的 2D 计算机图形通常无需线框建模即可实现，并且其最终形式可能无法区分。一些图形艺术软件包含可应用于透明层上的 2D 矢量图形或 2D 光栅图形的过滤器。视觉艺术家还可以复制或可视化 3D 效果，并在不使用滤镜的情况下手动渲染逼真的效果。

二、模型

1. 模型是用语言或者数据结构进行严格定义的三维物体或虚拟场景的描述，它包括几何、视点、纹理、照明和阴影等信息。模型描述了形成物体形状的过程.模型也可以通过程序或物理模拟来创建。3D 模型由称为顶点的点组成，这些点定义形状并形成多边形。目前比较流行的3D格式有obj、fbx、gltf、stl等等格式.
2. 三维图形除了使用软件以人工方式建模外，照相测量法、三维扫描等方式也是近年来逐渐成熟的技术，可透过相机或三维扫描仪将已存在之实体资料转化为数字化三维资料，生成资料可能以面（Surface）或点云（Point cloud）的方式呈现。
3. 三维形体的模型：线框模型、表面模型：比较自由，没有拓扑结构、实体模型。
4. 照数据类型：分为几何和拓扑：“几何”比较就是我们通常所说的点，线，面，体。线又可以分为直线，线段，圆，圆弧，Nurbs曲线，贝赛尔曲线等各种线，面也类似可以分为平面，非参数曲面，参数方程定义的曲面等。而体则定义了各种实体，长方体，圆柱，球，圆环，组合体等。拓扑”描述的是位置关系。记录位置关系或者对象关系的数据结构在三维几何计算中非常有用，是一种基础数据结构。
5. 模型建模、查看工具blender 是开源软件，免费且功能强大，推荐个人使用。www.blender.org/

三.渲染知识点

 将模型转换为图像。3D 建模首先描述三种显示模型：绘制点、绘制线以及绘制三角形和其他多边形面片。

1. 实时渲染通常依靠图形处理器（GPU）完成这个过程。

2. 渲染管线渲染管线也称为渲染流水线或像素流水线或像素管线，是显示芯片内部处理图形信号相互独立的的并行处理单元。渲染管线就是显示核心中负责给图形配上颜色的一组专门通道。它是显示核心中单独设计的一组电路，拥有单独的晶体管。渲染管线越多，显示核心就会越大，因为它所使用的晶体管数目增加了。

3. 顶点着色器决定光和材质特效的操作称为着色。各类的材质数据，例如点所在位置，法向量，颜色或其它着色方程需用到的数值信息，可储存在每个顶点中。经过变换的顶点流按照顺序被送到下一个被称为图元装配的阶段。渲染的基本单位是一个个的三角形面片。渲染中通过顶点的排列顺序来决定正反面。顶点着色的结果（这可能是颜色，向量，纹理坐标或其它种类的着色数据）会被送进光珊化阶段去插值。光珊阶段的目标是计算并设置像素的颜色。

5. 混合是指两种颜色的叠加方式。就是把某一像素位置上原来的颜色和将要画上去的颜色，通过某种方式混在一起，从而实现特殊的效果。裁剪将超出屏幕的部分裁剪掉，无需后续运算。采样又称取样，指把时间域或空间域的连续量转化成离散量的过程。抗锯齿（英语：anti-aliasing，简称AA），也译为边缘柔化、消除混叠、抗图像折叠有损等。深度其实就是该象素点在3d世界中距离摄象机的距离（绘制坐标），深度缓存中存储着每个象素点（绘制在屏幕上的）的深度值！深度值（Z值）越大，则离摄像机越远。有了深度缓冲以后，绘制物体的顺序就不那么重要了，都能按照远近（Z值）正常显示。

6. 抖动想存储256级灰度的图案只存储一个整数矩阵，称为标准图案，其中的每个值从0到255。如果这16×16的方块中，可以表示257级灰度。

0个黑点    灰度256
1个黑点    灰度255
全部黑点   灰度0

四、坐标系统

1. 自身坐标系又叫做建模空间，这是我们定义物体的三角形列的坐标系。在物体自己的坐标系中建模比在世界坐标系中直接建模更容易。在自身坐标系中建模不像在世界坐标系中要考虑本物体相对于其他物体的位置、大小、方向关系。

2. 世界坐标系：一旦我们构造了各种模型，它们都在自己的自身坐标系中，但是我们需要把它们都放到同一个世界坐标系中。物体从自身坐标系到世界坐标系中的换叫做世界变换。世界变换通常是用平移、旋转、缩放操作来设置模型在世界坐标系中的位置、大小、方向。 2D 和 3D 笛卡尔坐标系：3D 笛卡尔坐标系中的一个点，是通过三个值如（x,y,z）来表示的。这三个值组合起来实际上表示两个重要的值：方向和数量。视口: 把绘图左边映射到窗口坐标；裁剪区域的宽度和高度很少和窗口的宽度或高度相匹配（以像素为单位）。因此，坐标系统必须从笛卡尔坐标系映射到物理屏幕像素坐标。通过视口的设置来指定的。

3. 视图坐标系：将照相机平移变换到世界坐标系的源点并把它的方向旋转至朝向Z轴的正方向，世界坐标系中的所有物体都将随着照相机的变换而做相同的变换。这个变换就叫做视图坐标系变换。 视图坐标系的主要任务就是将3D场景转化为2D图像表示。

4. 几何流水线:模型坐标系->世界坐标系->观察坐标系->规范化坐标系->设备坐标系 坐标表示：三维场景从建模坐标到设备坐标的变换序列。

五、投影

1.将3D场景转化为2D图像表示，这种从n维转换成n-1维的过程就叫做投影。投影的方法有很多种重点就是透视投影。因为透视投影可以使离照相机越远的物体投影到屏幕上后就越小，这可以使我们把3D场景更真实的转化为2D图像。投影变换的实质就是定义可视体，并将可视体内的几何图形投影到投影窗口上去。

2. 一种是平行投影也叫作正投影，正投影的特点是所有的投影线都是平行的,另外一种则是透视投影,透视投影的特点是投影线是相交于一点的,相交于这个点叫做投影中心。

六、色彩和纹理

1. 一个纹理实际上就是一个位图。纹理一词既是指一个物体上颜色的模式，又是指物体表面是粗糙的还是光滑的。纹理实际上是一个二维数组，它的元素是一些颜色值。单个的颜色值被称为纹理元素（texture elements）或纹理像素（texel）。

2. 纹理坐标：纹理坐标位于纹理空间中。它们和纹理中的(0,0)位置相对应。当我们将一个纹理应用于一个图元时，它的纹理像素地址必须要映射到对象坐标系中。然后再被平移到屏幕坐标系或像素位置上。

3. 纹理过滤：双线性过滤、各项异性过滤、Mipmap。

4. 纹理环绕：过设置纹理寻址模式，我们就可以在纹理坐标超出范围时进行控制。

5. 立方体纹理：立方体纹理是一种特殊的纹理技术，它用6幅二维纹理图像构成一个以原点为中心的纹理立方体。对于每个片段，纹理坐标(s, t,r)被当作方向向量看待，每个纹素(texel)都表示从原点所看到的纹理立方体上的图像。把6个独立纹理结合为一个单独的纹理。

七、粒子系统

1. 粒子系统是由总体具有相同的表现规律，个体却随机表现出不同的特征的大量显示元素构成的集合。。粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术，而这些现象用其它传统的渲染技术难以实现的真实感的效果。经常使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹这样的抽象视觉效果等等。

2. 几个要素： 群体性：粒子系统是由“大量显示元素”构成的。统一性：粒子系统的每个元素具有相同的表现规律。 随机性：粒子系统的每个元素又随机表现出不同特征。

（备注：图片从网络摘抄若涉及侵权请联系删除。）

八、计算机图形的API

OpenGL和Direct三维是两个用于产生实时图象的流行的API。现代显卡提供基于这些API的一定程度的硬件加速，经常使得复杂的三维图象实时产生。提供给程序员一种使用硬件的抽象方式. 三维计算机图形的API颇为流行：

// 最早普及的跨平台图形绘制接口OpenGL规范描述了绘制2D和3D图形的抽象API
// OpenGL不仅语言无关，而且平台无关。
// OpenGL纯粹专注于渲染，而不提供输入、音频以及窗口相关的API。
OpenGL和OpenGL着色语言  
// OpenGL ES是从OpenGL裁剪定制而来的, 主要是针对手机、PDA和游戏主机等嵌入式设备而设计，去除了glBegin/glEnd，四边形（GL_QUADS）、多边形（GL_POLYGONS）等复杂图元等许多非绝对必要的特性。
OpenGL ES嵌入式设备的三维API
Direct三维（DirectX的子集）
RenderMan
RenderWare

高层的三维场景图API 底层绘制API之上的附加功能

QSDK
Quesa
Java 三维
JSR 184（M3G）
NVidia Scene Graph
OpenSceneGraph
OpenSG
OGRE
Irrlicht

九、三维引擎

WebGL是通过JS语句，操作本地的OpenGL的部分接口，对于移动设备这是操作OpenGL ES的接口，来实现页面的图形的渲染，WebGL只是绑定外面接口的一层，内部的一些核心内容，如着色器，材质，灯光等都是需要借助GLSL ES语法来操作的。

小注：Cesium-开源引擎-GIS引擎-JavaScript Cesium是一个用于显示三维地球和地图的开源js库。它可以用来显示海量三维模型数据、影像数据、地形高程数据、矢量数据等等。三维模型格式支持gltf、三维瓦片模型格式支持3d tiles。矢量数据支持geojson、topojson格式。影像数据支持wmts等。高程支持STK格式。

原文链接：https://juejin.cn/post/7353245651591249970 作者：优雅技术人