WebGL是什么
WebGL
是一项结合了HTML5
和JavaScript
,用来在网页上绘制和渲染复杂三维图形(3D图形)的技术。WebGL
基于OpenGL ES 2.0
,也使用GLSL ES
编写着色器。
Canvas是什么
HTML5
引入标签,定义了网页上的绘图区域,允许JavaScript动态地绘制图形。还提供了一些简单的绘图函数,用来绘制点、线、矩形、圆等等。
顶点着色器
顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点(vertex)是指二维或三维空间中的一个点,比如二维或三维图形的端点或交点。
片元着色器
片元着色器是进行逐片元处理过程(如光照)的程序。片元是一个WebGL术语,你可以将其理解为像素(图像的单元)。
顶点着色器控制点的位置和大小,片元着色器控制器点的颜色。如前所述,片元就是显示在屏幕上的一个像素(严格来说,片元包括这个像素的位置、颜色和其他信息)。
WebGL坐标系统
在WebGL中,当你面向计算机屏幕时,X轴是水平的(正方向为右),Y轴是垂直的(正方向为下),Z轴垂直于屏幕(正方向为外)。这套坐标系又被称为右手坐标系。
attribute和uniform
JavaScript程序传输数据给着色器,有两种方式:attribute和uniform。
attribute
变量是一种GLSL ES变量,被用来从外部向顶点着色器传输数据,只有顶点着色器能使用,它传输的是与顶点相关的数据。
uniform
传输的是对于所有顶点都相同(或与顶点无关)的数据,通常用于片元着色器。
正旋转
旋转中关于“逆时针”的约定是:如果旋转角度是正值,观察者在Z轴正半轴某处,视线朝Z轴负方向进行观察,那么看到的物体就是逆时针旋转的,这种情况称作正旋转
。我们可以使用右手来确认:右手握拳,大拇指伸直并使其指向旋转轴的正方向,那么右手其余几个手指就指明了旋转的方向,因此正旋转
又可以称为右手法则旋转
。也就是说,如果旋转角度是正值,那就是逆时针旋转。