WebGL 实践篇（三）—— 二维图形的平移、旋转、缩放

一平移

（1）平移直接体现在代码当中

在二维当中，平移相当于就是改变x,y的位置。

    function setRectangle(gl, x, y, width, height) {var x1 = x;var x2 = x + width;var y1 = y;var y2 = y + height;gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([x1, y1,x2, y1,x1, y2,x1, y2,x2, y1,x2, y2]), gl.STATIC_DRAW);}

在这段代码当中，要实现矩形的移动，就改变x,y的值即可。x,y的值通过外界可变的方式传入，每改变一次x,y的值就要进行一次重绘矩形，refreshDraw()是对渲染代码进行封装，滑块引入webgl-lessons-ui.js库进行操作。

    var translation = [10, 10];var width = 100;var height = 30;var color = [Math.random(), Math.random(), Math.random(), 1];refreshDraw();webglLessonsUI.setupSlider("#x", { slide: updatePosition(0), max: webgl.canvas.width });webglLessonsUI.setupSlider("#y", { slide: updatePosition(1), max: webgl.canvas.height });function updatePosition(index) {return function (event, ui) {translation[index] = ui.value;refreshDraw();}}

结果如下：

（2）平移体现在着色器当中

如果对一个复杂图形进行平移的话，像上述那种代码就比较复杂与繁琐。将平移项加入到着色器当中能够简化代码。比如F的绘制，只需要知道"F"形状的长宽即可，偏移量可不体现在setGeometry()这个函数当中：

    function setRectangle(gl) {gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([// 左竖0, 0,30, 0,0, 150,0, 150,30, 0,30, 150,// 长横30, 0,100, 0,30, 30,30, 30,100, 0,100, 30,// 短横30, 60,67, 60,30, 90,30, 90,67, 60,67, 90,]), gl.STATIC_DRAW);}

偏移量(u_translation)体现在着色器中：

  <script id="vertex-shader" type="nojs">attribute vec2 a_position;uniform vec2 u_resolution;uniform vec2 u_translation;void main(){vec2 position = a_position + u_translation;vec2 zeroToOne = position / u_resolution;vec2 zeroToTwo = zeroToOne * 2.0;vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace * vec2(1,-1),0,1);}</script>

之后的代码都差不多，需要注意的是参数单个分别传入与一起以数组的形式传入的区别：

      webgl.uniform2f(resolutionUniformLocation, webgl.canvas.width, webgl.canvas.height);webgl.uniform2fv(translationUniformLocation, translation);webgl.uniform4fv(colorUniformLocation, color);

还要注意最后绘制的个数为18个，因为有6个三角形构成了”F“，而每个三角形有3个顶点。

      webgl.drawArrays(webgl.TRIANGLES, 0, 18);

以及还要注意一下，加入这行代码与不加的区别：

      webglUtils.resizeCanvasToDisplaySize(webgl.canvas);

不加上述那行代码的结果如下：

加了的结果：

二旋转

有两种理解方式，一是将原来的坐标点乘以单位圆中的某一点来获得旋转后的坐标点，二是根据正余弦来求解旋转后的坐标点。其实二者算是同一种方式，只不过单位圆算是正余弦之后得到的结果了。

利用单位圆（其中中间的加减符号与旋转方向有关，该公式一般作顺时针旋转）：

rotatedX = a_position.x * u_rotation.y + a_position.y * u_rotation.x;
rotatedY = a_position.y * u_rotation.y - a_position.x * u_rotation.x;

利用正余弦（其中中间的加减符号与旋转方向有关，也在一定程度上与传入的角度有关，该公式一般作逆时针旋转）：

rotatedX = a_position.x * u_cosB - a_position.y * u_sinB;
rotatedY = a_position.y * u_cosB + a_position.x * u_sinB;

旋转量(u_rotation)也体现在着色器当中：

  <script id="vertex-shader" type="nojs">attribute vec2 a_position;uniform vec2 u_resolution;uniform vec2 u_translation;uniform vec2 u_rotation;void main(){vec2 rotatedPosition = vec2(a_position.x * u_rotation.y + a_position.y * u_rotation.x,a_position.y * u_rotation.y - a_position.x * u_rotation.x);vec2 position = rotatedPosition + u_translation;vec2 zeroToOne = position / u_resolution;vec2 zeroToTwo = zeroToOne * 2.0;vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace * vec2(1,-1),0,1);}</script>

获得属性位置、传参以及加入旋转角度的滑块（代码借助正余弦方式进行实现）：

    var rotationUniformLocation = webgl.getUniformLocation(program, "u_rotation");var rotation = [0, 1];webglLessonsUI.setupSlider("#rotation", { slide: updateAngle, max: 360 });function updateAngle(event, ui) {var angleInDegrees = 360 - ui.value;var angleInRadians = angleInDegrees * Math.PI / 180;rotation[0] = Math.sin(angleInRadians);rotation[1] = Math.cos(angleInRadians);refreshDraw();}//不要忘记设置旋转参数webgl.uniform2fv(rotationUniformLocation, rotation);

结果如下：

三缩放

缩放跟平移的原理差不多。

缩放大小(u_scale)体现在顶点着色器当中：

  <script id="vertex-shader" type="x-shader/x-vertex">attribute vec2 a_position;uniform vec2 u_resolution;uniform vec2 u_translation;uniform vec2 u_rotation;uniform vec2 u_scale;void main(){vec2 scaledPosition = a_position * u_scale;vec2 rotatedPosition = vec2(scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);vec2 position = rotatedPosition + u_translation;vec2 zeroToOne = position / u_resolution;vec2 zeroToTwo = zeroToOne * 2.0;vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace * vec2(1,-1),0,1);}</script>

获得属性位置、传参以及加入缩放大小的滑块：

    var scaleUniformLocation = webgl.getUniformLocation(program, "u_scale")webglLessonsUI.setupSlider("#scalex", { value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2 });webglLessonsUI.setupSlider("#scaley", { value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2 });webgl.uniform2fv(scaleUniformLocation, scale);function updateScale(index) {return function (event, ui) {scale[index] = ui.value;refreshDraw();}}//不要忘记设置缩放参数webgl.uniform2fv(scaleUniformLocation, scale);

结果如下（x为负值向左缩放，y为负值向上缩放）：

WebGL 实践篇（三）—— 二维图形的平移、旋转、缩放相关推荐

利用Turbo C进行平面二维图形的平移，旋转，缩放，对称
[实验内容] 以矩阵运算为数学基础,采用旋转.平移.缩放.对称等基本几何变换,对一简单的二维图形做变换. [实验步骤] 1. 编写二维图形基本变换(包括旋转.平移.缩放.对称)的通用子程序: 2. 以 ...
图形学 ---- 二维几何变换（二维图形矩阵平移，旋转，缩放）
二维图形几何变换,矩阵计算前言:对于一个图形的几何变换,对应的是操作到图形中的每一个点! 即对每一个点做出相应的几何变换.比如平移,就是对二维图形的每个点都平移相同的距离:旋转则是对每一个点,基于基 ...
二维图形平移变换c语言程序,[转载]计算机图形学Opengl实现二维图形的平移、旋转、缩放复合变换...
参考课堂教学中关于模型变化的讲解,编写对一个三角形分别实现平移.缩放.旋转等变化的源码及效果图.请以该例为蓝本,实现3题的代码编写. 如下的几幅图,第一幅就是在给出的代码部分进行修改,将GL_FLAT ...
3ds Max 实验三二维图形建模的基本应用
计算机图形学二维图形基本变换实验原理,计算机图形学实验：二维图形变换.docx...
计算机图形学实验:二维图形变换.docx (9页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分实验三二维图形变换一.实验任务1．通 ...
计算机图形学：二维图形的几何变换（算法原理及代码实现）
一.实现方案对于一个二维图形作平移.旋转.放缩变换,可以转换为在二维坐标系中图形的所有点分别可以对应到在x,y轴方向分别平移tx,ty(平移).绕一点旋转固定的角(旋转).在x,y轴方向分别放缩sx ...
计算机图形学学习笔记（七）：二维图形变换：平移，比例，旋转，坐标变换等
接上文计算机图形学学习笔记(六):消隐算法:Z-buffer,区间扫描线,Warnock,光栅图形学小结在图形学中,有两大基本工具:向量分析,图形变换.本文将重点讲解向量和二维图形的变换. 5. ...
计算机图形学二维图形基本变换实验原理,江苏大学-计算机图形学第三次实验报告-二维图形变换...
<江苏大学-计算机图形学第三次实验报告-二维图形变换>由会员分享,可在线阅读,更多相关<江苏大学-计算机图形学第三次实验报告-二维图形变换(13页珍藏版)>请在人人文库网上搜索 ...
matlab 三nurbs,nurbs 绘制三维、二维图形，网格细化，基函数求解等包 matlab 238万源代码下载- www.pudn.com...
文件名称: nurbs下载收藏√ [ 5 4 3 2 1 ] 开发工具: matlab 文件大小: 334 KB 上传时间: 2013-03-16 下载次数: 18 提供者: 吴紫俊 ...

WebGL 实践篇（三）—— 二维图形的平移、旋转、缩放

WebGL 实践篇（三）—— 二维图形的平移、旋转、缩放相关推荐

最新文章

热门文章