蓝紫™ 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 等迭代渲染,也可以非常方便的编写粒子系统以及流体模拟等动画渲染程序。
蓝紫™ - 开发接口

Pixel Shader,一种比较简单的画布,我们在一个像素阵列上进行计算和操作。这种计算模型很简单,同时也很方便。我们经常使用 canvasps 进行图像分析和处理,比如 Histogram Equalization。

canvasps 里的颜色均是 rgb255,颜色可以使用 json 格式,比如 {r:100, g:200, b:120, a:255},也可以使用数组,比如:[100, 200, 120]。缺省情况下,alpha 默认为 255,其它缺少的分量默认为 0。

一、初始化
const canvas = Lan.canvasps(1800, 1200);
const canvas = Lan.canvasps({width:1800, height:1200});
二、接口方法

以下是 canvasps 提供的 API 集合:

• image()

返回图像数据(ImageData)附加如下属性:

• copy([dest])

将当前图像数据(ImageData)拷贝到 dest 并返回新的图像数据对象,dest 参数可选。使用该方法可以实现双缓冲架构。返回的 ImageData 对象附加如下属性:

• get(x, y)

获得某个点的像素值(颜色):{r, g, b, a},超出图片范围时返回 undefined

• set(color[, x, y])

设置颜色,不刷新画布。指定 x 以及 y 即对某个特定点进行操作。

• add(color[, x, y])

执行颜色加操作,不刷新画布。指定 x 以及 y 即对某个特定点进行操作。

• mix(color[, x, y])

alpha 分量混合颜色,不刷新画布。指定 x 以及 y 即对某个特定点进行操作。当 color.alpha = 255 的时候相当于 set 操作,当 color.alpha = 0 时不会对当前图像数据产生任何影响。

• draw(shader, options = {})

渲染整个画布,shader = (x, y) => color。逐像素应用 shader 进行渲染,缺省情况刷新画布,设置 options.norefresh 可以不刷新画布。

• renderer(shader, options = {})

返回渲染器,按照指定方向逐列或者逐行渐进渲染。通常我们会将返回的渲染器传入 Lan.loop 进行循环渲染。其中,options 可配置项如下:

• refresh([data])

如果 data 有效,设置图像数据,然后刷新显示。data 可以是 Image 或者 ImageData 类型,且宽高与画布宽高一致。