Javascript 从简单光线投射渲染器中删除鱼眼效果

我正在做一个自导项目，它涉及到从粒子中投射出一定数量的光线，用户可以在给定的角度范围内移动，用户可以操纵。然后我提出两件事：

A） 粒子在其世界中的图像，显示粒子本身、它投射的光线以及光线与之碰撞的任何边界

B） 2d场景的渲染，其中边界（在A部分中由线表示）应渲染为墙

最后，我计划调整这些墙的亮度和高度，以表示距离。墙越远，它应该越暗越小。目前，距离与高度成正比，这导致了鱼眼效应。虽然我知道这种影响是从哪里来的，但我不想要它，而且我完全不知道如何消除它。我还没有实现与距离相关的亮度，但这没关系，因为我认为鱼眼效果在亮度下看起来更自然

我只使用HTMLCanvas元素和JS做所有的事情，尽管这与问题并不完全相关。我的问题更多的是关于消除鱼眼效应所涉及的数学问题。有人能提供我需要做什么来消除鱼眼效应的见解吗？墙的高度仍应根据其与粒子的距离而变化，但我希望墙的顶部边缘在渲染中保持笔直

我的测试实现中的一张图片作为效果示例：

---

我正在寻找一个函数，可以反转鱼眼效应，或者一个函数，可以让我计算来自粒子的光线的必要间距（因为问题源于光线以一定角度均匀分布）。在这里，我们来处理代码，如果您希望我们能够帮助您，请在您的问题中包括一些。此外，你确定你的比例因子是正确的吗？它对透视效果好吗？看起来这个图像可能是由一个非常大的因素产生的。我正在寻找一个函数，可以反转鱼眼效应，或者一个函数，可以让我计算来自粒子的光线的必要间距（因为问题源于光线以一个角度均匀分布）。在这里，我们来处理代码，如果您希望我们能够帮助您，请在您的问题中包括一些。此外，你确定你的比例因子是正确的吗？它对透视效果好吗？看起来这个图像可能是由一个非常大的因素产生的。