基于Jos Stam论文的流体模拟：如何消除流体周围灰色轮廓？

核心问题分析 #

你遇到的灰色轮廓，本质是渲染逻辑错误：将RGB密度数组的值直接作为绝对颜色值输出，导致流体衰减时生成低于背景色的深色（比如白色背景下输出(128,0,0)暗红色），而非通过透明度过渡到背景。

正确渲染方案（支持透明/任意背景） #

思路 #

将RGB密度视为流体颜色的强度贡献，用总密度控制Alpha通道，让流体颜色通过透明度与背景自然混合，而非直接输出绝对颜色值。

代码实现 #

const imageData = this.CTX.createImageData(this.WIDTH, this.HEIGHT)

for (let x = 1; x <= this.WIDTH; x++) {
    for (let y = 1; y <= this.HEIGHT; y++) {
        const idx = this.index(x, y)
        const r = this.r[idx]
        const g = this.g[idx]
        const b = this.b[idx]
        const totalDensity = r + g + b
        const pixelIdx = ((y - 1) * this.WIDTH + (x - 1)) * 4

        // 过滤密度为0的像素，直接透明
        if (totalDensity <= 0) {
            imageData.data[pixelIdx] = 0
            imageData.data[pixelIdx + 1] = 0
            imageData.data[pixelIdx + 2] = 0
            imageData.data[pixelIdx + 3] = 0
            continue
        }

        // 归一化RGB到饱和颜色（确保流体颜色鲜艳）
        const normR = Math.round((Math.min(r, 255) / totalDensity) * 255)
        const normG = Math.round((Math.min(g, 255) / totalDensity) * 255)
        const normB = Math.round((Math.min(b, 255) / totalDensity) * 255)

        // Alpha通道取总密度的最大值（不超过255）
        const alpha = Math.min(totalDensity, 255)

        // 写入像素数据
        imageData.data[pixelIdx] = normR
        imageData.data[pixelIdx + 1] = normG
        imageData.data[pixelIdx + 2] = normB
        imageData.data[pixelIdx + 3] = alpha
    }
}

this.CTX.putImageData(imageData, 0, 0)

关键细节 #

1. 归一化RGB：确保流体颜色始终饱和，避免出现暗淡的中间色，从根源解决灰色轮廓问题。
2. Alpha控制透明度：总密度决定流体的不透明度，密度越低越透明，自然融入任意背景（白色、图片、自定义颜色均可）。
3. 处理零密度像素：直接设为完全透明，既减少不必要计算，又保证Canvas透明区域正常显示底层背景。

额外优化建议 #

• 确保模拟中密度数组数值非负：Jos Stam的流体模拟中，密度扩散/对流步骤可能出现数值波动，可添加Math.max(densityValue, 0)避免负密度导致的异常颜色。
• 适配大密度范围：如果你的模拟中密度值超过255，可将Alpha设为(totalDensity / maxPossibleDensity) * 255，保证透明度映射逻辑正确。

内容的提问来源于stack exchange，提问作者Aly Shukry