@antv/l7-renderer 2.21.1 → 2.21.3

package/es/regl/index.js

@@ -1,311 +1,227 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-/**
- * render w/ regl
- * @see https://github.com/regl-project/regl/blob/gh-pages/API.md
- */
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
-import regl from 'regl';
+// src/regl/index.ts
+import regl from "regl";
 import ReglAttribute from "./ReglAttribute";
 import ReglBuffer from "./ReglBuffer";
 import ReglElements from "./ReglElements";
 import ReglFramebuffer from "./ReglFramebuffer";
 import ReglModel from "./ReglModel";
 import ReglTexture2D from "./ReglTexture2D";
-
-/**
- * regl renderer
- */
-var ReglRendererService = /*#__PURE__*/function () {
-  function ReglRendererService() {
-    var _this = this;
-    _classCallCheck(this, ReglRendererService);
-    _defineProperty(this, "uniformBuffers", []);
-    _defineProperty(this, "queryVerdorInfo", function () {
-      return 'WebGL1';
-    });
-    _defineProperty(this, "createModel", function (options) {
-      return new ReglModel(_this.gl, options);
-    });
-    _defineProperty(this, "createAttribute", function (options) {
-      return new ReglAttribute(_this.gl, options);
-    });
-    _defineProperty(this, "createBuffer", function (options) {
-      return new ReglBuffer(_this.gl, options);
-    });
-    _defineProperty(this, "createElements", function (options) {
-      return new ReglElements(_this.gl, options);
-    });
-    _defineProperty(this, "createTexture2D", function (options) {
-      return new ReglTexture2D(_this.gl, options);
-    });
-    _defineProperty(this, "createFramebuffer", function (options) {
-      return new ReglFramebuffer(_this.gl, options);
-    });
-    _defineProperty(this, "useFramebuffer", function (framebuffer, drawCommands) {
-      _this.gl({
+var ReglRendererService = class {
+  constructor() {
+    this.uniformBuffers = [];
+    this.queryVerdorInfo = () => {
+      return "WebGL1";
+    };
+    this.createModel = (options) => new ReglModel(this.gl, options);
+    this.createAttribute = (options) => new ReglAttribute(this.gl, options);
+    this.createBuffer = (options) => new ReglBuffer(this.gl, options);
+    this.createElements = (options) => new ReglElements(this.gl, options);
+    this.createTexture2D = (options) => new ReglTexture2D(this.gl, options);
+    this.createFramebuffer = (options) => new ReglFramebuffer(this.gl, options);
+    this.useFramebuffer = (framebuffer, drawCommands) => {
+      this.gl({
+        framebuffer: framebuffer ? framebuffer.get() : null
+      })(drawCommands);
+    };
+    this.useFramebufferAsync = (framebuffer, drawCommands) => __async(this, null, function* () {
+      this.gl({
         framebuffer: framebuffer ? framebuffer.get() : null
       })(drawCommands);
     });
-    _defineProperty(this, "useFramebufferAsync", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(framebuffer, drawCommands) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _this.gl({
-                framebuffer: framebuffer ? framebuffer.get() : null
-              })(drawCommands);
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-    _defineProperty(this, "clear", function (options) {
-      var _this$gl;
-      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
-      var color = options.color,
-        depth = options.depth,
-        stencil = options.stencil,
-        _options$framebuffer = options.framebuffer,
-        framebuffer = _options$framebuffer === void 0 ? null : _options$framebuffer;
-      var reglClearOptions = {
-        color: color,
-        depth: depth,
-        stencil: stencil
+    this.clear = (options) => {
+      var _a;
+      const { color, depth, stencil, framebuffer = null } = options;
+      const reglClearOptions = {
+        color,
+        depth,
+        stencil
       };
       reglClearOptions.framebuffer = framebuffer === null ? framebuffer : framebuffer.get();
-      (_this$gl = _this.gl) === null || _this$gl === void 0 || _this$gl.clear(reglClearOptions);
-    });
-    _defineProperty(this, "viewport", function (_ref2) {
-      var x = _ref2.x,
-        y = _ref2.y,
-        width = _ref2.width,
-        height = _ref2.height;
-      // use WebGL context directly
-      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
-      _this.gl._gl.viewport(x, y, width, height);
-      _this.width = width;
-      _this.height = height;
-      _this.gl._refresh();
-    });
-    _defineProperty(this, "readPixels", function (options) {
-      var framebuffer = options.framebuffer,
-        x = options.x,
-        y = options.y,
-        width = options.width,
-        height = options.height;
-      var readPixelsOptions = {
-        x: x,
-        y: y,
-        width: width,
-        height: height
+      (_a = this.gl) == null ? void 0 : _a.clear(reglClearOptions);
+    };
+    this.viewport = ({
+      x,
+      y,
+      width,
+      height
+    }) => {
+      this.gl._gl.viewport(x, y, width, height);
+      this.width = width;
+      this.height = height;
+      this.gl._refresh();
+    };
+    this.readPixels = (options) => {
+      const { framebuffer, x, y, width, height } = options;
+      const readPixelsOptions = {
+        x,
+        y,
+        width,
+        height
       };
       if (framebuffer) {
         readPixelsOptions.framebuffer = framebuffer.get();
       }
-      return _this.gl.read(readPixelsOptions);
+      return this.gl.read(readPixelsOptions);
+    };
+    this.readPixelsAsync = (options) => __async(this, null, function* () {
+      return this.readPixels(options);
     });
-    _defineProperty(this, "readPixelsAsync", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(options) {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              return _context2.abrupt("return", _this.readPixels(options));
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function (_x3) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-    _defineProperty(this, "getViewportSize", function () {
+    this.getViewportSize = () => {
       return {
-        width: _this.gl._gl.drawingBufferWidth,
-        height: _this.gl._gl.drawingBufferHeight
+        width: this.gl._gl.drawingBufferWidth,
+        height: this.gl._gl.drawingBufferHeight
       };
-    });
-    _defineProperty(this, "getContainer", function () {
-      var _this$canvas;
-      return (_this$canvas = _this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.parentElement;
-    });
-    _defineProperty(this, "getCanvas", function () {
-      // return this.$container?.getElementsByTagName('canvas')[0] || null;
-      return _this.canvas;
-    });
-    _defineProperty(this, "getGLContext", function () {
-      return _this.gl._gl;
-    });
-    _defineProperty(this, "destroy", function () {
-      var _this$gl2;
-      // this.canvas = null 清除对 webgl 实例的引用
-      // @ts-ignore
-      _this.canvas = null;
-
-      // make sure release webgl context
-      (_this$gl2 = _this.gl) === null || _this$gl2 === void 0 || (_this$gl2 = _this$gl2._gl) === null || _this$gl2 === void 0 || (_this$gl2 = _this$gl2.getExtension('WEBGL_lose_context')) === null || _this$gl2 === void 0 || _this$gl2.loseContext();
-
-      // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clean-up
-      _this.gl.destroy();
-
-      // @ts-ignore
-      _this.gl = null;
-    });
+    };
+    this.getContainer = () => {
+      var _a;
+      return (_a = this.canvas) == null ? void 0 : _a.parentElement;
+    };
+    this.getCanvas = () => {
+      return this.canvas;
+    };
+    this.getGLContext = () => {
+      return this.gl._gl;
+    };
+    this.destroy = () => {
+      var _a, _b, _c;
+      this.canvas = null;
+      (_c = (_b = (_a = this.gl) == null ? void 0 : _a._gl) == null ? void 0 : _b.getExtension("WEBGL_lose_context")) == null ? void 0 : _c.loseContext();
+      this.gl.destroy();
+      this.gl = null;
+    };
   }
-  _createClass(ReglRendererService, [{
-    key: "init",
-    value: function () {
-      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(canvas, cfg, gl) {
-        var _this2 = this;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              // this.$container = $container;
-              this.canvas = canvas;
-              if (!gl) {
-                _context3.next = 5;
-                break;
+  init(canvas, cfg, gl) {
+    return __async(this, null, function* () {
+      this.canvas = canvas;
+      if (gl) {
+        this.gl = gl;
+      } else {
+        this.gl = yield new Promise((resolve, reject) => {
+          regl({
+            canvas: this.canvas,
+            attributes: {
+              alpha: true,
+              // use TAA instead of MSAA
+              // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
+              antialias: cfg.antialias,
+              premultipliedAlpha: true,
+              preserveDrawingBuffer: cfg.preserveDrawingBuffer,
+              stencil: cfg.stencil
+            },
+            // TODO: use extensions
+            extensions: [
+              "OES_element_index_uint",
+              "OES_standard_derivatives",
+              // wireframe
+              "ANGLE_instanced_arrays"
+              // VSM shadow map
+            ],
+            optionalExtensions: [
+              "oes_texture_float_linear",
+              "OES_texture_float",
+              "EXT_texture_filter_anisotropic",
+              "EXT_blend_minmax",
+              "WEBGL_depth_texture",
+              "WEBGL_lose_context"
+            ],
+            profile: true,
+            onDone: (err, r) => {
+              if (err || !r) {
+                reject(err);
               }
-              this.gl = gl;
-              _context3.next = 8;
-              break;
-            case 5:
-              _context3.next = 7;
-              return new Promise(function (resolve, reject) {
-                regl({
-                  canvas: _this2.canvas,
-                  attributes: {
-                    alpha: true,
-                    // use TAA instead of MSAA
-                    // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
-                    antialias: cfg.antialias,
-                    premultipliedAlpha: true,
-                    preserveDrawingBuffer: cfg.preserveDrawingBuffer,
-                    stencil: cfg.stencil
-                  },
-                  // TODO: use extensions
-                  extensions: ['OES_element_index_uint', 'OES_standard_derivatives',
-                  // wireframe
-                  'ANGLE_instanced_arrays' // VSM shadow map
-                  ],
-                  optionalExtensions: ['oes_texture_float_linear', 'OES_texture_float', 'EXT_texture_filter_anisotropic', 'EXT_blend_minmax', 'WEBGL_depth_texture', 'WEBGL_lose_context'],
-                  profile: true,
-                  onDone: function onDone(err, r) {
-                    if (err || !r) {
-                      reject(err);
-                    }
-                    // @ts-ignore
-                    resolve(r);
-                  }
-                });
-              });
-            case 7:
-              this.gl = _context3.sent;
-            case 8:
-              this.extensionObject = {
-                OES_texture_float: this.testExtension('OES_texture_float')
-              };
-            case 9:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3, this);
-      }));
-      function init(_x4, _x5, _x6) {
-        return _init.apply(this, arguments);
+              resolve(r);
+            }
+          });
+        });
       }
-      return init;
-    }()
-  }, {
-    key: "getPointSizeRange",
-    value: function getPointSizeRange() {
-      return this.gl._gl.getParameter(this.gl._gl.ALIASED_POINT_SIZE_RANGE);
-    }
-  }, {
-    key: "testExtension",
-    value: function testExtension(name) {
-      // OES_texture_float
-      return !!this.getGLContext().getExtension(name);
-    }
-  }, {
-    key: "setState",
-    value:
-    // TODO: 临时方法
-    function setState() {
-      this.gl({
-        cull: {
-          enable: false,
-          face: 'back'
-        },
-        viewport: {
-          x: 0,
-          y: 0,
-          height: this.width,
-          width: this.height
-        },
-        blend: {
-          enable: true,
-          equation: 'add'
-        },
-        framebuffer: null
-      });
-      this.gl._refresh();
-    }
-  }, {
-    key: "setBaseState",
-    value: function setBaseState() {
-      this.gl({
-        cull: {
-          enable: false,
-          face: 'back'
-        },
-        viewport: {
-          x: 0,
-          y: 0,
-          height: this.width,
-          width: this.height
-        },
-        blend: {
-          enable: false,
-          equation: 'add'
-        },
-        framebuffer: null
-      });
-      this.gl._refresh();
-    }
-  }, {
-    key: "setCustomLayerDefaults",
-    value: function setCustomLayerDefaults() {
-      var gl = this.getGLContext();
-      gl.disable(gl.CULL_FACE);
-    }
-  }, {
-    key: "setDirty",
-    value: function setDirty(flag) {
-      this.isDirty = flag;
-    }
-  }, {
-    key: "getDirty",
-    value: function getDirty() {
-      return this.isDirty;
-    }
-  }, {
-    key: "beginFrame",
-    value: function beginFrame() {}
-  }, {
-    key: "endFrame",
-    value: function endFrame() {}
-  }]);
-  return ReglRendererService;
-}();
-export { ReglRendererService as default };
+      this.extensionObject = {
+        OES_texture_float: this.testExtension("OES_texture_float")
+      };
+    });
+  }
+  getPointSizeRange() {
+    return this.gl._gl.getParameter(this.gl._gl.ALIASED_POINT_SIZE_RANGE);
+  }
+  testExtension(name) {
+    return !!this.getGLContext().getExtension(name);
+  }
+  // TODO: 临时方法
+  setState() {
+    this.gl({
+      cull: {
+        enable: false,
+        face: "back"
+      },
+      viewport: {
+        x: 0,
+        y: 0,
+        height: this.width,
+        width: this.height
+      },
+      blend: {
+        enable: true,
+        equation: "add"
+      },
+      framebuffer: null
+    });
+    this.gl._refresh();
+  }
+  setBaseState() {
+    this.gl({
+      cull: {
+        enable: false,
+        face: "back"
+      },
+      viewport: {
+        x: 0,
+        y: 0,
+        height: this.width,
+        width: this.height
+      },
+      blend: {
+        enable: false,
+        equation: "add"
+      },
+      framebuffer: null
+    });
+    this.gl._refresh();
+  }
+  setCustomLayerDefaults() {
+    const gl = this.getGLContext();
+    gl.disable(gl.CULL_FACE);
+  }
+  setDirty(flag) {
+    this.isDirty = flag;
+  }
+  getDirty() {
+    return this.isDirty;
+  }
+  beginFrame() {
+  }
+  endFrame() {
+  }
+};
+export {
+  ReglRendererService as default
+};

package/lib/device/DeviceAttribute.d.ts

@@ -0,0 +1,13 @@
+import type { Device } from '@antv/g-device-api';
+import type { IAttribute, IAttributeInitializationOptions, IBuffer } from '@antv/l7-core';
+export default class DeviceAttribute implements IAttribute {
+    private attribute;
+    private buffer;
+    constructor(device: Device, options: IAttributeInitializationOptions);
+    get(): IBuffer;
+    updateBuffer(options: {
+        data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array;
+        offset: number;
+    }): void;
+    destroy(): void;
+}

package/lib/device/DeviceBuffer.d.ts

@@ -0,0 +1,18 @@
+import type { Buffer, Device } from '@antv/g-device-api';
+import type { IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
+/**
+ * Use Buffer from @antv/g-device-api
+ */
+export default class DeviceBuffer implements IBuffer {
+    private buffer;
+    private isDestroyed;
+    private type;
+    private size;
+    constructor(device: Device, options: IBufferInitializationOptions);
+    get(): Buffer;
+    destroy(): void;
+    subData({ data, offset, }: {
+        data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array;
+        offset: number;
+    }): void;
+}

package/lib/device/DeviceCache.d.ts

@@ -0,0 +1,14 @@
+import type { Bindings, BindingsDescriptor, Device, InputLayout, InputLayoutDescriptor, Program, ProgramDescriptor, RenderPipeline, RenderPipelineDescriptor } from '@antv/g-device-api';
+export declare class RenderCache {
+    private device;
+    constructor(device: Device);
+    private bindingsCache;
+    private renderPipelinesCache;
+    private inputLayoutsCache;
+    private programCache;
+    createBindings(descriptor: BindingsDescriptor): Bindings;
+    createRenderPipeline(descriptor: RenderPipelineDescriptor): RenderPipeline;
+    createInputLayout(descriptor: InputLayoutDescriptor): InputLayout;
+    createProgram(descriptor: ProgramDescriptor): Program;
+    destroy(): void;
+}

package/lib/device/DeviceElements.d.ts

@@ -0,0 +1,13 @@
+import type { Buffer, Device } from '@antv/g-device-api';
+import type { IElements, IElementsInitializationOptions } from '@antv/l7-core';
+export default class DeviceElements implements IElements {
+    private indexBuffer;
+    private type;
+    private count;
+    constructor(device: Device, options: IElementsInitializationOptions);
+    get(): Buffer;
+    subData({ data, }: {
+        data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array;
+    }): void;
+    destroy(): void;
+}

package/lib/device/DeviceFramebuffer.d.ts

@@ -0,0 +1,24 @@
+import type { Device, RenderTarget, Texture } from '@antv/g-device-api';
+import type { IFramebuffer, IFramebufferInitializationOptions } from '@antv/l7-core';
+/**
+ * Contains 2 render targets: color and depth.
+ */
+export default class DeviceFramebuffer implements IFramebuffer {
+    private device;
+    private options;
+    private colorRenderTarget;
+    colorTexture: Texture;
+    private depthRenderTarget;
+    private depthTexture;
+    private width;
+    private height;
+    constructor(device: Device, options: IFramebufferInitializationOptions);
+    private createColorRenderTarget;
+    private createDepthRenderTarget;
+    get(): RenderTarget;
+    destroy(): void;
+    resize({ width, height }: {
+        width: number;
+        height: number;
+    }): void;
+}

package/lib/device/DeviceModel.d.ts

@@ -0,0 +1,53 @@
+import type { Device } from '@antv/g-device-api';
+import type { IModel, IModelDrawOptions, IModelInitializationOptions, IUniform } from '@antv/l7-core';
+import type DeviceRendererService from '.';
+export default class DeviceModel implements IModel {
+    private device;
+    private options;
+    private service;
+    private destroyed;
+    private uniforms;
+    private program;
+    private inputLayout;
+    private pipeline;
+    private indexBuffer;
+    private vertexBuffers;
+    private bindings;
+    constructor(device: Device, options: IModelInitializationOptions, service: DeviceRendererService);
+    private createPipeline;
+    updateAttributesAndElements(): void;
+    /**
+     * No need to implement this method, you should update data on `Attribute` like this:
+     *
+     * @example
+     * ```ts
+     * attribute.updateBuffer({
+     *   data: [],
+     *   offset: 0,
+     * });
+     * ```
+     */
+    updateAttributes(): void;
+    addUniforms(uniforms: {
+        [key: string]: IUniform;
+    }): void;
+    draw(options: IModelDrawOptions, pick?: boolean): void;
+    destroy(): void;
+    private initDepthDrawParams;
+    private getBlendDrawParams;
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil
+     */
+    private getStencilDrawParams;
+    /**
+     * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling
+     */
+    private initCullDrawParams;
+    /**
+     * 考虑结构体命名, eg:
+     * a: { b: 1 }  ->  'a.b'
+     * a: [ { b: 1 } ] -> 'a[0].b'
+     */
+    private extractUniforms;
+    private extractUniformsRecursively;
+}