Loading...
墨滴

张春成

2021/10/18  阅读:79  主题:默认主题

云雾效果

云雾效果

本文是在之前“等高线图”的基础上, 开发了一个类似“云雾效果”或“封冻效果”的渲染生成方法。


效果演示

电影或视频作品里,经常出现一种类似云雾弥散或冰晶生长的动画渲染效果

【这是一段棒到不行的视频】

本文提供了一种可行的,性能还说得过去的渲染算法。 它是基于我之前做的,一个自动计算等高线图的小玩意。

等高线图回顾

在给定一些具有“高度”的点的情况下, 我的工程[1] 可以基于这些点, 自动生成一张“等高线”的连续图

Contour Map
Contour Map

其中,上图中的圆点代表数据点; 下图代表由这些点生成的等高线连续图; 上图中隐隐约约的线,代表生成等高线图的辅助风格。

基于这些辅助网格,我们就可以生成想要的云雾渲染效果。

云雾渲染方法

为了达到目的,需要按照如下顺序进行处理:

  1. 提取等高线图的特定高度值;

  2. 在该高度值上,绘制连续的“主干”;

    Fog Thin
    Fog Thin
  3. 渲染区沿“主干”向周边“生长”,模拟云雾散开的效果。

    Fog Fat
    Fog Fat

在渲染“生长”的过程中,我们可以指定一个连续变量, 该变量控制生长区域远离“主干”的距离。 由于该变量的连续性,我们可以自由控制生长幅度, 达到自主控制生长程度的效果。

然而,本算法的计算量还是比较大的。 为了达到在前端进行实时计算并渲染的目的, 本工程使用JavaScript进行计算, 并使用REGL工具进行实时渲染。

源码可见我的在线笔记本[2]

友情提示,虽然我做了一些优化, 但计算量还是较大。 因此,如果你所使用的设备内存过小, 它是有可能无法分配足够内存的, 当然,这通常可以通过调小order参数来解决。

参考资料

[1]

我的工程: https://mp.weixin.qq.com/s?__biz=MzkxNTI1MDc5NA==&mid=2247484594&idx=1&sn=a0fa115e3c0f6e38969d33f8a9f3489d&chksm=c1634fb7f614c6a12c9e3b476b9ce0d320761218ce412347b71f2ca15d3c0ce20b8aca67cb1b&token=923285203&lang=zh_CN#rd

[2]

在线笔记本: https://observablehq.com/@listenzcc/fog-effect

张春成

2021/10/18  阅读:79  主题:默认主题

作者介绍

张春成