javascript - 如何扩大光华的半径？

Question

我正在编写软件过滤器对象并尝试实现光晕效果。我使用的是一种简单的两遍卷积方法，它工作正常，只是效果半径很小而且我似乎无法控制半径。我玩过更大的盒子过滤器并调整了各种像素的权重，但这些似乎都没有任何效果。效果似乎有一个最大尺寸(不是很大)，然后对参数的所有更改只会使其变小。

我希望能够创建具有任意半径的光晕。经过大量实验和在线搜索后，我开始怀疑这是否无法完成。我一直在考虑替代方法——等 ionic 、梯度和各种播种方案——但我想先找到这条路。有谁知道如何创建任意大小的光晕(在软件中)？

javascript 如下(在 HTML5 Canvas 上运行；如果需要，我可以在代码中添加注释):

// the kernel functions are called via Array.map on this.backBuffer.data, a canvas surface color array
this.kernelFirstPass = function(val, index, array)
{
    if(index<pitch || index>=array.length-pitch || index%pitch<4 || index%pitch>pitch-5 || index%4==3)
        return;
    var c = 1,
        l1 = 1,
        l2 = 1,
        l3 = 1,
        r1 = 1,
        r2 = 1,
        r3 = 1;
    var avg =
    (
        c*this.frontBuffer.data[index]+
        l1*this.frontBuffer.data[index-4]+
        l2*this.frontBuffer.data[index-8]+
        l3*this.frontBuffer.data[index-12]+
        l1*this.frontBuffer.data[index+4]+
        l2*this.frontBuffer.data[index+8]+
        l3*this.frontBuffer.data[index+12]
    )/(c+l1+l2+l3+l1+l2+l3);
    //this.frontBuffer.data[index] = avg;
    array[index] = avg;
}
this.kernelSecondPass = function(val, index, array)
{
    if(index<pitch || index>=array.length-pitch || index%pitch<4 || index%pitch>=pitch-4 || index%4==3)
        return;
    var c = 1,
        l1 = 1,
        l2 = 1,
        l3 = 1,
        r1 = 1,
        r2 = 1,
        r3 = 1;
    var avg =
    (
        c*array[index]+
        l1*array[index-pitch]+
        l2*array[index-(pitch*2)]+
        l3*array[index-(pitch*3)]+
        l1*array[index+pitch]+
        l2*array[index+(pitch*2)]+
        l3*array[index+(pitch*3)]
    )/(c+l1+l2+l3+l1+l2+l3);
    array[index] = avg;
}

---

也许我在最初的问题中遗漏了一个重要的点，那就是解释我并没有试图模拟任何真实或特定的现象(我称之为“光”绽放可能无济于事)。可能是，在处理真实的光现象时，为了获得任意半径的半影，您需要一个任意半径的光源(即“完全饱和区域”)。如果那真的是真正的光华表现的方式，那么 Jim 和 tskuzzy 的解释似乎是模拟它的合理方法。无论如何，这不是我想要完成的。我想独立于大小/强度/等来控制绽放的“渐变”部分的半径。的来源。我希望能够在屏幕中央设置一个单一的白色(最大值)像素，并让光晕长到我想要的程度，长到屏幕边缘或超出我的感觉.

Answer 1

为了达到好的bloom效果，你应该使用high-dynamic range rendering .否则，您的白色将不够亮。

这是因为像素亮度通常在 [0,1] 范围内表示。因此，最大亮度被限制为 1。但是在现实世界中，并没有真正的最大值。虽然真正明亮的灯光都被视为“1”，但像光晕这样的视觉副作用并不相同。

所以你要做的是让真正明亮的区域超过最大亮度，至少对于布隆卷积来说是这样。然后在进行渲染时，根据需要限制值。

完成后，您应该能够通过增加 Airy disk 的大小来增加光晕半径。用于卷积。