• 蓝紫集成开发

  const canvas = await Lan.flame(900, 600, {options...});

• 第三方集成

  import {flame} from "https://ddzeb.com/lands/flame";

  const {flame} = await import("https://ddzeb.com/lands/flame");

Flame 算法是一种非常重要的分形艺术渲染算法，著名的分形艺术软件 Apophysis 的核心算法就是 Fractal Flame Algorithm，它实际上是属于迭代函数系统（IFS）分形算法。全球有大量的 Flame 分形艺术作品，可以说已经形成了一个独特的门派。

如此重要的数字视觉渲染算法，蓝紫平台当然要提供支持。基于 WebGPU 的渲染引擎 compute 因为支持随机写操作，可以非常快速的渲染 Flame 分形。但还是有几个问题，一是 WebGPU 还未被广泛支持，二是 WGSL 语法实在让人受不了。没有 ?: 选择符，缺少函数重载机制，在调用 Variation 的时候非常麻烦。另外，毕竟 compute 引擎是一个通用的渲染引擎，不是专门为 flame 渲染而准备的。所以我们决定使用 WebGL 开发一个专门针对 Flame 渲染的引擎。

蓝紫 flame 引擎设计得非常简洁漂亮，我们将最繁重的工作都放到了 GPU 中进行处理，只有极少的计算是在 CPU 上完成的，这样的目的是充分发挥 GPU 的性能优势。

在 $JS 代码段里，采用标准的蓝紫渲染引擎初始化方法进行 flame 渲染初始化：

const canvas = await Lan.flame(width, height, {options...});
Lan.loop(canvas.render);

通过全局变量 Lan 调取 flame 引擎进行初始化，参数包括画布宽高以及一些渲染选项。以下重点介绍 options 参数：

配置调色板的选项，如果没有配置，我们缺省调取 P123 调色班数据。最简单的配置方法是传入调色板编号：

{palette : 'P123'}

当我们想对调色板进行一些调整的时候，就需要稍微复杂一点的配置方式：

{
  palette : {source:'P123', freq:2, tran:0.5},
}

其中，source 不言而喻，freq 指定调色板的重复频率，相当于对调色板进行拉伸或压缩，tran 参数对调色板进行偏移。

Flame 渲染里最繁重的工作就是迭代，一个点经过不断迭代变换位置，从而在图像上留下印记。threads 参数控制同时有多少个点进行迭代，缺省为 200000 个。对于性能好一点的电脑，同时上百万的点进行迭代也没有问题，这样渲染的速度就会更快。

在 Flame 算法中，一个随机生成的点在迭代最初阶段不进行打点着色，skitter 参数指定需要跳过的迭代次数，缺省为 20 次。

该参数控制一个点最多进行多少次迭代，缺省为 500 次。超过迭代次数之后，重新初始化数据进行迭代。

当迭代次数大于 skitter 之后，进入真正的渲染。每次迭代产生的点可能不在视口范围内。在每次迭代过程中，我们使用 itertry 进行多次尝试，希望能得到一个视口内的点。itertry 缺省为 200 次。

渲染参数，主要用于生产级输出。

• speed：渲染（累积）速度，缺省为 1。速度越慢，渲染越细腻；
• pixel：像素大小，缺省为 1，大于 1 时进行超采样；
• flush：刷新间隔，单位为秒，缺省值为 1；
• check：目标 density，达到后停止渲染，缺省不检查。

初始化后，canvas 附加一些接口用于 flame 渲染。

该接口用于渲染图像，我们需要循环往复的调用该接口进行迭代渲染。

const canvas = await Lan.flame(900, 600, {
  palette : 'P123',
});
Lan.loop(canvas.render);

用于销毁我们申请的资源，在蓝紫程序里无需调用，我们会自动销毁资源。

编写 flame 程序主要的工作就是编写 Shader 程序。一个 flame 渲染程序可以有一个 $VS 段以及一个 $FS 段，$VS 段对应 Vertex Shader，而 $FS 段则对应 Fragment Shader。Vertex Shader 负责迭代，而 Fragment Shader 负责颜色处理。在 Shader 程序中，我们可以通过 #include 指令调取蓝紫的 GLSL 标准库，比如：

$vs
#include flame, complex

无论是 $VS 还是 $FS 均可，多个扩展库可使用半角逗号和或空格进行分隔，也可以采用多个 #include 指令来完成。除了导入蓝紫的 GLSL 标准库，也可以导入第三方的外部库，只需要指定绝对全局地址即可。引入 GLSL 开发库的 #include 指令不一定非要写在程序开头，但不能写在函数体内。

以下是所有 Shader 程序都具有的一些常量以及函数，相当于 Shader 基础设施。

• PI：float，3.14159265358979323846
• PI_2：float，PI / 2；
• PI_4：float，PI / 4；
• TAU：float，PI * 2；
• rand()：生成 [0, 1) 之间均匀分布随机数；
• randInt(int m)：生成 [0, m - 1] 之间均匀分布随机整数；

在 $VS 代码中，我们需要实现一个 iterate 函数进行迭代。另外，我们可以选择性的实现 project 函数，它用于坐标投影。

该函数有两个参数，一个是迭代变量 z，另一个是颜色变量 c，它们均为 inout 方式传参。

作为可选项，我们可以实现一个投影函数。因为我们的迭代全部是在三维空间中进行，最后需要投影到二维屏幕上，所以需要一个投影函数，缺省的投影函数直接取 xy 坐标：

vec2 project(vec3 z) {
  return z.xy;
}

实际上，我们可以在 project 函数里做更多的工作，比如进行视口（viewport）变换或者景深模糊（DoF Blur）等。

vec2 project(vec3 z) {
  return z.xy * 2.0;
}

通常情况下，我们不需要编写 $FS 代码，除非我们想对颜色进行一些调整和控制，比如调整色调或进行 Gamma 校正。

• DX：float，画布宽度；
• DY：float，画布高度；
• float logDensity(float w)：对数密度映射函数，log(w) / log(max_density)；
• float powDensity(float w, float power)：指数密度映射函数，pow(w, power) / pow(max_density, power)。

这是 $FS 代码的核心函数，display 函数输出的颜色即是画布上最终呈现的颜色。我们可以根据需要实现自己的 display 函数，引擎缺省的 display 函数如下：

vec4 display(vec3 c, float w) {
  float a = logDensity(w); // calculate alpha based on pixel density
  return vec4(c * a, 1); // blend with vec4(0,0,0,1)
}

缺省情况下，我们使用 log density 算法计算 alpha 值，然后与纯黑色不透明背景进行颜色混合。