p5js WEBGL模式渲染立方体边缘出现鱼眼效果变形问题咨询

使用p5js进行WEBGL模式开发时，仅通过translate做坐标变换生成一排等大立方体，未执行任何旋转操作，但画面边缘的立方体出现类似鱼眼镜头的弯曲变形，立方体边缘无法完美对齐。
效果截图：

复现代码：

function setup() {
    createCanvas(800, 850, WEBGL);
    angleMode(DEGREES);
  }
  
  function draw() {
    // 设置背景色
    background("#ece5d8");

    // 不填充面，仅绘制线框
    noFill();
    // 设置描边颜色为黑色
    stroke(0);

    push();
      // 从画布左侧位置开始绘制
      translate(-200, 0, 0);

      // 循环生成立方体
      for (let i = 0; i < 10; i++) {
        push();
          translate(i * 150, 0, 0);
          box(150);
        pop();
      }
    pop();
  }

这是p5js WEBGL模式默认投影规则的正常表现，不是代码bug：

• p5js的WEBGL渲染器默认使用透视投影相机，成像逻辑和人眼、普通相机一致，本身就存在「视场边缘物体拉伸变形、平行线向消失点汇聚」的透视效果，和是否调用旋转操作没有关系。
• 默认透视相机的视场角（FOV）较大，上述代码生成的10个立方体横向排布总长度达1500像素，大部分立方体落在视场边缘区域，因此边缘的弯曲畸变会格外明显，视觉上类似鱼眼效果。

根据视觉需求二选一即可：

• 若需要完全消除变形、保持所有立方体线条平行对齐，换用正交投影：在setup()的createCanvas后调用ortho()方法即可，可根据物体排布范围自定义正交投影的可视边界，避免物体被裁切，示例：

  function setup() {
    createCanvas(800, 850, WEBGL);
    angleMode(DEGREES);
    // 启用正交投影，设置可视范围
    ortho(-width/2, width/2, -height/2, height/2, 0, 5000);
  }
  

• 若需要保留透视投影的近大远小真实感，可通过两个调整弱化边缘畸变：一是调用perspective()减小相机视场角，二是调用camera()把相机位置向后拉远，让整排立方体尽量落在视场中心区域，示例：

  function setup() {
    createCanvas(800, 850, WEBGL);
    angleMode(DEGREES);
    // 设置更小的视场角，减弱边缘畸变
    perspective(30 * PI / 180, width/height, 0.1, 5000);
  }
  
  function draw() {
    background("#ece5d8");
    noFill();
    stroke(0);
    // 相机沿Z轴后移，让整排立方体完整进入视野
    camera(0, 0, 2200);
  
    push();
      translate(-200, 0, 0);
      for (let i = 0; i < 10; i++) {
        push();
          translate(i * 150, 0, 0);
          box(150);
        pop();
      }
    pop();
  }
  

内容的提问来源于stack exchange，提问作者Orsu