• 蓝紫集成开发

  const canvas = await Lan.webgl(900, 600, {options...}); // canvas width, height and rendering options
  const canvas = await Lan.webgl(900, {options...}); // auto set canvas height with aspect ratio 3/2
  const canvas = await Lan.webgl({options...}); // canvas dimensions default to 900 x 600

  因为 webgl 是蓝紫的核心渲染引擎之一，可以直接通过全局变量 Lan 进行访问，请参考向导程序：多程序串行。

• 第三方集成

  import {webgl} from "https://ddzeb.com/lands/webgl";
  await webgl(canvas, {options...});
  canvas.render();

  const {webgl} = await import("https://ddzeb.com/lands/webgl");
  await webgl(canvas, {options...});
  canvas.render();

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

const canvas = await Lan.webgl(900, 600, {
  alpha : false,
  antialias : false,
});
// use canvas to draw

其中，alpha 以及 antialias 缺省为 false。我们将接口添加在 canvas 上，可通过 canvas 对象进行调取。

WebGL2RenderingContext 对象。

数组，所有 Vertex Shader 源代码。

数组，所有 Fragment Shader 源代码。

返回 bool 值，表示 context 是否已丢失。

执行图像清除操作，绘制为统一的颜色，所有参数均为可选参数。

将 WebGL 错误代码转换为可读字符串，err 参数可选。

创建 WebGLTexture 对象，所有参数可选。当 data 未传或不可用的时候，创建一个与画布尺寸一致的空纹理对象。

options 可选参数如下：

• flipy：是否垂直翻转，缺省为 true；
• wrap：重复模式，可选项有：clamp、mirror 以及 repeat，缺省为 mirror。

返回对象包含如下属性和方法：

• unit：纹理编号（int），通常会被绑定为一个 sampler2D 的 uniform 值；
• bind()：绑定该纹理，可后续进行 texImage2D 等操作；
• conf(parameter, value)：纹理参数配置；
• data(source, width, height, format, type)：上传纹理数据。

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

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

加载 Cubemap 图片，可使用 media 库的 cubemap 接口。

创建 WebGLFramebuffer 对象，用于接受 Shader 程序的渲染输出。返回对象附加接口：

• target(target)：设置 Framebuffer 的渲染目标，当 target 为纹理对象时，渲染输出到该纹理对象，否则渲染输出到一个 Renderbuffer。

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

• type：缓冲类型；
• usage：缓冲用途；
• bytes：缓冲字节大小；
• bind()：绑定该缓冲；
• data(data_or_size)：上传数据或设置 buffer 大小；
• read(dest, srcByteOffset)：读取 buffer 数据到 dest 中，dest 为 TypedArray 或 DataView 类型对象，可不传。

编译 Shader 代码，传入参数 type 为 string 类型，取值：vertex 或 fragment。

编译并生成一个 WebGLProgram 对象。vs 及 fs 必传，可以是字符串形式的代码，也可以是蓝紫里的 Shader 代码段整数编号（从 0 开始）。当 Shader 代码未包含 #version 指示器时，将自动添加 #version 300 es 指示器并在 Fragment Shader 中添加 out vec4 fragColor 颜色输出项。

可选参数 options 包括：

• feedbacks
  TransformFeedback 字段，可以是逗号分隔的字符串，也可以是字符串数组；
• writemode
  TransformFeedback 模式，缺省为 gl.SEPARATE_ATTRIBS；
• dest
  渲染输出目标，可指定为一个 frame buffer 或 null，缺省为 null（即输出到屏幕）；
• discard
  是否舍弃渲染输出，当传入的 fs 代码为空的时候自动舍弃；

返回的 WebGLProgram 对象附加接口如下：

• bind()
  绑定使用该程序，新创建的程序将被自动使用；
• attr(name_or_location, size, data, data_type, data_usage)
  绑定 vertex 顶点属性，返回对象附加接口：
  • location：属性位置；
  • data(data, usage)：上传更新数据；
• vao()
  创建 VertexArray，返回对象附加接口：
  • bind()：绑定操作；
  • attr(name_or_location, size, buffer, data_type)：设置顶点属性；
• uniform(name, type, data)
  获得/创建 uniform 对象。其中 type 为 string 类型，可选值有：int、float、ivec2、ivec3、ivec4、vec2、vec3、vec4、mat2、mat3、mat4。返回对象附加属性方法如下：
  • location：uniform 位置；
  • name：名称；
  • type：类型；
  • value：数据；
  • data(value)：更新数据。
• uniforms(data)
  批量更新 uniform 数据，比如：uniforms({A:1, B:2});
• elements(data, usage)
  创建 ELEMENT_ARRAY_BUFFER，附加接口如下：
  • length：数据长度；
  • bind()：绑定操作；
  • data(data, usage)：更新数据；
  • draw(mode, type, count, offset)：渲染操作，除 mode 外其余参数可选；
  • drawXXX(type, count, offset)：具体的渲染操作，所有参数可选。包括的 API 有：drawPoints、drawLineStrip、drawLineLoop、drawLines、drawTriangleStrip、drawTriangleFan 以及 drawTriangles。
• feedback(buffer1, buffer2, ...)
  创建一个 TransformFeedback 对象并绑定数据缓冲，附加接口如下：
  • begin(mode)：开始，mode 缺省为 gl.POINTS；
  • end()：结束，可以不用显式调用，引擎会自动调用结束操作。
• outcome(type)
  创建/获取程序输出纹理，type 缺省为 gl.RGBA32F。附加接口如下：
  • bind()：绑定；
  • conf(parameter, value)：纹理参数配置；
  • data(source)：上传纹理数据，缺省为清空数据。
  • copy(x, y, w, h)：将当前 FrameBuffer 数据拷贝到纹理中，参数可选。
• draw()
  当 Vertex Shader 代码为空的时候，draw 方法有效。

我们将 gl.drawArrays 代理到了 canvas 对象作为接口，分别为：drawPoints、drawLineStrip、drawLineLoop、drawLines、drawTriangleStrip、drawTriangleFan 以及 drawTriangles，参数均为 (count, first)，其中 first 默认为 0。

清理和销毁。在蓝紫开发环境中无需调用此接口，开发环境会自动进行回收清理工作。