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

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 或 #000000)，它会保留现有值。这就是您看到条纹的原因 - 它在重复上次获得的 'valid' 颜色分配。

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

Why do streaks appear in my ray marching rendering?

javascript

3d

raytracing