- 1、本文档共4页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
WebGL 2D 图像旋转
WebGL 2D 图像旋转
WebGL 2D 图像旋转
⾸先我要承认下我不是很清楚如何讲解这个让它看起来更容易理解,但是,不管怎
样,我想尽⼒尝试下。⾸先,我想介绍下什 叫做“单位圆” 。你如果还记得⾼中数学
中⼀个圆又⼀个半径。半径指的是从圆⼼到圆的圆边的距离。单位圆指的是它的半径
是 1.0 。
如下是⼀个单位圆:
打开上⾯的链接之后,你可以拖动圆环上⾯的⼩圆,接着 X 和 Y 的值也会随之发⽣
变化。这个左边值表⽰的是圆环上的点。在圆上的最⾼点处,Y 为 1 和 X 为 0 。在最
右的位置时 X 为 1 和 Y 为 0 。
如果你还记得基础的三年级数学,把某个数乘以 1 以后结果仍然是该数。那 123*1
= 123 。相当基础对吧?那 半径为 1.0 的单位圆也是⼀种形式的 1。它是⼀种旋转的
1。因此你可以将这个单位圆与某物相乘,它执⾏的操作和乘以 1 类似,除了⼀些奇
异的事情发⽣改变这种⽅式。
我们将从单位圆上得到任何点的 X 和 Y 值,接着将他们乘以上⼀节⽰例中的⼏何图
形。
如下是更新渲染器:
script id=2d-vertex-shader type=x-shader/x-vertex
attribute vec2 a_position;
uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
void main( {
// Rotate the position
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 ;
// Add in the translation.
vec2 position = rotatedPosition + u_translation;
接着修改 JavaScript 代码,这样我们就可以传递上⾯的两个参数:
...
var rotationLocation = gl.getUniformLocation(program, u_rotati
...
var rotation = [0, 1];
..
// Draw the scene.
function drawScene( {
// Clear the canvas.
gl.clear(gl.COLOR_BUFFER_BIT ;
// Set the translation.
gl.uniform2fv(translationLocation, translation ;
// Set the rotation.
gl.uniform2fv(rotationLocation, rotation ;
// Draw the rectangle.
gl.drawArrays(gl.TRIANGLES, 0, 18 ;
}
如下是代码运⾏的结果。拖动单位圆上的⼩环使图形进⾏旋转或者拖动滑动条使图形
进⾏移动。
为什 上⾯的代码能够起作⽤?⾸先,让我们看下数学公式:
rotatedX = a_position.x * u_rotation.y + a_position.y * u_rotatio
rotatedY = a_position.y * u_rotation.y - a_position.x * u_rotatio
假设你有⼀个矩形,并且你想旋转它。在你把它旋转到右上⾓ (3.0 ,9.0) 这个位置之
前。我们先在单位圆中选择⼀个从 12 点钟的位置顺时针偏移 30 度的点。
在圆上那个位置的点的坐标为 0 .50 和 0 .87 :
3.0 * 0.87 + 9.0 * 0.50 = 7.1
9.0 * 0.87 - 3.0 * 0.50 = 6.3
那刚刚好是我们需要的位置:
旋转 60 度和上⾯的操作⼀样:
圆上⾯的位置的坐标是 0 .87 和 0 .50:
3.0 * 0.50 + 9.0 * 0.87 = 9.3
9.0 * 0.50 - 3.0 * 0.87 = 1.9
你可以发现当我们顺
文档评论(0)