前言
变换有三种状态:平移、旋转、缩放。
当我们变换一个图形时,实际上就是在移动这个图形的所有顶点。
课堂目标
- 掌握图形变换的三种方式。
- 可以对图像进行复合变换。
知识点
- 平移
- 旋转
- 缩放
第一章 平移
对图形的平移就是对图形所有顶点的平移。
1-举个例子
已知:
- 顶点p(x,y,z)
- 在x、y、z 三个方向上,分别将点p 移动tx、ty、tz
求:点p 移动后的位置p’(x’,y’,z’)
解:
x'=x+tx
y'=y+ty
z'=z+tz
如果这个图形中并非只有一个顶点,而是有三个,或者更多,那么所有的顶点也是按照同样原理进行位移。
2-向量加法
在实际代码中,我们要有一个向量的概念。
比如 (x,y,z) ,我们既可以说它是一个顶点位置,也可以说它是一个向量。
至于 (x,y,z) 到底是什么,要看我们拿它做什么。
比如,把点p(x,y,z) 作为点位时,那它就是点p(x,y,z)
我们把p 的移动距离tx、ty、tz 封装成一个对象pt(tx,ty,tz),那么pt 就是一个向量,一个为点p 指明移动方向和距离的向量。
因此:点p 的移动结果 p’ 就可以这么写:
p'=p+pt
由上可知,顶点的位移就是向量的加法。
3-代码实现
3-1-GLSL ES 语言里的向量运算
在GLSL ES 语言里,是可以直接进行向量运算。
下面的顶点着色器里的代码:
attribute vec4 a_Position;
vec4 translation=vec4(0,0.2,0,0);
void main(){
gl_Position = a_Position+translation;
}
- a_Position 是原始点位,属于attribute 变量
- translation 是顶点着色器里的私有变量,没有向外部暴露,属于4维向量
- a_Position+translation 便是着色器内的向量加法,这里是对原始点位进行位移
之后,我们也可以把translation 变量暴露出去,让js可以修改图形位置:
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main(){
gl_Position = a_Position+u_Translation;
}
</script>
在js 中修改uniform 变量的方法,我们之前已经说过:
const u_Translation=gl.getUniformLocation(gl.program,'u_Translation');
gl.uniform4f(u_Translation,0,0.5,0,0);
整体代码:
<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main(){
gl_Position = a_Position+u_Translation;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main(){
gl_FragColor=vec4(1,1,0,1);
}
</script>
<script type="module">
import {
initShaders} from '../jsm/Utils.js';
const canvas = document.getElementById('canvas');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
const gl = canvas.getContext('webgl');
const vsSource = document.getElementById('vertexShader').innerText;
const fsSource = document.getElementById('fragmentShader').innerText;
initShaders(gl, vsSource, fsSource);
const vertices=new Float32Array([
0, 0.1,
-0.1,-0.1,
0.1, -0.1
])
const vertexBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
const a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(a_Position);
const u_Translation=gl.getUniformLocation(gl.program,'u_Translation');
gl.uniform4f(u_Translation,0,0.