无法从tut代码中理解光线投射数学

Question

请原谅我，因为我对数学的无知。我还没有找到任何可以帮助我的消息来源我不会打开这个话题

我想在javascript中创建一个简单的光线投射引擎，我处理的是瓷砖系统，它不是很难，我以前有过这方面的经验。

我的来源http://www.permadi.com/tutorial/raycast/index.html 和 http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

我的问题是理解大部分的数学，我理解他使用的一些触发（在第二个链接中），但我并不准备他的大部分光线投射。

喜欢这一行： // where on the screen does ray go through?

    `var rayScreenPos = (-numRays/2 + i) * stripWidth;`

是什么？ xy坐下？ lins在屏幕上？

castSingleRay我理解一些数学但不是slop或＆＃34;垂直地图/墙线＆＃34;他正在谈论。

我需要学习什么来理解它？在数学或编程方面有哪些主题？我可以下载的任何好书还是在线资源？

Answer 1

如何理解基本光线投射的最佳方法是阅读整个that great article。

无论如何，你所谈论的等式来自step 3 finding walls。作为part about FOV（视野）解释，结果图像可能被分为垂直部分（在opera教程中称为条带），它们在px中可能具有不同的大小（opera教程使用4px宽度）。

然后你试图找出屏幕上的x坐标是px中的当前条带（当前用于光线投影计算的条带）。这是rayScreenPos变量。您可以通过左x轴边界x确定值（{p {1}}位置以进行调用）（根据查看您的中间条纹，而不是最左边的条纹！） ）加上当前条纹-numRays/2，乘以条带大小i。

然后，您可以轻松计算距离计算出的条纹的观看者距离。所以你将使用毕达哥拉斯定理并计算stripWidth。

修改

我的第一个光线跟踪器花了我几个星期的实施（所以我理解你的绝望），但之后只需点击就位。观众我的意思是“相机的位置”。在opera dev tut中，FOV = 60，stripeSize = 4px，则射线数为numberOfStripesInImage = sizeOfImage / sizeOfSplice - ＆gt; 320/4 - ＆gt; 80射线..然后第一个rayScreenPos是（-80/2 + 0）* 4 - > -160是中间条纹相对于屏幕中心的x位置（视图在屏幕中央看）

Answer 2

检查我的教程。我正在尝试为所有内容创建一个完美的解释。我没有为此使用硬渲染方法或硬逻辑。我正在研究RayCasting逻辑并仅选择简单的事情，因为对我而言，简单是最好的！我认为这会对您有所帮助。

单击here以访问该教程。它在github Wiki中。