蓝紫™
DDZEB 完全自主知识产权图形图像开发平台
在线运行实时渲染
2024-01-24
基于 GPU 的渲染引擎 canvasfs 以及 canvascs 增加自动后期处理选项,目前包括:自动白平衡、自动对比度、自动饱和度以及色彩增强等 基于全局统计 的后期处理操作。
2023-12-30
调色板支持上线,内置资源提供大量调色板供使用。所有的编程模型均支持 colormap 资源调用,包括 WebGL(canvasfs)、WebGPU(canvascs)以及 Pixel Shader(canvasps),具体使用方法及示例代码请参考相应的 API 文档。
2023-12-17
JS 接口提供音频加载(播放)功能,内置资源增加了少量音频资源。动画配合上音频,会产生更加强烈的现场感。
2023-12-09
提供 Cubemap 以及 HDRI 纹理,canvasfs 附加库提供相应函数支持。样例 Demo 程序 HDRI Mapping 有使用参考。
2023-09-18
蓝紫 WebGPU 渲染引擎 canvascs 正式发布上线。有了 WebGPU 渲染支持,就可以很直接的实现 Buddhabrot、Flame 等迭代渲染,也可以非常方便的编写粒子系统以及流体模拟等动画渲染程序。
蓝紫™ - 开发接口

这是蓝紫非常重要的一种渲染画布,它与 canvasps 一样同属于像素着色画布,它们满足同一个渲染模型:

color(p) = f(px, py)

也就是说,我们的渲染程序需要根据画布上每一个点的坐标给出颜色。这样的渲染模型看起来就是一个二维渲染范式,但实际上,我们可以很容易的实现三维渲染,前提是我们手动放置相机以及处理投射关系。

一、JS 接口

一般情况下,我们需要一段 JS 程序作为主控程序,另外就是一系列的 Fragment Shader 在 GPU 上运行,用于实际的渲染。JS 主控程序负责初始化画布,并调取可能使用到的纹理等等资源。

const canvas = await Lan.canvasfs(width, height, options);

一个典型的 JS 主控程序如下:

const canvas = await Lan.canvasfs(1800, 1200, {
  preludes : 'base,cmpx',
  replaces : {from:'to'},
  displays : 'rgbc,gw,rm,ls,cs,ss,ce',
  textures : ['T02', {source:'T03', mipmap:true}],
  texflipy : true,
  colormap : 'M1,M2'
});
await Lan.loop(canvas.render);

初始化画布之后,除了常规的画布接口,我们得到的 canvas 对象还具有如下几个额外接口:

1.1、canvas.render(ts = 0, ds = 0, fm = 0, dt = 0)

该接口为渲染接口,通常我们会调用 Lan.loop(canvas.render) 来进行持续的动画渲染,当然,我们也可以直接调用 canvas.render 来渲染某一帧画面。参数与 Lan.loop 需要的参数一致:

二、GLSL

FS 程序可以是一个,也可以是多个,它们按照顺序执行。我们的主要工作就是编写 FS 程序进行实际的渲染,也就是提供编程范式中的 f 函数,基本形式有如下几种:

mainFS 就是我们编程范式中的函数 f,它返回一个 vec4(r, g, b, a) 表示渲染结果颜色,通常我们会返回一个不透明的颜色,也就是其中的 alpha 通道值为 1.0。在我们的渲染器中,我们可以通过 uniform 变量进行渲染控制,比如通过 uTime/uDate 变量进行动画控制。蓝紫提供的 uniform 变量包括:

三、扩展库

我们可以通过 preludes 加载扩展库,蓝紫内置了几个常用的扩展库,用于一些特定的场景。比如,base 提供一些常用操作,cmpx 提供二维复数操作。加载扩展库可以有如下几种方式:

preludes : 'base,pale,/lib/url'
preludes : ['base,pale', '/lib/url']

以下是蓝紫内置的 GLSL 扩展库,可直接通过名称导入,名称不区分大小写:

四、渐进渲染

options.displays = 'rgbc' 的时候,可用于渐进渲染。这里所说的渐进渲染,特指颜色累加后平均的情况。我们使用 alpha 通道(color.w)来存储累加次数,而 color.rgb 是实际累加的颜色。在显示的时候渲染的颜色为 vec4(color.rgb / color.w, 1),alpha 通道恒为 1。

五、纹理加载

通过在 options 参数里指定 textures 可以加载纹理,可以有如下几种方式:

textures : 'T01,T02'
textures : {source:'V01', mipmap:true, mute:false}
textures : ['T01', {source:'T02', blur:8}]

其中的 blur 是专门针对图片模糊处理的选项,参见向导程序:KIFS 分形。加载 HDRI 或 Cubemap 也是同样的方式:

textures : 'H01,C01'

除了可以将图像、视频加载为纹理外,还可以将音频加载为纹理:

textures : 'A01'
textures : {source:'.....', audio:true, loop:true}

当 source 设置为 'camera' 时,我们会试着打开设备的照相机:

textures : 'camera'
textures : {source:'camera'}

我们还可以将一个 HTMLCanvasElement 作为纹理源,当 live 为 true 时,会实时更新,具体情况请参考示例程序:Canvas Texture

textures : {source:canvas_element, live:true}
六、调色板

蓝紫内置资源中有调色板支持,我们可以在 options 中指定调色板(colormap),然后通过 base 附加库中的 colormap 函数获取颜色。目前 canvasfs 最多可以同时加载 3 个调色板,使用代码请参考官方 Demo:WebGL Colormaps

七、后期处理

除了在 displays 参数里设置 rgbc 渐进渲染模式以外,还可以指定后期处理选项,目前支持的操作如下:

八、字符替换

options 里指定 replaces 项,可在 WGSL 代码中进行字符串替换操作。

{
  replaces : {NUMBER1:1000},
}

通过这样的设定,GLSL 代码中所有的 NUMBER1 都将被替换为 1000