WebGL 2D 图像旋转.pdf

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 你可以发现当我们顺