@antv/l7-layers 2.25.7 → 2.25.9

package/lib/utils/stencil.d.ts

@@ -0,0 +1,7 @@
+import type { IRenderOptions, IStencilOptions, MaskOperationType } from '@antv/l7-core';
+export declare function getStencil(mask: boolean, maskInside: boolean): Partial<IStencilOptions>;
+interface IStencilMaskOptions extends IRenderOptions {
+    maskOperation?: MaskOperationType;
+}
+export declare function getStencilMask(option: Partial<IStencilMaskOptions>): Partial<IStencilOptions>;
+export {};

package/lib/utils/stencil.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStencil = getStencil;
+exports.getStencilMask = getStencilMask;
+var _l7Core = require("@antv/l7-core");
+// 掩模配置
+function getStencil(mask, maskInside) {
+  return {
+    enable: mask,
+    mask: 0xff,
+    func: {
+      cmp: _l7Core.gl.EQUAL,
+      // gl.EQUAL,
+      ref: maskInside ? 1 : 0,
+      mask: 1
+    }
+  };
+}
+// 模版配置
+function getStencilMask(option) {
+  if (option.maskOperation === _l7Core.MaskOperation.OR) {
+    return {
+      enable: true,
+      mask: 0xff,
+      func: {
+        cmp: _l7Core.gl.ALWAYS,
+        ref: 1,
+        mask: 0xff
+      },
+      opFront: {
+        fail: _l7Core.gl.KEEP,
+        zfail: _l7Core.gl.REPLACE,
+        zpass: _l7Core.gl.REPLACE
+      }
+    };
+  }
+  return {
+    enable: true,
+    mask: 0xff,
+    func: {
+      cmp: option.stencilType === _l7Core.StencilType.SINGLE // 单层
+      ? _l7Core.gl.ALWAYS : option.stencilIndex === 0 // 多层
+      ? _l7Core.gl.ALWAYS : _l7Core.gl.LESS,
+      ref: option.stencilType === _l7Core.StencilType.SINGLE ? 1 : option.stencilIndex === 0 ? 2 : 1,
+      mask: 0xff
+    },
+    opFront: {
+      fail: _l7Core.gl.KEEP,
+      zfail: _l7Core.gl.REPLACE,
+      zpass: _l7Core.gl.REPLACE
+    }
+  };
+}

package/lib/utils/symbol-layout.d.ts

@@ -0,0 +1,43 @@
+interface IPoint {
+    x: number;
+    y: number;
+}
+export type anchorType = 'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
+export interface IGlyphQuad {
+    tr: IPoint;
+    tl: IPoint;
+    bl: IPoint;
+    br: IPoint;
+    tex: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+        advance: number;
+    };
+    glyphOffset: [number, number];
+}
+/**
+ * 计算文本中每个独立字符相对锚点的位置
+ *
+ * @param {string} text 原始文本
+ * @param {*} glyphs mapping
+ * @param {number} lineHeight 行高
+ * @param {string} textAnchor 文本相对于锚点的位置
+ * @param {string} textJustify 左右对齐
+ * @param {number} spacing 字符间距
+ * @param {[number, number]} translate 文本水平 & 垂直偏移量
+ * @param {[boolean]} isIconFont 是否是 iconfont
+ * @return {boolean|shaping} 每个字符相对于锚点的位置
+ */
+export declare function shapeText(text: string, glyphs: any, lineHeight: number, textAnchor: anchorType, textJustify: string, spacing: number, translate: [number, number] | undefined, isIconFont: boolean): false | {
+    positionedGlyphs: any[];
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    lineCount: number;
+    text: string;
+};
+export declare function getGlyphQuads(shaping: any, textOffset: [number, number] | undefined, alongLine: boolean): IGlyphQuad[];
+export {};

package/lib/utils/symbol-layout.js

@@ -0,0 +1,258 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGlyphQuads = getGlyphQuads;
+exports.shapeText = shapeText;
+/**
+ * 返回文本相对锚点位置
+ * @param {string} anchor 锚点位置
+ * @return {alignment} alignment
+ */
+function getAnchorAlignment(anchor) {
+  let horizontalAlign = 0.5;
+  let verticalAlign = 0.5;
+  switch (anchor) {
+    case 'right':
+    case 'top-right':
+    case 'bottom-right':
+      horizontalAlign = 1;
+      break;
+    case 'left':
+    case 'top-left':
+    case 'bottom-left':
+      horizontalAlign = 0;
+      break;
+    default:
+      horizontalAlign = 0.5;
+  }
+  switch (anchor) {
+    case 'bottom':
+    case 'bottom-right':
+    case 'bottom-left':
+      verticalAlign = 1;
+      break;
+    case 'top':
+    case 'top-right':
+    case 'top-left':
+      verticalAlign = 0;
+      break;
+    default:
+      verticalAlign = 0.5;
+  }
+  return {
+    horizontalAlign,
+    verticalAlign
+  };
+}
+
+// justify right = 1, left = 0, center = 0.5
+function justifyLine(positionedGlyphs, glyphMap, start, end, justify) {
+  if (!justify) {
+    return;
+  }
+  const lastPositionedGlyph = positionedGlyphs[end];
+  const glyph = lastPositionedGlyph.glyph;
+  if (glyph) {
+    const lastAdvance = glyphMap[glyph].advance * lastPositionedGlyph.scale;
+    const lineIndent = (positionedGlyphs[end].x + lastAdvance) * justify;
+    for (let j = start; j <= end; j++) {
+      positionedGlyphs[j].x -= lineIndent;
+    }
+  }
+}
+
+// justify right=1 left=0 center=0.5
+// horizontalAlign right=1 left=0 center=0.5
+// verticalAlign right=1 left=0 center=0.5
+function align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lineCount) {
+  const shiftX = (justify - horizontalAlign) * maxLineLength;
+  const shiftY = (-verticalAlign * lineCount + 0.5) * lineHeight;
+  for (const glyphs of positionedGlyphs) {
+    glyphs.x += shiftX;
+    glyphs.y += shiftY;
+  }
+}
+function shapeLines(shaping, glyphMap, lines, lineHeight, textAnchor, textJustify, spacing) {
+  // buffer 为 4
+  const yOffset = -8;
+  let x = 0;
+  let y = yOffset;
+  let maxLineLength = 0;
+  const positionedGlyphs = shaping.positionedGlyphs;
+  const justify = textJustify === 'right' ? 1 : textJustify === 'left' ? 0 : 0.5;
+  const lineStartIndex = positionedGlyphs.length;
+  lines.forEach(line => {
+    line.split('').forEach(char => {
+      const glyph = glyphMap[char];
+      const baselineOffset = 0;
+      if (glyph) {
+        positionedGlyphs.push({
+          glyph: char,
+          x,
+          y: y + baselineOffset,
+          vertical: false,
+          // TODO：目前只支持水平方向
+          scale: 1,
+          metrics: glyph
+        });
+        x += glyph.advance + spacing;
+      }
+    });
+
+    // 左右对齐
+    if (positionedGlyphs.length !== lineStartIndex) {
+      const lineLength = x - spacing;
+      maxLineLength = Math.max(lineLength, maxLineLength);
+      justifyLine(positionedGlyphs, glyphMap, lineStartIndex, positionedGlyphs.length - 1, justify);
+    }
+    x = 0;
+    y -= lineHeight + 5;
+  });
+  const {
+    horizontalAlign,
+    verticalAlign
+  } = getAnchorAlignment(textAnchor);
+  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lines.length);
+
+  // 计算包围盒
+  const height = y - yOffset;
+  shaping.top += -verticalAlign * height;
+  shaping.bottom = shaping.top - height;
+  shaping.left += -horizontalAlign * maxLineLength;
+  shaping.right = shaping.left + maxLineLength;
+}
+function shapeIconFont(shaping, glyphMap, iconfonts, lineHeight, textAnchor, textJustify, spacing) {
+  // buffer 为 4
+  const yOffset = -8;
+  let x = 0;
+  let y = yOffset;
+  let maxLineLength = 0;
+  const positionedGlyphs = shaping.positionedGlyphs;
+  const justify = textJustify === 'right' ? 1 : textJustify === 'left' ? 0 : 0.5;
+  const lineStartIndex = positionedGlyphs.length;
+  iconfonts.forEach(iconfont => {
+    const glyph = glyphMap[iconfont];
+    const baselineOffset = 0;
+    if (glyph) {
+      positionedGlyphs.push({
+        glyph: iconfont,
+        // x,
+        /**
+         * iconfont
+         * 在计算大小的时候计算的是 unicode 字符 如 &#xe6d4;
+         * 在布局计算 icon 位置的时候应该始终保持居中（且 icon 只占一个字符的位置）
+         */
+        x: glyph.advance / 2,
+        y: y + baselineOffset,
+        vertical: false,
+        // TODO：目前只支持水平方向
+        scale: 1,
+        metrics: glyph
+      });
+      x += glyph.advance + spacing;
+    }
+
+    // 左右对齐
+    if (positionedGlyphs.length !== lineStartIndex) {
+      const lineLength = x - spacing;
+      maxLineLength = Math.max(lineLength, maxLineLength);
+      justifyLine(positionedGlyphs, glyphMap, lineStartIndex, positionedGlyphs.length - 1, justify);
+    }
+    x = 0;
+    y -= lineHeight + 5;
+  });
+  const {
+    horizontalAlign,
+    verticalAlign
+  } = getAnchorAlignment(textAnchor);
+  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, iconfonts.length);
+
+  // 计算包围盒
+  const height = y - yOffset;
+  shaping.top += -verticalAlign * height;
+  shaping.bottom = shaping.top - height;
+  shaping.left += -horizontalAlign * maxLineLength;
+  shaping.right = shaping.left + maxLineLength;
+}
+
+/**
+ * 计算文本中每个独立字符相对锚点的位置
+ *
+ * @param {string} text 原始文本
+ * @param {*} glyphs mapping
+ * @param {number} lineHeight 行高
+ * @param {string} textAnchor 文本相对于锚点的位置
+ * @param {string} textJustify 左右对齐
+ * @param {number} spacing 字符间距
+ * @param {[number, number]} translate 文本水平 & 垂直偏移量
+ * @param {[boolean]} isIconFont 是否是 iconfont
+ * @return {boolean|shaping} 每个字符相对于锚点的位置
+ */
+function shapeText(text, glyphs, lineHeight, textAnchor, textJustify, spacing, translate = [0, 0], isIconFont) {
+  // TODO：处理换行
+  const lines = text.split('\n');
+  const positionedGlyphs = [];
+  const shaping = {
+    positionedGlyphs,
+    top: translate[1],
+    bottom: translate[1],
+    left: translate[0],
+    right: translate[0],
+    lineCount: lines.length,
+    text
+  };
+  isIconFont ? shapeIconFont(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, spacing) : shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, spacing);
+  if (!positionedGlyphs.length) {
+    return false;
+  }
+  return shaping;
+}
+function getGlyphQuads(shaping, textOffset = [0, 0], alongLine) {
+  const {
+    positionedGlyphs = []
+  } = shaping;
+  const quads = [];
+  for (const positionedGlyph of positionedGlyphs) {
+    const rect = positionedGlyph.metrics;
+
+    // The rects have an addditional buffer that is not included in their size.
+    const rectBuffer = 4;
+    const halfAdvance = rect.advance * positionedGlyph.scale / 2;
+    const glyphOffset = alongLine ? [positionedGlyph.x + halfAdvance, positionedGlyph.y] : [0, 0];
+    const builtInOffset = alongLine ? [0, 0] : [positionedGlyph.x + halfAdvance + textOffset[0], positionedGlyph.y + textOffset[1]];
+    const x1 = (0 - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
+    const y1 = (0 - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
+    const x2 = x1 + rect.width * positionedGlyph.scale;
+    const y2 = y1 + rect.height * positionedGlyph.scale;
+    const tl = {
+      x: x1,
+      y: y1
+    };
+    const tr = {
+      x: x2,
+      y: y1
+    };
+    const bl = {
+      x: x1,
+      y: y2
+    };
+    const br = {
+      x: x2,
+      y: y2
+    };
+
+    // TODO：处理字符旋转的情况
+
+    quads.push({
+      tl,
+      tr,
+      bl,
+      br,
+      tex: rect,
+      glyphOffset
+    });
+  }
+  return quads;
+}

package/lib/wind/index.d.ts

@@ -0,0 +1,11 @@
+import type { IRenderOptions } from '@antv/l7-core';
+import BaseLayer from '../core/BaseLayer';
+import type { IWindLayerStyleOptions } from '../core/interface';
+import type { WindModelType } from './models';
+export default class WindLayer extends BaseLayer<IWindLayerStyleOptions> {
+    type: string;
+    buildModels(): Promise<void>;
+    renderModels(options?: Partial<IRenderOptions>): this;
+    protected getDefaultConfig(): {};
+    getModelType(): WindModelType;
+}

package/lib/wind/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _BaseLayer = _interopRequireDefault(require("../core/BaseLayer"));
+var _models = _interopRequireDefault(require("./models"));
+class WindLayer extends _BaseLayer.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "type", 'WindLayer');
+  }
+  buildModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const modelType = _this.getModelType();
+      _this.layerModel = new _models.default[modelType](_this);
+      yield _this.initLayerModels();
+    })();
+  }
+  renderModels(options = {}) {
+    if (this.layerModel) {
+      this.layerModel.render(options); // 独立的渲染流程
+    }
+    return this;
+  }
+  getDefaultConfig() {
+    const type = this.getModelType();
+    const defaultConfig = {
+      wind: {}
+    };
+    return defaultConfig[type];
+  }
+  getModelType() {
+    return 'wind';
+  }
+}
+exports.default = WindLayer;

package/lib/wind/models/index.d.ts

@@ -0,0 +1,5 @@
+export type WindModelType = 'wind';
+declare const WindModels: {
+    [key in WindModelType]: any;
+};
+export default WindModels;

package/lib/wind/models/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _wind = _interopRequireDefault(require("./wind"));
+const WindModels = {
+  wind: _wind.default
+};
+var _default = exports.default = WindModels;

package/lib/wind/models/utils.d.ts

@@ -0,0 +1,19 @@
+export declare function createProgram(gl: WebGLRenderingContext, vshader: string, fshader: string): WebGLProgram | null;
+export declare function loadShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null;
+export declare function createTexture(gl: WebGLRenderingContext, filter: any, data: any, width: number, height: number): WebGLTexture | null;
+export declare function createDataTexture(gl: WebGLRenderingContext, filter: any, data: any): WebGLTexture | null;
+export declare function bindTexture(gl: WebGLRenderingContext, texture: WebGLTexture, unit: number): void;
+export declare function createBuffer(gl: WebGLRenderingContext, data: Float32Array): WebGLBuffer | null;
+export declare function bindAttriBuffer(gl: WebGLRenderingContext, attrName: string, vertices: number, count: number, program: WebGLProgram): {
+    buffer: WebGLBuffer | null;
+    attr: number;
+    count: number;
+};
+export declare function bindAttriIndicesBuffer(gl: WebGLRenderingContext, indices: Uint8Array): WebGLBuffer;
+export declare function bindUnifrom(gl: WebGLRenderingContext, unifromName: string, data: number | Float32List, program: WebGLProgram, vec: string): WebGLUniformLocation | null;
+export declare function setUnifrom(gl: WebGLRenderingContext, location: WebGLUniformLocation, data: number | Float32List, vec: string): void;
+export declare function initFramebuffer(gl: WebGLRenderingContext): {
+    FRAMEBUFFER: WebGLFramebuffer | null;
+    OFFER_SCREEN_WIDTH: number;
+    OFFER_SCREEN_HEIGHT: number;
+};

package/lib/wind/models/utils.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bindAttriBuffer = bindAttriBuffer;
+exports.bindAttriIndicesBuffer = bindAttriIndicesBuffer;
+exports.bindTexture = bindTexture;
+exports.bindUnifrom = bindUnifrom;
+exports.createBuffer = createBuffer;
+exports.createDataTexture = createDataTexture;
+exports.createProgram = createProgram;
+exports.createTexture = createTexture;
+exports.initFramebuffer = initFramebuffer;
+exports.loadShader = loadShader;
+exports.setUnifrom = setUnifrom;
+function createProgram(gl, vshader, fshader) {
+  // Create shader object
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader); // 创建顶点着色器对象
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader); // 创建片元着色器对象
+  if (!vertexShader || !fragmentShader) {
+    return null;
+  }
+
+  // Create a program object
+  const program = gl.createProgram(); // 创建程序对象
+  if (!program) {
+    return null;
+  }
+
+  // Attach the shader objects
+  gl.attachShader(program, vertexShader); // 绑定着色器对象
+  gl.attachShader(program, fragmentShader);
+
+  // Link the program object
+  gl.linkProgram(program); // 链接着色器对象
+
+  // Check the result of linking
+  const linked = gl.getProgramParameter(program, gl.LINK_STATUS); // 判断着色器对象是否链接成功
+  if (!linked) {
+    const error = gl.getProgramInfoLog(program);
+    console.warn('Failed to link program: ' + error);
+    gl.deleteProgram(program);
+    gl.deleteShader(fragmentShader);
+    gl.deleteShader(vertexShader);
+    return null;
+  }
+  const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+  for (let i = 0; i < numAttributes; i++) {
+    const attribute = gl.getActiveAttrib(program, i);
+    // @ts-ignore
+    program[attribute.name] = gl.getAttribLocation(program, attribute.name);
+  }
+  const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+  for (let i$1 = 0; i$1 < numUniforms; i$1++) {
+    const uniform = gl.getActiveUniform(program, i$1);
+    // @ts-ignore
+    program[uniform.name] = gl.getUniformLocation(program, uniform.name);
+  }
+
+  // @ts-ignore
+  program.vertexShader = vertexShader;
+  // @ts-ignore
+  program.fragmentShader = fragmentShader;
+  return program;
+}
+function loadShader(gl, type, source) {
+  // Create shader object
+  const shader = gl.createShader(type); // 生成着色器对象
+  if (shader == null) {
+    console.warn('unable to create shader');
+    return null;
+  }
+
+  // Set the shader program
+  gl.shaderSource(shader, source); // 载入着色器
+
+  // Compile the shader
+  gl.compileShader(shader); // 编译着色器代码
+
+  // Check the result of compilation
+  const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); // 判断着色器对象是否生成成功
+  // gl.SHADER_TYPE、gl.DELETE_STATUS、gl.COMPILE_STATUS
+  if (!compiled) {
+    const error = gl.getShaderInfoLog(shader);
+    console.warn('Failed to compile shader: ' + error);
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function createTexture(gl, filter, data, width, height) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return texture;
+}
+function createDataTexture(gl, filter, data) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+
+  // 对于 HTMLImageElement，使用正确的 texImage2D 重载
+  if (data instanceof HTMLImageElement) {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  } else {
+    // 对于 ArrayBuffer 或其他数据类型，需要提供宽度和高度
+    const width = Math.sqrt(data.length / 4); // 假设是RGBA格式，每个像素4个值
+    const height = width;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+  }
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return texture;
+}
+function bindTexture(gl, texture, unit) {
+  gl.activeTexture(gl.TEXTURE0 + unit);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+}
+function createBuffer(gl, data) {
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  return buffer;
+}
+function bindAttriBuffer(gl, attrName, vertices, count, program) {
+  const buffer = gl.createBuffer();
+  if (!buffer) {
+    console.warn('failed create vertex buffer');
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 将缓冲区对象绑定到目标
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 向缓冲区对象中写入数据
+
+  const attr = gl.getAttribLocation(program, attrName);
+  gl.vertexAttribPointer(attr, count, gl.FLOAT, false, 0, 0);
+  gl.enableVertexAttribArray(attr);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  return {
+    buffer,
+    attr,
+    count
+  };
+}
+function bindAttriIndicesBuffer(gl, indices) {
+  const buffer = gl.createBuffer();
+  if (!buffer) {
+    console.warn('failed create vertex buffer');
+  } else {
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+  }
+  return buffer;
+}
+function bindUnifrom(gl, unifromName, data, program, vec) {
+  const uniform = gl.getUniformLocation(program, unifromName);
+  // @ts-ignore
+  if (uniform === null || uniform < 0) {
+    console.warn('无法获取 uniform 变量的存储位置');
+  } else {
+    setUnifrom(gl, uniform, data, vec);
+  }
+  return uniform;
+}
+function setUnifrom(gl, location, data, vec) {
+  switch (vec) {
+    case 'float':
+      gl.uniform1f(location, data);
+      break;
+    case 'vec2':
+      gl.uniform2fv(location, data);
+      break;
+    case 'vec3':
+      gl.uniform3fv(location, data);
+      break;
+    case 'vec4':
+      gl.uniform4fv(location, data);
+      break;
+    case 'bool':
+      gl.uniform1i(location, data); // 1 - true    0 - false
+      break;
+    case 'sampler2d':
+      break;
+    case 'mat4':
+      gl.uniformMatrix4fv(location, false, data);
+      break;
+  }
+}
+function initFramebuffer(gl) {
+  const {
+    drawingBufferWidth,
+    drawingBufferHeight
+  } = gl;
+  const OFFER_SCREEN_WIDTH = drawingBufferWidth;
+  const OFFER_SCREEN_HEIGHT = drawingBufferHeight;
+  const FRAMEBUFFER = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, FRAMEBUFFER);
+  const depthbuffer = gl.createRenderbuffer();
+  gl.bindRenderbuffer(gl.RENDERBUFFER, depthbuffer);
+  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFER_SCREEN_WIDTH, OFFER_SCREEN_HEIGHT);
+  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthbuffer);
+  const texture = gl.createTexture();
+  // @ts-ignore
+  FRAMEBUFFER.texture = texture;
+  // @ts-ignore
+  FRAMEBUFFER.width = OFFER_SCREEN_WIDTH;
+  // @ts-ignore
+  FRAMEBUFFER.height = OFFER_SCREEN_HEIGHT;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, OFFER_SCREEN_WIDTH, OFFER_SCREEN_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return {
+    FRAMEBUFFER,
+    OFFER_SCREEN_WIDTH,
+    OFFER_SCREEN_HEIGHT
+  };
+}