javascript - 盒子的简单正投影

Question

如果我可以使用正确的术语，这个问题可能会更简单，但我对计算机图形学了解不多。我想做的是将一个盒子(长方体？ - 3d 中的矩形)投影(正交)到 3 个平面(顶 View /前 View /侧 View )中。

source

我有这些限制

1. 盒子的表面与投影平面平行。所以盒子的一个面就是投影。
2. 只需要考虑矩形形状。

我使用 d3 绘制 2d 表示，并且对其工作原理有一些直觉。所以，逻辑可能是这样的(如上图所示)

for top view, move the coordinate to top, left of the box, and discard height (y axis)
for front view, keep the coordinate, and discard depth (z axis)
for left side view, move coordinate to bottom, left and discard length (x axis)

我已经阅读了一些关于如何使用投影矩阵来简化计算的opengl教程，但我的情况更简单，所以我希望我不必将盒子的每个边缘视为向量并对其应用多个矩阵变换。另外，我了解将笛卡尔坐标转换为 svg 坐标的复杂性，但只需将盒子正交投影到 3 平面上的正式方法的想法就足够了。

是否有一个矩阵可以用来获取矩形的投影坐标？请帮助我形式化这个问题(这是一个已知的投影吗？)

如果我不清楚，请告诉我。

提前致谢。

Answer 1

所以我的 WebGL WebGL WebGL 大脑在下面发布了“通用”解决方案，您可以从任何 Angular 任何方向查看

但是，如果您只想要右 View 、俯 View 、前 View ，那么您只需为每个点使用 3 个坐标中的 2 个:前 = (x, y)、顶部 = (x, z)、右 = (z, y)

您只需在 2d 中的所有点之间绘制线条(或在点之间绘制的任何内容)，如下所示

var cubeVertices = [
  -1, -1, -1, // 0
   1, -1, -1, // 1
   1,  1, -1, // 2
  -1,  1, -1, // 3
  -1, -1,  1, // 4
   1, -1,  1, // 5
   1,  1,  1, // 6
  -1,  1,  1, // 7

  //
  // making some points in the middle for letters
  //
  -.5, -.5, 0, // 8     8 +--+ 9
  -.3, -.5, 0, // 9       |
  -.5, -.4, 0, // 10   10 +--+ 11
  -.3, -.4, 0, // 11      |
  -.5, -.3, 0, // 12   12 +

             //           15
  .3, 0, .3, // 13   13 +-+-+ 14
  .5, 0, .3, // 14        |
  .4, 0, .3, // 15        |
  .4, 0, .5, // 16        + 16

  0, -.5, -.5, // 17   17 +---+ 18
  0, -.5,  .5, // 18      |   |
  0,  .5, -.5, // 19   20 +---+ 21
  0,   0, -.5, // 20      | \
  0,   0,  .5, // 21      |  \
  0,  .5,  .5, // 22   19 +   + 22

];
var indices = [
  0, 1,
  1, 2,
  2, 3,
  3, 0,
  4, 5,
  5, 6,
  6, 7,
  7, 4,
  0, 4,
  1, 5,
  2, 6,
  3, 7,

  // f / front
  8, 9,
  8, 12,
  10, 11,

  // t / top
  13, 14,
  15, 16,

  // r / right
  17, 18,
  18, 21,
  17, 19,
  20, 21,
  20, 22,
];
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var width  = canvas.width;
var height = canvas.height;

ctx.font = "20px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

// make 3 areas in canvas
ctx.fillStyle = "#FEE";
ctx.fillRect(width / 3 * 0, 0, width / 3, height);
ctx.fillStyle = "#EFE";
ctx.fillRect(width / 3 * 1, 0, width / 3, height);
ctx.fillStyle = "#EEF";
ctx.fillRect(width / 3 * 2, 0, width / 3, height);
ctx.fillStyle = "#000";

// Draw front
ctx.save();
ctx.translate(width / 6 * 1, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 0, 1, height / 4);
ctx.stroke();
ctx.fillText("front", 0, 60);
ctx.restore();

// Draw top
ctx.save();
ctx.translate(width / 6 * 3, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 0, 2, height / 4);
ctx.stroke();
ctx.fillText("top", 0, 60);
ctx.restore();

// Draw right
ctx.save();
ctx.translate(width / 6 * 5, height / 2);
ctx.beginPath();
addLines(ctx, cubeVertices, indices, 2, 1, height / 4);
ctx.stroke();
ctx.fillText("right", 0, 60);
ctx.restore();


function addLines(ctx, vertices, indices, xIndex, yIndex, scale) {
  for (var ii = 0; ii < indices.length; ii += 2) {
    var offset0 = indices[ii + 0] * 3;
    var offset1 = indices[ii + 1] * 3;
    var p0 = vertices.slice(offset0, offset0 + 3);
    var p1 = vertices.slice(offset1, offset1 + 3);
    ctx.moveTo(p0[xIndex] * scale, p0[yIndex] * scale);
    ctx.lineTo(p1[xIndex] * scale, p1[yIndex] * scale);
  }
}

<canvas id="c"></canvas>

左侧使用(-x，y)，底部使用(x，-z)，后侧使用(-x，y)

<小时/>

通用解决方案(从任何 Angular 看)

您可能想查看this article以及之前的几篇文章。

如果您有 3D 矩阵库，最简单的方法是使用 lookat 函数将正交矩阵与 View 矩阵相乘。(大多数 3D 库都有正交投影函数和观察函数)

othro * inverse(lookAt(eye, target, up));

前面在哪里

eye = [0, 0, 1];
target = [0, 0, 0];
up = [0, 1, 0];

左边是

eye = [-1, 0, 0];
target = [0, 0, 0];
up = [0, 1, 0];

顶部在哪里

eye = [0, 1, 0];
target = [0, 0, 0];
up = [0, 0, -1];

当然，如果您将相机放在直轴上，您可以通过插入正确的值来自己制作矩阵，如果您查看任何ortho和lookAt 函数或者使用上面的值运行一次它们应该非常清楚矩阵需要是什么。我认为使用图书馆可能更容易。更好的是，如果您尝试将盒子的一个面作为视锥体的起点，则可以将盒子坐标插入任何典型的ortho函数

这是一个典型的

  function ortho(left, right, bottom, top, near, far) {
    return [
      2 / (right - left), 0, 0, 0,
      0, 2 / (top - bottom), 0, 0,
      0, 0, -1 / (far - near), 0,
      (right + left) / (left - right),
      (top + bottom) / (bottom - top),
      -near / (near - far),
      1,
    ];
  }

如果不清楚的话，这个矩阵所做的就是缩放每个维度，以便右 - 左、上 - 下和远 - 的范围近每个都变成2个单位大。这分别是前 3 行。最后一行在每个维度中移动单位 -1 个单位，以便最终得到每个维度中从 -1 到 +1 的值，因为这就是 GL/WebGL 需要能够渲染的内容。请参阅this article .

这是一个例子

"use strict";
var ThreeDMath = (function() {

  var subVector = function(a, b) {
    var r = [];
    var aLength = a.length;
    for (var i = 0; i < aLength; ++i)
      r[i] = a[i] - b[i];
    return r;
  };

  var dot = function(a, b) {
    var r = 0.0;
    var aLength = a.length;
    for (var i = 0; i < aLength; ++i)
      r += a[i] * b[i];
    return r;
  };

  var cross = function(a, b) {
    return [a[1] * b[2] - a[2] * b[1],
      a[2] * b[0] - a[0] * b[2],
      a[0] * b[1] - a[1] * b[0]
    ];
  };

  var normalize = function(a) {
    var r = [];
    var n = 0.0;
    var aLength = a.length;
    for (var i = 0; i < aLength; ++i)
      n += a[i] * a[i];
    n = Math.sqrt(n);
    if (n > 0.00001) {
      for (var i = 0; i < aLength; ++i)
        r[i] = a[i] / n;
    } else {
      r = [0, 0, 0];
    }
    return r;
  };

  var transformPoint = function(m, v) {
    var v0 = v[0];
    var v1 = v[1];
    var v2 = v[2];
    var d = v0 * m[0 * 4 + 3] + v1 * m[1 * 4 + 3] + v2 * m[2 * 4 + 3] + m[3 * 4 + 3];
    return [(v0 * m[0 * 4 + 0] + v1 * m[1 * 4 + 0] + v2 * m[2 * 4 + 0] + m[3 * 4 + 0]) / d,
      (v0 * m[0 * 4 + 1] + v1 * m[1 * 4 + 1] + v2 * m[2 * 4 + 1] + m[3 * 4 + 1]) / d,
      (v0 * m[0 * 4 + 2] + v1 * m[1 * 4 + 2] + v2 * m[2 * 4 + 2] + m[3 * 4 + 2]) / d
    ];
  };

  var identity = function() {
    return [
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
    ];
  };

  var multiplyMatrix = function(a, b) {
    var a00 = a[0 * 4 + 0];
    var a01 = a[0 * 4 + 1];
    var a02 = a[0 * 4 + 2];
    var a03 = a[0 * 4 + 3];
    var a10 = a[1 * 4 + 0];
    var a11 = a[1 * 4 + 1];
    var a12 = a[1 * 4 + 2];
    var a13 = a[1 * 4 + 3];
    var a20 = a[2 * 4 + 0];
    var a21 = a[2 * 4 + 1];
    var a22 = a[2 * 4 + 2];
    var a23 = a[2 * 4 + 3];
    var a30 = a[3 * 4 + 0];
    var a31 = a[3 * 4 + 1];
    var a32 = a[3 * 4 + 2];
    var a33 = a[3 * 4 + 3];
    var b00 = b[0 * 4 + 0];
    var b01 = b[0 * 4 + 1];
    var b02 = b[0 * 4 + 2];
    var b03 = b[0 * 4 + 3];
    var b10 = b[1 * 4 + 0];
    var b11 = b[1 * 4 + 1];
    var b12 = b[1 * 4 + 2];
    var b13 = b[1 * 4 + 3];
    var b20 = b[2 * 4 + 0];
    var b21 = b[2 * 4 + 1];
    var b22 = b[2 * 4 + 2];
    var b23 = b[2 * 4 + 3];
    var b30 = b[3 * 4 + 0];
    var b31 = b[3 * 4 + 1];
    var b32 = b[3 * 4 + 2];
    var b33 = b[3 * 4 + 3];
    return [a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30,
      a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31,
      a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32,
      a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33,
      a10 * b00 + a11 * b10 + a12 * b20 + a13 * b30,
      a10 * b01 + a11 * b11 + a12 * b21 + a13 * b31,
      a10 * b02 + a11 * b12 + a12 * b22 + a13 * b32,
      a10 * b03 + a11 * b13 + a12 * b23 + a13 * b33,
      a20 * b00 + a21 * b10 + a22 * b20 + a23 * b30,
      a20 * b01 + a21 * b11 + a22 * b21 + a23 * b31,
      a20 * b02 + a21 * b12 + a22 * b22 + a23 * b32,
      a20 * b03 + a21 * b13 + a22 * b23 + a23 * b33,
      a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30,
      a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31,
      a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32,
      a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33
    ];
  };

  var inverse = function(m) {
    var tmp_0 = m[2 * 4 + 2] * m[3 * 4 + 3];
    var tmp_1 = m[3 * 4 + 2] * m[2 * 4 + 3];
    var tmp_2 = m[1 * 4 + 2] * m[3 * 4 + 3];
    var tmp_3 = m[3 * 4 + 2] * m[1 * 4 + 3];
    var tmp_4 = m[1 * 4 + 2] * m[2 * 4 + 3];
    var tmp_5 = m[2 * 4 + 2] * m[1 * 4 + 3];
    var tmp_6 = m[0 * 4 + 2] * m[3 * 4 + 3];
    var tmp_7 = m[3 * 4 + 2] * m[0 * 4 + 3];
    var tmp_8 = m[0 * 4 + 2] * m[2 * 4 + 3];
    var tmp_9 = m[2 * 4 + 2] * m[0 * 4 + 3];
    var tmp_10 = m[0 * 4 + 2] * m[1 * 4 + 3];
    var tmp_11 = m[1 * 4 + 2] * m[0 * 4 + 3];
    var tmp_12 = m[2 * 4 + 0] * m[3 * 4 + 1];
    var tmp_13 = m[3 * 4 + 0] * m[2 * 4 + 1];
    var tmp_14 = m[1 * 4 + 0] * m[3 * 4 + 1];
    var tmp_15 = m[3 * 4 + 0] * m[1 * 4 + 1];
    var tmp_16 = m[1 * 4 + 0] * m[2 * 4 + 1];
    var tmp_17 = m[2 * 4 + 0] * m[1 * 4 + 1];
    var tmp_18 = m[0 * 4 + 0] * m[3 * 4 + 1];
    var tmp_19 = m[3 * 4 + 0] * m[0 * 4 + 1];
    var tmp_20 = m[0 * 4 + 0] * m[2 * 4 + 1];
    var tmp_21 = m[2 * 4 + 0] * m[0 * 4 + 1];
    var tmp_22 = m[0 * 4 + 0] * m[1 * 4 + 1];
    var tmp_23 = m[1 * 4 + 0] * m[0 * 4 + 1];

    var t0 = (tmp_0 * m[1 * 4 + 1] + tmp_3 * m[2 * 4 + 1] + tmp_4 * m[3 * 4 + 1]) -
      (tmp_1 * m[1 * 4 + 1] + tmp_2 * m[2 * 4 + 1] + tmp_5 * m[3 * 4 + 1]);
    var t1 = (tmp_1 * m[0 * 4 + 1] + tmp_6 * m[2 * 4 + 1] + tmp_9 * m[3 * 4 + 1]) -
      (tmp_0 * m[0 * 4 + 1] + tmp_7 * m[2 * 4 + 1] + tmp_8 * m[3 * 4 + 1]);
    var t2 = (tmp_2 * m[0 * 4 + 1] + tmp_7 * m[1 * 4 + 1] + tmp_10 * m[3 * 4 + 1]) -
      (tmp_3 * m[0 * 4 + 1] + tmp_6 * m[1 * 4 + 1] + tmp_11 * m[3 * 4 + 1]);
    var t3 = (tmp_5 * m[0 * 4 + 1] + tmp_8 * m[1 * 4 + 1] + tmp_11 * m[2 * 4 + 1]) -
      (tmp_4 * m[0 * 4 + 1] + tmp_9 * m[1 * 4 + 1] + tmp_10 * m[2 * 4 + 1]);

    var d = 1.0 / (m[0 * 4 + 0] * t0 + m[1 * 4 + 0] * t1 + m[2 * 4 + 0] * t2 + m[3 * 4 + 0] * t3);

    return [d * t0, d * t1, d * t2, d * t3,
      d * ((tmp_1 * m[1 * 4 + 0] + tmp_2 * m[2 * 4 + 0] + tmp_5 * m[3 * 4 + 0]) -
        (tmp_0 * m[1 * 4 + 0] + tmp_3 * m[2 * 4 + 0] + tmp_4 * m[3 * 4 + 0])),
      d * ((tmp_0 * m[0 * 4 + 0] + tmp_7 * m[2 * 4 + 0] + tmp_8 * m[3 * 4 + 0]) -
        (tmp_1 * m[0 * 4 + 0] + tmp_6 * m[2 * 4 + 0] + tmp_9 * m[3 * 4 + 0])),
      d * ((tmp_3 * m[0 * 4 + 0] + tmp_6 * m[1 * 4 + 0] + tmp_11 * m[3 * 4 + 0]) -
        (tmp_2 * m[0 * 4 + 0] + tmp_7 * m[1 * 4 + 0] + tmp_10 * m[3 * 4 + 0])),
      d * ((tmp_4 * m[0 * 4 + 0] + tmp_9 * m[1 * 4 + 0] + tmp_10 * m[2 * 4 + 0]) -
        (tmp_5 * m[0 * 4 + 0] + tmp_8 * m[1 * 4 + 0] + tmp_11 * m[2 * 4 + 0])),
      d * ((tmp_12 * m[1 * 4 + 3] + tmp_15 * m[2 * 4 + 3] + tmp_16 * m[3 * 4 + 3]) -
        (tmp_13 * m[1 * 4 + 3] + tmp_14 * m[2 * 4 + 3] + tmp_17 * m[3 * 4 + 3])),
      d * ((tmp_13 * m[0 * 4 + 3] + tmp_18 * m[2 * 4 + 3] + tmp_21 * m[3 * 4 + 3]) -
        (tmp_12 * m[0 * 4 + 3] + tmp_19 * m[2 * 4 + 3] + tmp_20 * m[3 * 4 + 3])),
      d * ((tmp_14 * m[0 * 4 + 3] + tmp_19 * m[1 * 4 + 3] + tmp_22 * m[3 * 4 + 3]) -
        (tmp_15 * m[0 * 4 + 3] + tmp_18 * m[1 * 4 + 3] + tmp_23 * m[3 * 4 + 3])),
      d * ((tmp_17 * m[0 * 4 + 3] + tmp_20 * m[1 * 4 + 3] + tmp_23 * m[2 * 4 + 3]) -
        (tmp_16 * m[0 * 4 + 3] + tmp_21 * m[1 * 4 + 3] + tmp_22 * m[2 * 4 + 3])),
      d * ((tmp_14 * m[2 * 4 + 2] + tmp_17 * m[3 * 4 + 2] + tmp_13 * m[1 * 4 + 2]) -
        (tmp_16 * m[3 * 4 + 2] + tmp_12 * m[1 * 4 + 2] + tmp_15 * m[2 * 4 + 2])),
      d * ((tmp_20 * m[3 * 4 + 2] + tmp_12 * m[0 * 4 + 2] + tmp_19 * m[2 * 4 + 2]) -
        (tmp_18 * m[2 * 4 + 2] + tmp_21 * m[3 * 4 + 2] + tmp_13 * m[0 * 4 + 2])),
      d * ((tmp_18 * m[1 * 4 + 2] + tmp_23 * m[3 * 4 + 2] + tmp_15 * m[0 * 4 + 2]) -
        (tmp_22 * m[3 * 4 + 2] + tmp_14 * m[0 * 4 + 2] + tmp_19 * m[1 * 4 + 2])),
      d * ((tmp_22 * m[2 * 4 + 2] + tmp_16 * m[0 * 4 + 2] + tmp_21 * m[1 * 4 + 2]) -
        (tmp_20 * m[1 * 4 + 2] + tmp_23 * m[2 * 4 + 2] + tmp_17 * m[0 * 4 + 2]))
    ];
  };

  var perspective = function(angle, aspect, near, far) {
    var f = Math.tan(Math.PI * 0.5 - 0.5 * angle);
    var rangeInv = 1.0 / (near - far);

    return [
      f / aspect, 0, 0, 0,
      0, f, 0, 0,
      0, 0, (near + far) * rangeInv, -1,
      0, 0, near * far * rangeInv * 2, 0
    ];
  };

  var cameraLookAt = function(eye, target, up) {
    var vz = normalize(subVector(eye, target));
    var vx = normalize(cross(up, vz));
    var vy = cross(vz, vx);

    return inverse([
      vx[0], vx[1], vx[2], 0,
      vy[0], vy[1], vy[2], 0,
      vz[0], vz[1], vz[2], 0, -dot(vx, eye), -dot(vy, eye), -dot(vz, eye), 1
    ]);
  };

  var lookAt = function(eye, target, up) {
    return inverse(cameraLookAt(
      eye, target, up));
  };

  function ortho(left, right, bottom, top, near, far) {
    return [
      2 / (right - left), 0, 0, 0,
      0, 2 / (top - bottom), 0, 0,
      0, 0, -1 / (far - near), 0,
      (right + left) / (left - right),
      (top + bottom) / (bottom - top), -near / (near - far),
      1,
    ];
  }

  return {
    identity: identity,
    perspective: perspective,
    cameraLookAt: cameraLookAt,
    lookAt: lookAt,
    multiplyMatrix: multiplyMatrix,
    transformPoint: transformPoint,
    ortho: ortho,
  };

})();


      var m=ThreeDMath;
      window.onload=main;
      function main() {
      var cubeVertices=[ 
       -1, -1, -1,  // 0
        1, -1, -1,  // 1
        1,  1, -1,  // 2
       -1,  1, -1,  // 3
       -1, -1,  1,  // 4
        1, -1,  1,  // 5
        1,  1,  1,  // 6
       -1,  1,  1,  // 7
      // 
      // making some points in the middle for letters
      //
      -.5, -.5,   0,  // 8     8 +--+ 9
      -.3, -.5,   0,  // 9       |
      -.5, -.4,   0,  // 10   10 +--+ 11
      -.3, -.4,   0,  // 11      |
      -.5, -.3,   0,  // 12   12 +

      //           15
      .3,   0,  .3,  // 13   13 +-+-+ 14
      .5,   0,  .3,  // 14        |
      .4,   0,  .3,  // 15        |
      .4,   0,  .5,  // 16        + 16

      0, -.5, -.5,  // 17   17 +---+ 18 
      0, -.5,  .5,  // 18      |   |
      0,  .5, -.5,  // 19   20 +---+ 21
      0,   0, -.5,  // 20      | \
      0,   0,  .5,  // 21      |  \
      0,  .5,  .5,  // 22   19 +   + 22

    ];
    var indices=[ 
      0, 1,
      1, 2,
      2, 3,
      3, 0,
      4, 5,
      5, 6,
      6, 7,
      7, 4,
      0, 4,
      1, 5,
      2, 6,
      3, 7,

      // f / front
      8, 9,
      8, 12,
      10, 11,

      // t / top
      13, 14,
      15, 16,

      // r / right
      17, 18,
      18, 21,
      17, 19,
      20, 21,
      20, 22,
    ];
      var canvas=document.getElementById("c");
      var ctx=canvas.getContext("2d");
      var then=0;
      function render(clock) {
      clock *=0.001;
      var scale=2;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
      ctx.lineWidth=1;
      ctx.strokeStyle="black";
      var fieldOfView=Math.PI * 0.25;
      var aspect=canvas.clientWidth / canvas.clientHeight;
      var projection=m.perspective(fieldOfView, aspect, 1, 500);
      var radius=5;
      var eye=[ Math.sin(clock) * radius, 1, Math.cos(clock) * radius];
    var target=[0, 0, 0];
    var up=[0, 1, 0];
    // left, right, bottom, top, near, far
    var projection = m.ortho(-2 * aspect, 2 * aspect, -2, 2, -2, 2);
    switch (clock % 4 | 0) {
        // front
      case 0:
        var eye = [0, 0, 1];
        var target = [0, 0, 0];
        var up = [0, 1, 0];
        break;
        // right
      case 1:
        var eye = [1, 0, 0];
        var target = [0, 0, 0];
        var up = [0, 1, 0];
        break;
        // top
      case 2:
        var eye = [0, 1, 0];
        var target = [0, 0, 0];
        var up = [0, 0, -1];
        break;
      case 3:
        var eye = [Math.sin(clock), 1, Math.cos(clock)];
        var target = [0, 0, 0];
        var up = [0, 1, 0];
        break;
    }
    var view=m.lookAt(eye, target, up);
    var worldViewProjection=m.multiplyMatrix(view, projection);
    drawLines(cubeVertices, indices, worldViewProjection);
    ctx.restore();
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
  function drawLines(cubeVertices, indices, worldViewProjection) {
    ctx.beginPath();
    // transform points
    var points=[];
    for (var ii=0;
         ii < cubeVertices.length;
         ii +=3) {
      points.push(clipSpaceToCanvasSpace(m.transformPoint( worldViewProjection, [
        cubeVertices[ii + 0], cubeVertices[ii + 1], cubeVertices[ii + 2]])));
    }
    for (var ii=0;
         ii < indices.length;
         ii +=2) {
      var p0=points[indices[ii + 0]];
      var p1=points[indices[ii + 1]];
      ctx.moveTo(p0[0], p0[1]);
      ctx.lineTo(p1[0], p1[1]);
    }
    ctx.stroke();
  }
  // clip space is -1 to 1
  function clipSpaceToCanvasSpace(p) {
    return [
      (p[0] + 1) * ctx.canvas.width  / 2,
      (p[1] + 1) * ctx.canvas.height / 2,
    ];
  }
}

<canvas id="c"></canvas>

话虽如此，您没有理由需要使用该正交矩阵。如果您不使用它，您的单位将停留在它们开始的位置。换句话说，正交矩阵的唯一点是将 l<->r、t<->b、f<->n 缩放到 -1<->+1。您可能不需要任何缩放，或者需要缩放到其他一些单位。