蓝紫™ v1.4.3
DDZEB 完全自主知识产权图形图像开发平台
在线运行 实时渲染
2024-06-06
二维函数渲染库 curve.js 发布,内置常用的 OpenGL 函数,比如 smoothstep 等,我们可以使用这个库很方便的设计各种函数曲线。示例程序请参考:Wave Fading
2024-03-16
基于 GLSL 语言的渲染引擎 canvasfs 增加对模版函数的支持,详情请参考:蓝紫 GLSL 模版函数。这是一项非常重要也非常实用的技术,我们在标准库中实现了许多模版函数,大大提高了编码效率。
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 等迭代渲染,也可以非常方便的编写粒子系统以及流体模拟等动画渲染程序。
蓝紫™ - 开发接口一、画布初始化 二、程序接口三、资源接口四、其它接口一、画布初始化

蓝紫程序的一切都从唯一的全局变量 Lan 开始,我们通常是使用 Lan.canvasxx 方法初始化画布,然后开始绘制。

const canvas = Lan.canvasxx(width, height, options)

我们也可以将 widthheight 写在 options 中,比如:

const canvas = Lan.canvasfs({width:900, height:600, ...})

如果未指定 widthheight,我们会采用 Canvas 元素样式宽高,同时参考其 scale 属性:

<canvas scale="2" style="width:600;height:400"><canvas>

这时候,计算得到的宽度为 600 x 2 = 1200,高度为 400 x 2 = 800。这样的处理方式对于我们集成蓝紫程序到第三方平台进行自动宽高处理非常有帮助,具体请参考我们在 jsFiddle 上的例子:蓝紫向导程序 - Fluid

无论采用哪种渲染引擎初始化画布,返回的 canvas 对象都会有一些公共属性:

画布初始化接口的参数基本是都是 (width, height, options) 这样的形式,我们也可以将 widthheight 写在 options 参数里:

const canvas = Lan.canvasxx({
  width  : 900, 
  height : 600, 
  ...
})

每一种渲染引擎的画布初始化方法请参考对应的文档了解详情。

二、程序接口 async Lan.loop(callback, options = {maxframes:0})

该方法用于循环执行,通常用于渲染动画或执行其它重复操作,maxframes 控制最多循环次数,或者当 callback 函数返回 false 的时候也会结束循环。回调函数 callback 形式如下:

callback(loop)

其中,参数 loop 是一个 JSON 对象,具有如下属性:

Lan.log(msg)

写程序运行日志

async Lan.import(lib)

导入 JS 程序库,前提是该库必须是一个标准的 Module。比如 Lan.import('three') 用于引入 three.js 库。也可以通过 URL 地址导入外部 JS 库,比如:Lan.import('https://...')。以下是蓝紫缺省提供的 JS 库,可直接通过名称导入,名称不区分大小写:

三、资源接口 async Lan.file()

选择本地文件,比如,选择一个图像,然后可以使用该图像进行各种操作。返回文件对象(File)并附加如下属性和方法:

async Lan.colormap(url)

加载 colormap 资源,使用代码参考官方 Demo:Pixel Shader Colormaps。该函数返回一个数组:

const colors = [[r0, g0, b0], [r1, g1, b1], ... [r255, g255, b255]];
colors.get = (colval, [multiply = 1]) => {r, g, b};

其中,get 函数将 colval 映射为一个 {r, g, b},可以通过传入 multiply 对输出颜色调整为 rgb255 颜色。

async Lan.audio(url, [options = {play:true, loop:true}])

加载并播放音频文件,返回 Audio 对象,同时附加如下属性和方法:

async Lan.image(url)

加载图像,返回 ImageData 对象,并附加如下属性及方法:

由于 CanvasRenderingContext2D.drawImage 不支持 ImageData 数据源,如果需要在 canvas2d 渲染引擎里使用 drawImage 函数渲染 ImageData,可以使用 await createImageBitmap 先将 ImageData 转换为 ImageBitmap 对象。

async Lan.video(url, options = {mute:true, loop:true})

加载视频,返回 Video 对象,附加如下属性:

async Lan.camera(options = {})

打开摄像头,返回 Video 对象,附加如下属性:

通过 options 可以指定一些参数:

const camera = Lan.camera({
  width  : 1280, 
  height : 720
})
const camera = Lan.camera({
  width  : { min: 1280 },
  height : { min: 720 },
})
const camera = Lan.camera({
  width  : { ideal: 1280 },
  height : { ideal: 720 },
})
四、其它接口 Lan.mouse(options = {flipy:false})

我们可以使用本接口取得鼠标设备状态,options.flipy 控制是否将 Y 方向坐标翻转。const mouse = Lan.mouse(),返回对象有如下属性:

当用户未与 Canvas 产生交互的时候,坐标值为 undefined。鼠标交互接口具体使用方法可参考 canvasps 引擎向导程序 粒子系统。我们可以直接在返回的 mouse 对象上为画布配置鼠标交互处理器:

具体使用方法,请参考蓝紫 canvas2d 引擎的向导程序:交互式画布

Lan.gaussian(radius)

我们可以使用本接口生成一个高斯卷积核,返回对象是一个正方形的二维数组 kernel[][],每一个元素均为一个浮点数,所有数字相加等于 1。附加属性及方法如下:

具体使用示例,请参考 Gaussian Kernel