-1

提前原谅我对数学的无知。我没有找到任何可以帮助我的资源，否则我不会打开这个话题

我想用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;`

pos什么的？xy坐标？屏幕上的lins？

castSingleRay我了解一些数学，但不了解他所说的倾斜或“垂直地图/墙线”。

我需要学习什么才能理解它？数学或编程有哪些主题？我可以下载任何好书或在线资源吗？

4

2 回答 2

0

理解基本光线投射的最佳方式就是阅读那篇很棒的文章。

无论如何，您正在谈论的方程式来自第 3 步找到墙壁。正如关于FOV（视野）的部分解释，结果图像可能被分成垂直部分（在opera教程中称为strips），其大小可能以px为单位（opera教程使用4px宽度）。

然后，您试图找出x屏幕上的哪个坐标是您当前的 px 条带（您当前用于光线投射计算的条带）。这就是rayScreenPos变数。您可以通过取左轴边界（作为查看器，您正在寻找中间条纹，而不是最左边的！）加上当前条纹，乘以像素大小的条纹大小来确定值（x以 px 为单位的位置）。x-numRays/2istripWidth

然后，您可以轻松地计算出与刚刚计算的条纹的观看者距离。因此，您将使用勾股定理并计算rayViewDist.

编辑

我的第一个光线追踪器花了我几个星期的时间实施（所以我理解你的绝望），但在那之后一切都到位了。通过查看器，我的意思是“相机的位置”。在opera dev tut中是FOV = 60，stripeSize = 4px，那么光线的数量是numberOfStripesInImage = sizeOfImage / sizeOfSplice -> 320/4 -> 80条光线。那么第一条rayScreenPos是(-80/2 + 0) * 4 -> -160，这是相对于中间条纹屏幕中心的 x 位置（视图在屏幕中心查看）

于 2013-02-11T13:00:53.037 回答
0

检查我的教程。我正在努力为所有事情创造一个完美的解释。我没有为此使用硬渲染方法或硬逻辑。我正在研究 RayCasting 逻辑并选择简单的东西，因为对我来说，简单就是最好的！我想它会对你有所帮助。

单击此处访问教程。它在 github wiki 中。

在此处输入图像描述

于 2019-10-10T16:30:32.900 回答