原生 WebGL 2.0，对 WebGL2RenderingContext 的底层封装，可以编写顶点着色器以及片元着色器进行渲染，具体可参考蓝紫官方样例：Rotating Cube。我们对 WebGL 接口进行了极尽简化和精心设计，力求让引擎接口清晰、方便且灵活强大。以下是 canvasgl 渲染引擎提供的 API 集合：

const canvas = Lan.canvasgl(1800, 1200, {
  replaces : {from:'to'},
  texflipy : true,
});
Lan.loop(canvas.render);

与其它初始化方法一致，options 里可以使用 texflipy 指定纹理是否垂直翻转。在 options 里指定 replaces 项，可在 GLSL 代码中进行字符串替换操作。

{
  replaces : {NUMBER1:1000},
}

通过这样的设定，GLSL 代码中所有的 NUMBER1 都将被替换为 1000。

WebGL2RenderingContext 对象。

数组，所有 Vertex Shader 源代码。

数组，所有 Fragment Shader 源代码。

执行图像清除操作，绘制为统一的颜色。

创建 WebGLTexture 对象，返回对象包含如下属性和方法：

• unit：纹理编号（int），通常会被绑定为一个 sampler2D 的 uniform 值；
• bind()：绑定该纹理，可后续进行 texImage2D 等操作；
• conf(parameter, value)：纹理参数配置；
• data(source[, dimx, dimy, format])：上传纹理数据；
• copy()：将当前 FrameBuffer 数据拷贝到纹理中。

通过 6 个图片 URL 加载 Cubemap 天空盒纹理，返回对象包含如下属性和方法：

• unit：纹理编号（int），通常会被绑定为一个 samplerCube 的 uniform 值。

创建缓冲（WebGLBuffer），type 缺省为 ARRAY_BUFFER，usage 缺省为 STATIC_DRAW。返回对象附加属性方法如下：

• bind()：绑定该缓冲；
• data(array)：上传数据，array 默认为 Float32Array；
• attr(name, size, type)：绑定为当前 WebGLProgram 的顶点属性。

创建 WebGLFramebuffer，可以用来接收 WebGLProgram 的渲染输出。

编译并生成一个 WebGLProgram 对象，frame_buffer 缺省为 null 表示渲染输出到屏幕。返回对象附加以下属性和方法：

• bind()
  绑定使用该程序，新创建的程序将被自动使用；
• uniform(name[, type, data])
  获得/创建 uniform 对象。其中 type 为 string 类型，可选值有：int、float、ivec2、ivec3、ivec4、vec2、vec3、vec4、mat2、mat3、mat4。返回对象附加属性方法如下：
  • fail：当未找到该 uniform 的时候为 true；
  • data(value)：设置数据。
• [uniform name](data)
  使用 uniform 名称更新已注册的 uniform 对象数据；
• draw()
  当 vertex_shader_code 为空的时候，将使用 OpenGL ES 300 并自动产生一个顶点着色器（Vertex Shader），这时候 draw 方法有效。同时，在 Fragment Shader 里 fragColor 将作为颜色输出变量。