为什么条纹出现在我的光线行进渲染中？

Question

我正在尝试实施光线行进算法。 有一个球体，相机正在看它。

一切正常，但结果中有条纹，我不明白为什么。 Jsfiddle：link

图像：

代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// position and radius of the sphere
var cx = 100;
var cy = 100;
var cz = 100;
var cr = 50;

// direction of the marching 
var dx = 0;
var dy = 0;
var dz = 1;

// maximum steps, and distance
var MaximumRaySteps = 50;
var MinimumDistance = .005;

// calculating the distance from the surface of the sphere
var DistanceEstimator = function(x, y, z) {
    var a=x-cx;
    var b=y-cy;
    var c=z-cz;

    var dist = Math.sqrt(a*a + b*b + c*c);

    return dist-cr;
};

// calculate shading on a pixel (1=white, 0=black)
var trace = function(x, y) {
    var totalDistance = 0.0;
    var steps;
    for (steps=0; steps < MaximumRaySteps; steps++) {
        var distance = DistanceEstimator(x, y, totalDistance);
        totalDistance += distance;
        if (distance < MinimumDistance) {
            break;
        }
    }
    return 1.0-steps/MaximumRaySteps;
};

// iterate over the pixels
(function() {
    for(var y=0; y<200; y++) {
        for(var x=0; x<200; x++) {
            ctx.fillStyle = '#'+(Math.floor(trace(x,y)*0xFF)*0x010101).toString(16);
            ctx.fillRect(x,y,1,1);

        }
    }
})();

Answer 1

这会删除你的条纹，这有助于清理发生的事情：

(function() {
    for(var y=0; y<200; y++) {
        for(var x=0; x<200; x++) {
            ctx.fillStyle = '#000000';
            ctx.fillStyle = '#'+(Math.floor(trace(x,y)*0xFF)*0x010101).toString(16);
            ctx.fillRect(x,y,1,1);
        }
    }
})();

您的颜色计算产生#0。当您尝试将该值分配给ctx.fillStyle时，分配失败（可能是由于该属性的canvas setter函数中的有效性检查正在查找完整的RGB十六进制值，例如#000或{{ 1}}）并且它坚持现有的价值。这就是为什么你会看到条纹 - 它重复最后一次有效的＆＃39;它得到的颜色分配。