WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象。
3D,D是Dimension的简写,维度的意识,也就是3维,那么3维是指什么?3维是指:宽度、高度和深度。3D图形可以很通俗的解释为:一个图形具有三个维度,分别为宽度、高度和深度。那么回头看一下2D图形,也就只有两个维度了,宽度和高度。
从2D走向3D最关键的知识,其实3D图形是通过在计算机屏幕上显示二维图像的同时,再提供深度也就是第三维,来让我们的眼睛对图形产生3D的错觉。
从2D走向3D的本质:2D+透视=3D
进行3D编程,或者进行2D编程时,需要去了解计算机图形的一些基本知识,只有这样才能对图形编程有一个宏观和全面的认识,要学会知其然,知其所以然。
3D图形学
1、3D坐标系
由两条互相垂直的坐标轴组成,通常标记为x轴和y轴。这种坐标系可以用于定义页面中元素的坐标位置。而在绘制3D图形时,除了x轴和y轴,我们还需要一个z轴,用于表示深度,即3D物体距离屏幕的距离。
2、点、线、面和网格
3D空间内的所有物体都是由点、线及面组成。一个点由3个值组成-x、y、z,表示3D空间内的唯一位置。2个点可以连成一条线,3个点我们就可以形成一个平面。多个面相互拼接就组成了网格。
3、纹理贴图及材质
纹理可以定义一个网格表面的外观。
材质就是网格表面的特性,模型外表是否透明、是否会反射等都是通过网格的材质所定义的。
4、变换和矩阵
模型变换就是利用矩阵对模型的大小、位移、旋转等进行操作。
5、摄像机、视口和投影
用数学算法将模拟的3D空间投射到2D视口的图像而已。投影就是将模拟的三维空间内的物体映射到屏幕上生成一个二维图像的过程。投影分为正交投影和透视投影,这也就是摄像机的实现原理。摄像机是用户观察场景的眼睛,摄像机的视野决定了透视关系和我们在Canvas上看到的内容。
着色器
为了最终的渲染模型,开发者必须精确的定义定点、变换、材质和相机之间的关系。
下方
运营:weikashouji