蓝紫™ v1.4.3
DDZEB 完全自主知识产权图形图像开发平台
在线运行 实时渲染 立即开启
蓝紫™ - Hello World

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

一、Hello World
在线运行结果 蓝紫程序代码
二、向导程序
canvasfs 向导程序 canvascs 向导程序 canvasps 向导程序 canvas2d 向导程序 canvasgl 向导程序 canvasraw 向导程序
三、后记 一、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 向导程序
域翘曲
二维域翘曲渲染，2D WebGL Domain Warping rendering，鼠标点击关闭 2.5D 渲染。
元胞自动机
Celluar Automaton，在一个网格上定义细胞/元胞，根据一组基于相邻单元状态的规则，通过多个离散的时间步长进行细胞演化。
KIFS 分形
二维 KIFS 分形，万花筒似的效果。我们对源纹理图片进行了缩放预处理，这样可以消除输出噪音。另外，本程序使用了两个 @run，第一个实际上就已经画出分形图像了，第二个是根据梯度添加 2.5D 光照效果而已。
流体模拟
计算流体模拟，通过对每个点施加一个速度进行动画渲染。速度场的计算可以自行调整，结果可以呈现出非物理特性的动画效果。
步进追踪
三维光线步进追踪渲染，3D WebGL ray-marching，出于 demo 的目的，使用了自定义的 uniform 变量。
路径追踪
全局光照路径追踪，Path-tracing with GI (Global Illumination)。路径追踪就像人生，一路走一路捡拾阳光，碰壁了就反思一下。
折射
结构化的路径追踪（Path-tracing）全局光照（GI）渲染，解析求交（可以改为 SDF 建模），对折射进行了处理，同时手动处理渐进渲染以及进行色调映射（Tone mapping）。
SSS
次表面散射（SSS，Subsurface Scattering）一般都是通过计算 density 来映射颜色，DDZEB 设计了一种新算法，我们通过累积 local volume color 的方法进行次表面散射的直接计算。
2.2、canvascs 向导程序
Mandelbrot
WebGPU 渲染曼德布罗特（Mandelbrot）集合，轨道陷阱技术分形造型。
光线追踪
基于 WebGPU 的光线追踪渲染，出于 demo 的目的，使用了自定义的 uniform 变量。本程序中的基本造型是一个 Gyroid，也就是 dot(cos(z),sin(z.yzx)，然后与一个球体求交。
Flame 分形
基于迭代函数系统（IFS）渲染 Flame 分形。
图像处理计算
使用 WebGPU 进行并行图像处理（Component Stretch）并取得统计数据，鼠标点击图片查看前后效果对比。
粒子系统
粒子系统（Particle System），可并行处理大量粒子。我们在这个程序里使用 Perlin 噪声的梯度作为速度场（Field），同时再加上一些其它速度控制分量。
神经元胞
WebGPU Neural Cellular Automaton，对细胞进行卷积以及激活函数处理，标准的神经网络流程。
2.3、canvasps 向导程序
二维渲染
Pure JS 2D rendering，这个完全不是 canvasps 的强项，稍微复杂一点的渲染就不可能做到实时动画了。
图像处理
使用 Pixel Shader 进行图像处理，让图片看起来更“酷”，鼠标点击图片查看前后效果对比。
双缓冲架构
经典的双缓冲动画渲染技术，作为一种动画渲染模式，经常被作为各类渲染引擎的底层基础架构。
生命游戏
生命游戏（Game of Life），参考：https://conwaylife.com。可用鼠标在画布上制造“噪音”打破平衡。
粒子系统
可交互的粒子系统（Particle System），实时处理 6 万个粒子。
点云渲染
在 bi-unit cube 内生成点云并渲染，使用 glMatrix 进行 MVP 投影变换。我们还可以在动画过程中让点发生移动，以及赋予每一个点更多的属性控制。
2.4、canvas2d 向导程序
基本 2D 动画
二维画布渲染动画
文字动画
二维画布渲染文字动画，与文字相关的渲染最好的选择就是 canvas2d，虽然蓝紫的其它渲染也能做，但都不是很方便。
粒子系统
2D 画布渲染粒子系统，网格化粒子，少许物理特性模拟。
三维几何体
二维画布渲染三维模型线框，手动投影变换（Projection Transform），也可以使用 glMatrix 进行矩阵变换。
随机行走
随机行走（Random Walk），一种早期的经典生命模拟，我们有时候也用随机行走制造分形几何体，包括山脉河流等自然对象。
交互式画布
交互绘图，中心对称图案。可以将画布放大用心仔细画，会画出非常漂亮的图案哦。有满意的作品别忘了将图片导出保存到电脑上...
2.5、canvasgl 向导程序
立方体
WebGL Shader 渲染，使用 glMatrix 方便矩阵变换。
OpenGL ES 300
OpenGL ES 300，无需编写 Vertex Shader（蓝紫自动生成），程序更简洁，可读性更强。
Cubemap
WebGL Cubemap 映射，使用六张图片进行天空盒环境映射。
多程序串行
多个 Program 串行执行（Multipass Rendering）
光线追踪
WebGL 光线追踪，基于解析求交算法。
渐进渲染
静态图像渐进渲染技术，使用一个累积缓冲区不断累积数据，平均之后输出到屏幕，图像质量随时间而逐渐变得更细腻。
2.6、canvasraw 向导程序
Three.js 几何体渲染
导入 Three.js 渲染三维场景，构造平面网格，动画过程中将网格顶点进行位移渲染动画。
Three.js 着色器
Three.js 配合 Shader 进行动画渲染，画面效果莫名的喜感...
蓝紫 lits 光线传播渲染
蓝紫自主开发的二维光线传播库 lits 渲染，lits 源代码请从蓝紫接口文档查看。
Matter.js 物理仿真
使用 matter.js 进行二维实体对象物理仿真
函数曲线
使用蓝紫二维函数渲染库（curve.js）绘制函数曲线
三、后记

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