2D 渲染 - 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 等迭代渲染，也可以非常方便的编写粒子系统以及流体模拟等动画渲染程序。

蓝紫™ - 开发接口

JS 接口 canvasfs canvascs canvasps canvas2d canvasgl canvas

目前，蓝紫对 2D 渲染（CanvasRenderingContext2D）没有做过多的封装和扩展，我们可以使用原生 API 进行二维（甚至三维）绘图和渲染（这些 API 已经设计的非常棒了），特别适合矢量图形绘制，当然，也可以进行三维渲染。可参考向导程序函数曲线绘制，该程序使用的就是 canvas2d 进行的渲染。

一、初始化

const canvas = Lan.canvas2d(1800, 1200, {options...});

我们可以在 options 里传入一些配置参数：

alpha：boolean，如果设置为 false 可以加速绘制透明的内容和图片；
willReadFrequently：boolean，是否需要高频率读取（getImageData）图像内容。

二、接口属性 • CONTEXT

原生 CanvasRenderingContext2D 对象。

三、接口方法 • clear([color])

重置 transform、globalAlpha 以及 globalCompositeOperation 并执行图像清除操作。如果没有提供 color 参数，画布会被清除为全透明。这里的 color 可以是字符串，比如 'black'、'#fff'、'rgba(255,255,255,.5)'，也可以是数组或对象，比如 [255, 0, 0]、{r:255, a:.5}，同时，它也可以是一个函数，其形式如下：

(px, py) => {
  var r = 0, g = 0, b = 0; // calculate color components
  return [r, g, b];
};

传入像素坐标，返回颜色值，比如 [128, 255, 255] 或 {r:255, a:128}。

• measureText(text[, font])

测量文字的各种尺寸，返回 TextMetrics 对象。其中 font 参数可选。

• circle(x, y, radius)

缺省的 arc 函数至少需要 5 个参数，不方便画圆。