WebGL 理论基础 - 二维缩放

最新推荐文章于 2022-03-29 16:19:44 发布

玄魂

最新推荐文章于 2022-03-29 16:19:44 发布

阅读量190

点赞数

文章标签： docker css webgl 编程语言 github

转载自知乎

本文原文地址：https://zhuanlan.zhihu.com/p/56594572

---------------------------------------------------------

此文上接一系列文章，先从基础概念开始，上一篇是物体旋转。

缩放和平移一样简单。

让我们将位置乘以期望的缩放值，这是前例中的变化部分。

<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;
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;

然后需要在 JavaScript 中绘制的地方设置缩放量。

...

  var scaleLocation = gl.getUniformLocation(program, "u_scale");

  ...

  var scale = [1, 1];

  ...

  // 绘制场景
  function drawScene() {

    ...

    // 设置平移
    gl.uniform2fv(translationLocation, translation);

    // 设置旋转
    gl.uniform2fv(rotationLocation, rotation);

    // 设置缩放
    gl.uniform2fv(scaleLocation, scale);

    // 绘制几何体
    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 18;  // 6 个三角形组成 'F', 每个三角形 3 个点
    gl.drawArrays(primitiveType, offset, count);
  }

现在我们有了缩放，拖动滑块试试。