Javascript 基于网格的照明引擎

我正在尝试使用JavaScript创建一个基于网格的阴影引擎。我的算法根据正方形相对于光源的位置是否在块的“后面”对其进行着色

这是我目前的算法：

var canvas=document.createElement（'canvas'）；
画布宽度=600；
画布高度=400；
document.body.appendChild（画布）；
var ctx=canvas.getContext（'2d'）；
var light_x=90；
var light_y=110；
var block_x=120；
var块y=120；
请求动画帧（渲染）；
函数render（）{
ctx.fillStyle='白色'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
var vec1_x=块_x-灯光_x；
var vec1_y=块_y-光_y；
var vec1_mag=Math.sqrt（vec1_x*vec1_x+vec1_y*vec1_y）；
ctx.fillStyle='黑色'；
对于（变量x=0；x向量1_-mag和角度

不幸的是，正如您在演示中所看到的，我发现一些角度存在问题。一些应该着色的正方形没有着色。这种情况会发生在某些角度和距离（光源和块之间）上，而不会发生在其他角度和距离上。例如，将光源放置在（60,90）也会显示这些瑕疵

我使用向量LP（从灯光到点）和LB（从灯光到块），取它们的点积，除以它们的大小的乘积，找到着色角度，然后根据块和光源之间的距离缩放该角度

---

这些伪影可能是由于舍入错误造成的吗？还是算法本身有问题？任何帮助都将不胜感激：-）

好问题。你不会喜欢这个的

这是一个浮点数学问题

Math.acos（1.000000000000000）

的值是多少

0

Math.acos（1.0000000000000003）

的值是多少

NaN

那很烦人，不是吗

在某些值下，您的

dotproduct

为

6000

，而您的

（vec1\u mag*vec2\u mag）

为

5999.99999999999

，导致上述问题

将

（vec1\u mag*vec2\u mag）

更改为

Math.round（vec1\u mag*vec2\u mag）

将解决您的问题

当我们一起盯着这把小提琴时你应该知道还有一个bug：

for (var x = 0; x < canvas.width; x += 10) {
    for (var y = 0; y < canvas.width; y += 10) {

for（变量x=0；x

您在这里使用了两次

canvas.width

。我想第二个应该是

canvas.height

，所以请确保您在那里写的是您想要的

---

非常感谢！这解决了问题（实际上是两个问题）。当参数超出范围时，数学函数似乎不会发出警告。这会使调试变得更容易。舍入错误过去给我带来很多麻烦！

for (var x = 0; x < canvas.width; x += 10) {
    for (var y = 0; y < canvas.width; y += 10) {