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

【问题标题】：Why do streaks appear in my ray marching rendering?为什么我的光线行进渲染中会出现条纹？
【发布时间】：2019-04-12 04:36:37
【问题描述】：

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

一切正常，但结果中有条纹，我不知道为什么。 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);

        }
    }
})();

【问题讨论】：

jsfiddle.net/ctt5k9qx/3 看起来好一点，所以我会看看你的颜色公式

标签： javascript 3d raytracing

【解决方案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 时，分配失败（可能是由于该属性的画布设置器函数中的有效性检查正在寻找完整的RGB 十六进制值，例如#000 或#000000）并且它是而是保留现有值。这就是您看到条纹的原因 - 它重复了它获得的最后一个“有效”颜色分配。

【讨论】：