WebGL笔记_三维坐标变换(一)

读WebGL编程指南+计算机图形学两本书整理笔记.

三维观察

1 . 视图矩阵(view matrix)

为了确定观察者的状态,需要知道视点和观察目标点,可以确定视线,但是最后要把观察的景象绘制到屏幕上,还需要确定上方向.

• 视点 : 观察者在三维空间的位置 . (eyeX , eyeY , eyeZ)
• 观察目标点 : 被观察目标的位置. (centerX , centerY , centerZ)
• 上方向 : 最终绘制在屏幕上的影像中的上方向.( upX , upY , upZ)

这三个矢量确定了最终的视图矩阵 .

var e, fx, fy, fz, rlf, sx, sy, sz, rls, ux, uy, uz;fx = centerX - eyeX;fy = centerY - eyeY;fz = centerZ - eyeZ;//Normalize f.rlf = 1 / Math.sqrt(fx*fx + fy*fy + fz*fz); fx *= rlf;fy *= rlf;fz *= rlf;// Calculate cross product of f and up.sx = fy * upZ - fz * upY;sy = fz * upX - fx * upZ;sz = fx * upY - fy * upX;// Normalize s.rls = 1 / Math.sqrt(sx*sx + sy*sy + sz*sz);sx *= rls;sy *= rls;sz *= rls;// Calculate cross product of s and f.ux = sy * fz - sz * fy;uy = sz * fx - sx * fz;uz = sx * fy - sy * fx;

视图矩阵

sxux−fx0syuy−fy0szuz−fz0sx∗eyeX+ux∗eyeY−fx∗eyeZsy∗eyeX+uy∗eyeY−fy∗eyeZsz∗eyeX+uz∗eyeY−fz∗eyeZ1(视图矩阵)

2 . 变换矩阵

100001000010txtytz1(平移变换)

cosθsinθ00−sinθcosθ0000100001(绕z轴旋转变换)

sx0000sy0000sz00001(伸缩变换)

3 . 模型矩阵(model matrix)

<模型旋转后的顶点坐标> = <旋转矩阵> * <原始顶点坐标>
<从”视点看上去”的顶点坐标> = <视图矩阵> * <旋转后的顶点坐标>

所以:
<从”视点看上去”的顶点坐标> = <视图矩阵> * <旋转矩阵> * <原始顶点坐标>

• 模型矩阵 :<视图矩阵> * <变换(平移/旋转/伸缩)矩阵> * <原始顶点坐标>(平移/旋转/伸缩的变换矩阵此处省略.)

3 . 可视空间

3.1 长方体可视空间

长方体可视空间由正射投影(orthographic projection)产生.

一个长方体的确定只要确定6个面的位置,即 : left , right , bottom , top , near , far

正射投影矩阵

2/(right−left)00002/(top−bottom)0000−2/(far−near)0−(right+left)/(right−left)−(top+bottom)/(top−bottom)−(far+near)/(far−near)1(正射投影矩阵)

3.2 四棱锥/金字塔可视空间

四棱锥/金字塔可视空间由透视投影(perspective)产生.

四棱锥可视空间是由以视点为顶点的四棱锥构成 , 确定四棱锥可视空间的参数有fov(可视顶面和底面的夹角) , aspect(远/近裁切面的宽高比) , near(近裁切面位置) , far(远裁切面位置) .

注意 : fov必须大于0 ,near必须小鱼far .

透视投影矩阵 :

Math.cos(fov/2)/(aspect∗sin(fov/2))0000Math.cos(fov/2)/Math.sin(fov/2)0000−(far+near)/(far−near)−100−2∗near∗far/(far−near)0(正射投影矩阵)

4 . 模型视图投影矩阵

顶点在观察体里面的坐标 = <投影矩阵> * <视图矩阵> * <模型变换矩阵> * 世界坐标中的顶点坐标 .

注意:为了避免着色器在处理每一个顶点时都要计算矩阵乘法,所以应该将矩阵相乘的结果算完再传给着色器 .

5. 视口变换

(1) 将规范观察体的内容转变到屏幕坐标系 , 只需将x , y坐标按照比例进行变换 , z坐标只要留给可见性检测和表面绘制时使用 .

(2) 在WebGL中通过gl.enable(parameter)函数来实现.parameter可以选择gl.DEPTH_TEST(深度检测,也可以理解成消除隐藏面), gl.BLEND (混合), gl.POLYGON_OFFSET_FILL(多边形位移.)

6. WebGL可以绘制的基本图形

WebGL通过gl.drawArrays()函数可以绘制一些基本图形,接收的参数如下 :

• 点 (gl . POINTS)
• 线段 (gl . LINES)
• 线条 (gl . LINE_STRIP)
• 回路 (gl . LINE_LOOP)
• 三角形 (gl . TRIANGLES)
• 三角带(gl . TRIANGLE_STRIP)
• 三角扇(gl . TRIANGLE_FAN)