首页 > 专栏 > 计算机图形学 > 文章详情
WebGL图形变换:平移矩阵 发布于:2023-02-26 17:31:00   原创发表   查看:83  讨论:0
一,原始步骤DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
考虑一下,为了平移一个三角形,你需要对它的每一个顶点做怎么样的操作?DLV易塔云建站-模板下载,web开发资源,技术博客
答案是,你需要对顶点坐标的每个分量(x和y),加上三角形在对应轴(如X轴或Y轴)上平移的距离。DLV易塔云建站-模板下载,web开发资源,技术博客
比如,将点 p(x,y,z) 平移到 p'(x',y',z'),在X轴、Y轴、Z轴三个方向上平移的距离分别是 Tx , Ty,Tz,其中Tz为0。DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客

x' = x + TxDLV易塔云建站-模板下载,web开发资源,技术博客
y' = y + TyDLV易塔云建站-模板下载,web开发资源,技术博客
z' = z + Tz
DLV易塔云建站-模板下载,web开发资源,技术博客

DLV易塔云建站-模板下载,web开发资源,技术博客
我们只需要在着色器中为顶点坐标的每个分量加上一个常量就可以实现上面的灯饰。DLV易塔云建站-模板下载,web开发资源,技术博客
显然,这是一个逐顶点的操作,而非逐片元,上述修改应该发生在顶点着色器。DLV易塔云建站-模板下载,web开发资源,技术博客
顶点着色器中: gl_Position = a_Position + u_Translation;\nDLV易塔云建站-模板下载,web开发资源,技术博客
js中:var Tx = 0.5, Ty = 0.5, Tz = 0.0;DLV易塔云建站-模板下载,web开发资源,技术博客
传递给着色器:
DLV易塔云建站-模板下载,web开发资源,技术博客
1. var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');DLV易塔云建站-模板下载,web开发资源,技术博客
2. gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
二,平移矩阵DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
首先理解一下,矩阵和矢量的相乘。如果将一个点p的坐标,变换为点p',可以通过矩阵来进行变换。即:DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
等式:DLV易塔云建站-模板下载,web开发资源,技术博客
x' = ax + by + czDLV易塔云建站-模板下载,web开发资源,技术博客
y' = dx + ey + fzDLV易塔云建站-模板下载,web开发资源,技术博客
z' = gx + hy + iz
DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
我们比较:DLV易塔云建站-模板下载,web开发资源,技术博客
x' = ax + by + cz ...DLV易塔云建站-模板下载,web开发资源,技术博客
x' = x + TxDLV易塔云建站-模板下载,web开发资源,技术博客
因为等式二有常量Tx,所以我们引入4维矩阵,有DLV易塔云建站-模板下载,web开发资源,技术博客
x' = ax + by + cz + dDLV易塔云建站-模板下载,web开发资源,技术博客
y' = ex + fy + gz + hDLV易塔云建站-模板下载,web开发资源,技术博客
z' = ix + jy + kz + lDLV易塔云建站-模板下载,web开发资源,技术博客
l  = mx + ny + oz + pDLV易塔云建站-模板下载,web开发资源,技术博客
比较:
DLV易塔云建站-模板下载,web开发资源,技术博客
x' = x + TxDLV易塔云建站-模板下载,web开发资源,技术博客
y' = y + TyDLV易塔云建站-模板下载,web开发资源,技术博客
z' = z + TzDLV易塔云建站-模板下载,web开发资源,技术博客
比较x',a=1,b=c=0,d=TxDLV易塔云建站-模板下载,web开发资源,技术博客
比较y',e=g=0,f=1,h=TyDLV易塔云建站-模板下载,web开发资源,技术博客
比较z',i=j=0,k=1,l=TzDLV易塔云建站-模板下载,web开发资源,技术博客
最后一行,容易得到,m=n=o=0,p=lDLV易塔云建站-模板下载,web开发资源,技术博客
这样,写出平移矩阵:DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
则:DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
DLV易塔云建站-模板下载,web开发资源,技术博客
 

评论

  • 匿名