Question

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

到目前为止，这是我的算法：https://jsfiddle.net/jexqpfLf/

var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var light_x = 90;
var light_y = 110;

var block_x = 120;
var block_y = 120;

requestAnimationFrame(render);
function render() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    var vec1_x = block_x - light_x;
    var vec1_y = block_y - light_y;
    var vec1_mag = Math.sqrt(vec1_x * vec1_x + vec1_y * vec1_y);

    ctx.fillStyle = 'black';
    for (var x = 0; x < canvas.width; x += 10)
        for (var y = 0; y < canvas.width; y += 10) {
            var vec2_x = x - light_x;
            var vec2_y = y - light_y;
            var vec2_mag = Math.sqrt(vec2_x * vec2_x + vec2_y * vec2_y);
            var dotproduct = vec1_x * vec2_x + vec1_y * vec2_y;

            var angle = Math.acos(dotproduct / (vec1_mag * vec2_mag));

            if (vec2_mag > vec1_mag && angle < Math.PI / 8 / vec1_mag * 10)
                ctx.fillRect(x, y, 10, 10);
        }

    ctx.fillStyle = 'green';
    ctx.fillRect(light_x, light_y, 10, 10);

    ctx.fillStyle = 'red';
    ctx.fillRect(block_x, block_y, 10, 10);

    requestAnimationFrame(render);
}

onkeydown = function (e) {
    if (e.which == 65)
        light_x -= 10;
    if (e.which == 68)
        light_x += 10;
    if (e.which == 87)
        light_y -= 10;
    if (e.which == 83)
        light_y += 10;
}

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

我正在使用矢量LP（从光到点）和LB（从光到块），取其点积并除以它们的幅度乘积来找到阴影角度，然后根据距离缩放此角度块和光源之间。

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

Answer 1

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

这是一个浮点数学问题。

Math.acos(1.000000000000000)的价值是什么？

0。

什么是Math.acos(1.0000000000000003)的价值？

NaN。

这很烦人，不是吗？

根据某些值，您的dotproduct为6000而(vec1_mag * vec2_mag)为5999.999999999999，导致上述问题。

将(vec1_mag * vec2_mag)更改为Math.round(vec1_mag * vec2_mag)将解决您的问题。

虽然我们一起盯着这个小提琴但你应该知道还有另一个错误：

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

您在这里使用canvas.width两次。我想第二个应该是canvas.height，所以要确保你写的是你想要的。

Working fiddle for you!

基于网格的照明引擎

1 个答案: