qinyuandong

前端建模基础

计算机图形学(Computer Graphics)主要是研究物体在计算机中的图形显示与交互,各个领域都能利用计算机图形显示获取相关的好处,作为一个前端工程师,了解相关图形学的基础有利于往更高的台阶前行。本文章借鉴了《现代计算机图形学基础》一书中的部分概念,希望整理出对前端工程师更为贴近的内容

认识计算机图形学(CG)

计算机图形在前端中最常见的应用就是数据统计了吧,echartG2等等插件提供了多样的数据图,这些插件通过将大量的数据转化成可视形式,其数据趋势与线性关系得以更容易的展示出来,使得数据在前端的显示更为直观与优雅

另外,新兴起的VR(virtual-reality)技术,也在不少的前端页面中出现,VR交互中,用户可与三维场景中的对象进行交互。此类展现方式可以让用户更好的与设计者沟通,使用户体验得到增强

CG是以建模,绘制,交互,动画,影像为核心内容并服务于各个领域的一门科学。
对于前端工程师来说,建模就是指使用前端库,通过数据来表达物体和场景并构建对应的数据化三维模型的过程。
绘制则是指将这些三维模型通过一些计算和变换,最终在屏幕上渲染出来的过程,也是从几何模型到像素的转化。
所以,工程师使用计算机语言输入的是三维模型,而通过计算机模拟人类的视觉功能,对三维模型进行加工处理,最终在屏幕上输出的是二维图像。虽然输出的是二维图像,但是通过计算机的处理,图像中的物体之间的关系符合人类对现实世界的认知,从而使大脑形成三维空间的感知。

基础概念

图形是由点,线,面等几何元素组成而成的,这些元素统称为图元。简单的图元可以组成一些立体图元,从而又组合成简单的几何模型,复杂的模型又通过这些简单的模型组合而成,通过模型变换整合坐标系最终形成复杂场景。在threejs中的场景图就是这样一层一层的构建的。

图形只得是由数据组成的几何信息,而图像指的是由像素组成的二维栅格,所以图形不会失真,图像会失真

正如上述,创建的三维模型最终要在显示器中显示,而显示器是基于像素的二维图像显示,所以需要将图形经过一系列的几何变换映射成屏幕坐标中的二维图像,确定图元对应的图像坐标位置,其中涉及各种物理坐标的转换,最后还要经过光栅化处理(确定指定分辨率下哪些像素被覆盖,以何种颜色进行色彩显示)。最后才显示在显示器中。
这一系列的过程也称做GPU的图形流水线(也称渲染流水线或渲染管线),实际的应用中,图形流水线是十分复杂的,以OpenGL为例,按照流水线操作的对象大体可分为两类操作:

处理图像元素的像素操作 处理图元元素的几何操作
区域填充 模型变换
片元组装 顶点着色
纹理映射 纹理变换
颜色合成 视点变换
深度测试 视域剔除
遮罩测试 投影变换
透明融合 背面剔除
雾化处理 窗口变换

分类:

技术点:

相关文章: