蓝紫™ v1.4.3
DDZEB 完全自主知识产权图形图像开发平台
在线运行 实时渲染
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 等迭代渲染,也可以非常方便的编写粒子系统以及流体模拟等动画渲染程序。
蓝紫™ - Hello World

按照惯例,我们编写了一个简单的 Hello World 程序。另外,蓝紫还有一系列的向导程序,每一个渲染引擎下均可以通过向导程序来了解该引擎的一些使用方法。接下来,让我们和世界打声招呼吧。

一、Hello World二、向导程序三、后记 一、Hello World

与大部分 Hello World 程序比较起来,我们这里的 Hello World 看起来稍显复杂。本来可以做一个更简单的例子,比如渲染一个平面的效果而不是立体的,或者最简单的情况下,输出纯色。但图形图像的世界总是离不开三维,掌握三维光线追踪基本技术是很有必要的。渲染经典的立方体,差不多就是图形图像领域的 Hello World 了。

1.1、在线运行结果
蓝紫程序加载中 ...
立方体光线追踪渲染运行源代码
1.2、蓝紫程序代码
$js
const canvas = await Lan.canvasfs({
  preludes : 'base,rays,int3',
  textures : 'C1,T2',
});
Lan.loop(canvas.render);

$fs
@run @target(screen) render directly to screen {
  // camera
  vec3 ro = vec3(2.5, 1, 0), rd = rayDir(vec3(UVx2, 1.5), ro);

  // intersection
  mat3 mt = rot3(vec3(uTime * .15, uTime * .1, 0));
  vec4 it = intBox(ro, rd, vec3(.4), mt);

  // shading
  if (it.x > 0.) {
    vec3 n = texBump(texture1, ro + rd * it.x, it.yzw, 3e-4);
    rd = reflect(rd, n);
  }
  FLUSH(texture(texture0, rd));
}

作为一个 Hello World 程序,我们已经尽量让代码简单一点了,但还是有二十来行。其中包含了一点点 JavaScript 以及大部分的 GLSL 着色器代码。整体来说还算比较简单,至少是很容易学会的。

二、向导程序

蓝紫目前总共有六种渲染引擎,它们分别使用各自独有的编程模型。比如,canvasfs 引擎是基于 WebGL 的像素渲染引擎。我们为每一个渲染引擎提供了一些向导程序,使用向导程序可以部分了解该渲染引擎的特性,或者作为一个模版开始我们自己的渲染程序开发。

2.1、canvasfs 向导程序2.2、canvascs 向导程序2.3、canvasps 向导程序2.4、canvas2d 向导程序2.5、canvasgl 向导程序2.6、canvasraw 向导程序三、后记

蓝紫的能力远不止这些向导程序所能展示,我们可以使用蓝紫进行各类图形图像相关的处理计算以及创意渲染。要真正做出有趣的作品,首先需要一个好的创意,然后才是选择合适的渲染引擎。蓝紫作为一个基础平台,目标是尽量为渲染提供基础功能支持,让渲染程序更加稳健,让渲染开发尽量简单。