蓝紫™ 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 等迭代渲染,也可以非常方便的编写粒子系统以及流体模拟等动画渲染程序。
蓝紫™ - 集成指南一、集成概述 二、集成接口一、集成概述

我们可以很容易的将编写好的蓝紫程序集成到自己的网站上,比如将程序集成到 jsFiddleCodepen 平台上。蓝紫的内核引擎(Lands/core)包含了蓝紫基础设施以及六个渲染引擎,但体积却非常小,只有 20kB 左右的传输量,无论是桌面版还是移动端 H5 页面都可以轻松加载。

<canvas id="canvas"></canvas>
<script>
const source = `
$js
const canvas = await Lan.canvasfs(750, 500, {
  preludes : 'base'
});
Lan.loop(canvas.render);

$fs
@run {
  FLUSH(vec3(abs(UVx2 * rot2(uTime * .5)), 0).xzy);
}
`;

import('//ddzeb.com/lands/core').then((ddzeb) => {
  ddzeb.Lands(source, canvas));
});
</script>
查看 Codepen 集成 Demo:Basic Lands Integration

其中,source 为我们编写的蓝紫程序源代码,我们可以直接写在页面里,也可以通过 Ajax 获取。以下是另外一种方式:

<canvas id="canvas"></canvas>
<script id="source" type="ddzeb-lands">
  // Lands program source code ...
</script>

<script>
import('//ddzeb.com/lands/core').then((ddzeb) => {
  ddzeb.Lands(source, canvas));
});
</script>
查看 jsFiddle 集成 Demo:3D WebGL Ray-tracing

或者也可以通过给 script 标签指定 src 来加载代码。这几种方式都可以,具体采用什么方法取决于个人偏好。

二、集成接口

如果需要显示日志或对程序运行进行控制等,我们可以使用集成接口进行深度集成。首先,生成一个蓝紫对象,设置好需要使用的回调函数,然后运行程序:

import('//ddzeb.com/lands/core').then((ddzeb) => {
  const lands = ddzeb.Lands();
  lands.onlog = (msg) => {
    ......
  };
  lands.run(code, document.getElementById('display'));
});
async lands.run(source, canvas)

运行程序,其中 source 为程序源代码,也可以是包含程序源代码的某个 HtmlElement

lands.pause()

暂停程序运行

lands.resume()

恢复运行

lands.stop(callback)

结束运行,结束之后调用 callback。

lands.onlog = (msg) => {}

写程序运行日志回调

lands.onfps = (fps, time_elapsed, frame_number) => {}

帧率回调