This is a very important type of rendering canvas of all the Lands canvas types. canvasfs is a pixel shading model, which follows a simple pattern:

color(p) = f(px, py)

Which means, we need to calculate the color for every pixel on the canvas. This is a 2D rendering pattern, but we can also use it to render 3D scenes as long as we handle the camera and projection manually.

Generally, we need some JS code as the main control program. And all the others would be Fragment Shader programs. All the fragment shader programs run on GPU, and that makes the whole rendering fast. The JS program initializes the canvas, and loads textures, then starts the animation loop. Following is a typical JS program:

const canvas = await Lan.canvasfs(1800, 1200, {
  preludes : 'base,cmpx',
  displays : 'rgbc',
  textures : ['$T02'],
  texflipy : true
});
Lan.loop(canvas.render, canvas.finish);

Where, preludes field declares which utility libs to load. Lands provides serveral utility libs for different purposes. For example, base is for common operations, and cmpx is for compex number operations. Check out the source code:

• base: common operations and constants
• pale: palette related functions
• cmpx: 2D complex number operations
• hash: noise functions
• quat: quaternion number operations
• sdf2: 2D SDF functions
• sdf3: 3D SDF functions
• rays: 3D Ray Tracing functions

After we initialize the canvas with canvasfs, we get some extra APIs from the canvas:

We usually call Lan.loop(canvas.render) to render the animation continuously. And of course we can just call canvas.render to render a certain frame.

This method is used to load a texture into the program. Lands has some built-in texture resources, and you can also load a texture file from the Internet as long as it's publicly available.

This interface is a resource release interface, which is usually called after rendering to release resources such as buffers and textures. You can also directly put this interface into the second parameter of Lan.loop for calling after the loop ends:

Lan.loop(canvas.render, canvas.finish);

We can write a single FS program or multiple FS programs to render. The FS programs execute one by one. Our major work is to write FS programs, which define the f function in the rendering pattern.

• vec4 mainFS()
• vec4 mainFS(float x, float y)
• vec4 mainFS(vec2 uv)
• vec4 mainFS(ivec2 p)

mainFS defines the function f in the rendering pattern, which returns a vec4(r, g, b, a) as the color of the pixel. Most of the time, alpha channel is 1.0, which means totally opaque. In our rendering program, we have serval uniform variables. We can use them to control the rendering. For example, we can use uTime/uDate to make and control the animation.

• uTime: float, Time Elapsed
• uDate: float, Current Time
• uResolution: vec2, Resolution of the Canvas
• uFrame: int, Frame Number, Starts from Zero
• uBuffer[x]: sampler2D, Fragment Shader Buffers
• uTexture[x]: sampler2D, Textures Loaded
• uMouse: vec3, Mouse state

Here the Progressive Rendering refers to the situation where colors are averaged after accumulation. We use the alpha channel (color.w) to store the number of accumulations, and color.rgb is the actual accumulated color. The final color displayed on the screen is vec4(color.rgb / color.w, 1), and the alpha channel is always 1.