WebGL - 缩放
在本章中,我们将通过一个示例来演示如何使用 WebGL 修改三角形的比例。
缩放
缩放就是增加或减少对象的大小。例如,如果一个三角形的顶点大小为 [a,b,c],那么顶点为 [2a, 2b, 2c] 的三角形将为其大小的两倍。因此,要缩放三角形,您必须将每个顶点乘以缩放因子。您也可以缩放特定的顶点。
要缩放三角形,在程序的顶点着色器中,我们创建一个统一矩阵,并将坐标值与该矩阵相乘。稍后,我们传递一个 4×4 对角矩阵,该矩阵在对角线位置(最后一个对角线位置为 1)具有 x、y、z 坐标的缩放因子。
所需步骤
创建 WebGL 应用程序来缩放三角形需要以下步骤。
步骤 1 − 准备画布并获取 WebGL 渲染上下文
在此步骤中,我们使用 getContext() 获取 WebGL 渲染上下文对象。
步骤 2 −定义几何图形并将其存储在缓冲区对象中
由于我们绘制的是三角形,因此我们必须传递三角形的三个顶点,并将它们存储在缓冲区中。
var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ];
步骤 3 − 创建和编译着色器程序
在此步骤中,您需要编写顶点着色器和片段着色器程序,编译它们,并通过链接这两个程序来创建组合程序。
顶点着色器 − 在程序的顶点着色器中,我们定义一个矢量属性来存储 3D 坐标。与此同时,我们定义一个统一矩阵来存储缩放因子,最后,我们将这两个值相乘并将其分配给保存顶点最终位置的 gl_position。
var vertCode = 'attribute vec4 coordinates;' + 'uniform mat4 u_xformMatrix;' + 'void main(void) {' + ' gl_Position = u_xformMatrix * coordinates;' + '}';
片段着色器 − 在片段着色器中,我们只需将片段颜色分配给 gl_FragColor 变量即可。
var fragCode = 'void main(void) {' +' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';
步骤 4 − 将着色器程序与缓冲区对象关联
在此步骤中,我们将缓冲区对象与着色器程序关联。
步骤 5 − 绘制所需对象
由于我们使用索引绘制三角形,因此我们使用 drawArrays() 方法。对于此方法,我们必须传递要考虑的顶点/元素的数量。由于我们正在绘制三角形,因此我们将传递 3 作为参数。
gl.drawArrays(gl.TRIANGLES, 0, 3);
示例 – 缩放三角形
以下示例显示如何缩放三角形 −
<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
/*=================创建画布=========================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*===========定义和存储几何形状==============*/
var vertices = [
-0.5,0.5,0.0,
-0.5,-0.5,0.0,
0.5,-0.5,0.0,
];
//创建一个空的缓冲区对象并存储顶点数据
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/*========================Shaders============================*/
//顶点着色器源代码
var vertCode =
'attribute vec4 coordinates;' +
'uniform mat4 u_xformMatrix;' +
'void main(void) {' +
' gl_Position = u_xformMatrix * coordinates;' +
'}';
//创建顶点着色器程序对象并编译
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
//片段着色器源代码
var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
'}';
//Create a fragment shader program object and compile it
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
//创建并使用组合着色器程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
/*===================scaling==========================*/
var Sx = 1.0, Sy = 1.5, Sz = 1.0;
var xformMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0
]);
var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
/* ===========Associating shaders to buffer objects============*/
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coordinatesVar);
/*=================Drawing the Quad========================*/
gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
如果运行此示例,它将产生以下输出 −