用WEBGL来画封闭多边形，然后拉伸为3D模型

目前很多浏览器原生支持WEBGL,只要你的代码在浏览其中打开，不用服务器，就可以看到你画的模型了。

目前我做了一个非常简单的画图工具，先画2D图形（结束画图按‘c'键），画好后直接拉伸成立体图形。新版本已经能对齐模型与2D图形，并可以获取本地文本文件的文本值（计划用来加载模型文件）。全部用原生javascript加WEBGL，有需要学习这方面技能的可以参考

全部代码见下面，将代码存到test.html文件中，浏览器中直接打开文件就可以看到效果：

下面理出一些基本的概念，方便大家研究理解，请在浏览器中打开浏览：

    
	



齐次坐标有四个值：X,Y,Z,1,数据类型是vec4
OPENGL使用右手坐标系
4*4矩阵的数据类型是mat4
单位矩阵一条对角线上的值为1，其余值全为0
任何值乘以单位矩阵都不会改变
右边矩阵是左边矩阵的转置,函数是transpose(mat4)





A00
A01
A02
A03
 
transpose
A00
A10
A20
A30
A10
A11
A12
A13
                     
A01
A11
A21
A31
A20
A21
A22
A23
                     
A02
A12
A22
A32
A30
A31
A32
A33
                     
A03
A13
A23
A33





 矩阵加法 
A+a
B+b
C+c
D+d
 = 
A
B
C
D
 + 
a
b
c
d
E+e
F+f
G+g
H+h
                     
E
F
G
H
   
e
f
g
h
I+i
J+j
K+k
L+l
                     
I
J
K
L
    
i
j
k
l
M+m
N+n
O+o
P+p
                     
M
N
O
P
    
m
n
o
p





 点与矩阵相乘 
A
B
C
D
 * 
X
 = 
AX+BY+CZ+D
E
F
G
H
						
Y
					
EX+FY+GZ+H
I
J
K
L
						
Z
					
IX+JY+KZ+L
M
N
O
P
						
1
					
MX+NY+OZ+P





 矩阵乘法 
A
B
C
D
 * 
a
b
c
d
 = 
Aa+Be+Ci+Dm
Ab+Bf+Cj+Dn
Ac+Bg+Ck+Do
Ad+Bh+Cl+Dp
E
F
G
H
   
e
f
g
h
			
Ea+Fe+Gi+Hm
Eb+Ff+Gj+Hn
Ec+Fg+Gk+Ho
Ed+Fh+Gl+Hp
I
J
K
L
    
i
j
k
l
		
Ia+Je+Ki+Lm
Ib+Jf+Kj+Ln
Ic+Jg+Kk+Lo
Id+Jh+Kl+Lp
M
N
O
P
    
m
n
o
p
		
Ma+Ne+Oi+Pm
Mb+Nf+Oj+Pn
Mc+Ng+Ok+Po
Md+Nh+Ol+Pp





如果Point2=M1*(M2*(M3*Point1))
则Point2=(M1*M2*M3)*Point1,这可以显著减少矩阵运算量
对于M*M-1=M-1*M=单位矩阵，M-1叫做逆矩阵，公式为mat4.inverse()





 平移矩阵 glm::translate(x,y,z)
X+TX
 = 
1
0
0
TX
 * 
X
Y+TY
0
1
0
TY
						
Y
					
Z+TZ
0
0
1
TZ
						
Z
					
1
0
0
0
1
						
1
					





 缩放矩阵 glm::scale(x,y,z)
X*SX
 = 
SX
0
0
0
 * 
X
Y*SY
0
SY
0
0
						
Y
					
Z*SZ
0
0
SZ
0
						
Z
					
1
0
0
0
1
						
1
					





 缩放矩阵用来切换坐标系
1
0
0
0
0
1
0
0
						
0
0
-1
0
						
0
0
0
1
						





旋转需要指定旋转轴和旋转角度，围绕任何轴的旋转都可以表示为绕X,Y,Z轴旋转的组合，旋转角度被称为欧拉角
3D空间旋转轴不经过原点时，1.平移旋转轴，使它经过原点，2.绕X,Y,Z旋转，3.复原步骤1中的平移
计算旋转推荐使用四元数，用来消除3D应用中的一些瑕疵





 绕X轴旋转矩阵 glm::rotate()
X'
 = 
1
0
0
0
 * 
X
Y'
0
cosθ
-sinθ
0
						
Y
					
Z'
0
sinθ
cosθ
0
						
Z
					
1
0
0
0
1
						
1
					





 绕Y轴旋转矩阵 glm::rotate()
X'
 = 
cosθ
0
sinθ
0
 * 
X
Y'
0
1
0
0
						
Y
					
Z'
-sinθ
0
cosθ
0
						
Z
					
1
0
0
0
1
						
1
					





 绕Z轴旋转矩阵 glm::rotate()
X'
 = 
cosθ
-sinθ
0
0
 * 
X
Y'
sinθ
cosθ
0
0
						
Y
					
Z'
0
0
1
0
						
Z
					
1
0
0
0
1
						
1
					





向量表示大小和方向，没有特定位置。
一般用空间中的单个点来表示向量，向量的大小是原点到该点的距离，方向是原点到该点的方向。
点和向量没有很大的区别，vec3/vec4既可以表示点，也可以表示向量
向量的加减法，如果A(u,v,w),B(x,y,z),A+B=(u+x,v+y,w+z),A-B=(u-x,v-y,w-z)。
向量归一化normalize（变长度为1）：A/sqrt(u*u+v*v+w*w)。
向量点积dot：A●B=ux+vy+wz。最大的用处是计算两个向量夹角：A●B=|A||B|cos(θ)
向量叉积cross：AxB=(uz-wy,wx-uz,uy-vx)。叉积的一个重要特点：新生成一个向量，该向量正交与前面两个向量所定义的平面
法向量的计算：假设一个三角形有三个逆时针方向的顶点v1,v2,v3，向量P=v2-v1;向量q=v3-v1;外法向量N=PxQ。