javascript - 从简单的光线投射渲染器中移除鱼眼效果

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

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

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

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

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

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

标签： javascriptcanvas2drenderingfisheye