@antv/l7-renderer 2.20.12 → 2.20.14

package/es/device/DeviceCache.d.ts

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

package/es/device/DeviceCache.js

@@ -0,0 +1,197 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { TransparentBlack, bindingsDescriptorCopy, bindingsDescriptorEquals, inputLayoutDescriptorCopy, inputLayoutDescriptorEquals, renderPipelineDescriptorCopy, renderPipelineDescriptorEquals } from '@antv/g-device-api';
+import { HashMap, hashCodeNumberFinish, hashCodeNumberUpdate, nullHashFunc } from "./utils/HashMap";
+function blendStateHash(hash, a) {
+  hash = hashCodeNumberUpdate(hash, a.blendMode);
+  hash = hashCodeNumberUpdate(hash, a.blendSrcFactor);
+  hash = hashCodeNumberUpdate(hash, a.blendDstFactor);
+  return hash;
+}
+function attachmentStateHash(hash, a) {
+  hash = blendStateHash(hash, a.rgbBlendState);
+  hash = blendStateHash(hash, a.alphaBlendState);
+  hash = hashCodeNumberUpdate(hash, a.channelWriteMask);
+  return hash;
+}
+function colorHash(hash, a) {
+  hash = hashCodeNumberUpdate(hash, a.r << 24 | a.g << 16 | a.b << 8 | a.a);
+  return hash;
+}
+function megaStateDescriptorHash(hash, a) {
+  var _a$stencilFront, _a$stencilFront2, _a$stencilFront3, _a$stencilFront4, _a$stencilBack, _a$stencilBack2, _a$stencilBack3, _a$stencilBack4;
+  for (var i = 0; i < a.attachmentsState.length; i++) hash = attachmentStateHash(hash, a.attachmentsState[i]);
+  hash = colorHash(hash, a.blendConstant || TransparentBlack);
+  hash = hashCodeNumberUpdate(hash, a.depthCompare);
+  hash = hashCodeNumberUpdate(hash, a.depthWrite ? 1 : 0);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilFront = a.stencilFront) === null || _a$stencilFront === void 0 ? void 0 : _a$stencilFront.compare);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilFront2 = a.stencilFront) === null || _a$stencilFront2 === void 0 ? void 0 : _a$stencilFront2.passOp);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilFront3 = a.stencilFront) === null || _a$stencilFront3 === void 0 ? void 0 : _a$stencilFront3.failOp);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilFront4 = a.stencilFront) === null || _a$stencilFront4 === void 0 ? void 0 : _a$stencilFront4.depthFailOp);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilBack = a.stencilBack) === null || _a$stencilBack === void 0 ? void 0 : _a$stencilBack.compare);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilBack2 = a.stencilBack) === null || _a$stencilBack2 === void 0 ? void 0 : _a$stencilBack2.passOp);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilBack3 = a.stencilBack) === null || _a$stencilBack3 === void 0 ? void 0 : _a$stencilBack3.failOp);
+  hash = hashCodeNumberUpdate(hash, (_a$stencilBack4 = a.stencilBack) === null || _a$stencilBack4 === void 0 ? void 0 : _a$stencilBack4.depthFailOp);
+  hash = hashCodeNumberUpdate(hash, a.stencilWrite ? 1 : 0);
+  hash = hashCodeNumberUpdate(hash, a.cullMode);
+  hash = hashCodeNumberUpdate(hash, a.frontFace ? 1 : 0);
+  hash = hashCodeNumberUpdate(hash, a.polygonOffset ? 1 : 0);
+  return hash;
+}
+function renderPipelineDescriptorHash(a) {
+  var hash = 0;
+  hash = hashCodeNumberUpdate(hash, a.program.id);
+  if (a.inputLayout !== null) hash = hashCodeNumberUpdate(hash, a.inputLayout.id);
+  hash = megaStateDescriptorHash(hash, a.megaStateDescriptor);
+  for (var i = 0; i < a.colorAttachmentFormats.length; i++) hash = hashCodeNumberUpdate(hash, a.colorAttachmentFormats[i] || 0);
+  hash = hashCodeNumberUpdate(hash, a.depthStencilAttachmentFormat || 0);
+  return hashCodeNumberFinish(hash);
+}
+function bindingsDescriptorHash(a) {
+  var hash = 0;
+  if (a.samplerBindings) {
+    for (var i = 0; i < a.samplerBindings.length; i++) {
+      var binding = a.samplerBindings[i];
+      if (binding !== null && binding.texture !== null) hash = hashCodeNumberUpdate(hash, binding.texture.id);
+    }
+  }
+  if (a.uniformBufferBindings) {
+    for (var _i = 0; _i < a.uniformBufferBindings.length; _i++) {
+      var _binding = a.uniformBufferBindings[_i];
+      if (_binding !== null && _binding.buffer !== null) {
+        hash = hashCodeNumberUpdate(hash, _binding.buffer.id);
+        hash = hashCodeNumberUpdate(hash, _binding.binding);
+        hash = hashCodeNumberUpdate(hash, _binding.offset);
+        hash = hashCodeNumberUpdate(hash, _binding.size);
+      }
+    }
+  }
+  if (a.storageBufferBindings) {
+    for (var _i2 = 0; _i2 < a.storageBufferBindings.length; _i2++) {
+      var _binding2 = a.storageBufferBindings[_i2];
+      if (_binding2 !== null && _binding2.buffer !== null) {
+        hash = hashCodeNumberUpdate(hash, _binding2.buffer.id);
+        hash = hashCodeNumberUpdate(hash, _binding2.binding);
+        hash = hashCodeNumberUpdate(hash, _binding2.offset);
+        hash = hashCodeNumberUpdate(hash, _binding2.size);
+      }
+    }
+  }
+  if (a.storageTextureBindings) {
+    for (var _i3 = 0; _i3 < a.storageTextureBindings.length; _i3++) {
+      var _binding3 = a.storageTextureBindings[_i3];
+      if (_binding3 !== null && _binding3.texture !== null) {
+        hash = hashCodeNumberUpdate(hash, _binding3.texture.id);
+        hash = hashCodeNumberUpdate(hash, _binding3.binding);
+      }
+    }
+  }
+  return hashCodeNumberFinish(hash);
+}
+export var RenderCache = /*#__PURE__*/function () {
+  function RenderCache(device) {
+    _classCallCheck(this, RenderCache);
+    _defineProperty(this, "bindingsCache", new HashMap(bindingsDescriptorEquals, bindingsDescriptorHash));
+    _defineProperty(this, "renderPipelinesCache", new HashMap(renderPipelineDescriptorEquals, renderPipelineDescriptorHash));
+    _defineProperty(this, "inputLayoutsCache", new HashMap(inputLayoutDescriptorEquals, nullHashFunc));
+    this.device = device;
+  }
+  _createClass(RenderCache, [{
+    key: "createBindings",
+    value: function createBindings(descriptor) {
+      var bindings = this.bindingsCache.get(descriptor);
+      if (bindings === null) {
+        var _descriptorCopy$unifo;
+        var descriptorCopy = bindingsDescriptorCopy(descriptor);
+        descriptorCopy.uniformBufferBindings = (_descriptorCopy$unifo = descriptorCopy.uniformBufferBindings) === null || _descriptorCopy$unifo === void 0 ? void 0 : _descriptorCopy$unifo.filter(function (_ref) {
+          var size = _ref.size;
+          return size && size > 0;
+        });
+        bindings = this.device.createBindings(descriptorCopy);
+        this.bindingsCache.add(descriptorCopy, bindings);
+      }
+      return bindings;
+    }
+  }, {
+    key: "createRenderPipeline",
+    value: function createRenderPipeline(descriptor) {
+      var renderPipeline = this.renderPipelinesCache.get(descriptor);
+      if (renderPipeline === null) {
+        var descriptorCopy = renderPipelineDescriptorCopy(descriptor);
+        descriptorCopy.colorAttachmentFormats = descriptorCopy.colorAttachmentFormats.filter(function (f) {
+          return f;
+        });
+        renderPipeline = this.device.createRenderPipeline(descriptorCopy);
+        this.renderPipelinesCache.add(descriptorCopy, renderPipeline);
+      }
+      return renderPipeline;
+    }
+  }, {
+    key: "createInputLayout",
+    value: function createInputLayout(descriptor) {
+      // remove hollows
+      descriptor.vertexBufferDescriptors = descriptor.vertexBufferDescriptors.filter(function (d) {
+        return !!d;
+      });
+      var inputLayout = this.inputLayoutsCache.get(descriptor);
+      if (inputLayout === null) {
+        var descriptorCopy = inputLayoutDescriptorCopy(descriptor);
+        inputLayout = this.device.createInputLayout(descriptorCopy);
+        this.inputLayoutsCache.add(descriptorCopy, inputLayout);
+      }
+      return inputLayout;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _iterator = _createForOfIteratorHelper(this.bindingsCache.values()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var bindings = _step.value;
+          bindings.destroy();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var _iterator2 = _createForOfIteratorHelper(this.renderPipelinesCache.values()),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var renderPipeline = _step2.value;
+          renderPipeline.destroy();
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var _iterator3 = _createForOfIteratorHelper(this.inputLayoutsCache.values()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var inputLayout = _step3.value;
+          inputLayout.destroy();
+        }
+        // for (const program of this.programCache.values()) program.destroy();
+        // for (const sampler of this.samplerCache.values()) sampler.destroy();
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      this.bindingsCache.clear();
+      this.renderPipelinesCache.clear();
+      this.inputLayoutsCache.clear();
+      // this.programCache.clear();
+      // this.samplerCache.clear();
+    }
+  }]);
+  return RenderCache;
+}();

package/es/device/DeviceFramebuffer.js

@@ -17,12 +17,19 @@ var DeviceFramebuffer = /*#__PURE__*/function () {
   _createClass(DeviceFramebuffer, [{
     key: "createColorRenderTarget",
     value: function createColorRenderTarget() {
+      var resize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$options = this.options,
         width = _this$options.width,
         height = _this$options.height,
         color = _this$options.color;
       if (color) {
         if (isTexture2D(color)) {
+          if (resize) {
+            color.resize({
+              width: width,
+              height: height
+            });
+          }
           this.colorTexture = color.get();
           this.colorRenderTarget = this.device.createRenderTargetFromTexture(this.colorTexture);
           this.width = color['width'];
@@ -43,6 +50,7 @@ var DeviceFramebuffer = /*#__PURE__*/function () {
   }, {
     key: "createDepthRenderTarget",
     value: function createDepthRenderTarget() {
+      var resize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$options2 = this.options,
         width = _this$options2.width,
         height = _this$options2.height,
@@ -50,6 +58,12 @@ var DeviceFramebuffer = /*#__PURE__*/function () {
       // TODO: avoid creating depth texture if not needed
       if (depth) {
         if (isTexture2D(depth)) {
+          if (resize) {
+            depth.resize({
+              width: width,
+              height: height
+            });
+          }
           this.depthTexture = depth.get();
           this.depthRenderTarget = this.device.createRenderTargetFromTexture(this.depthTexture);
           this.width = depth['width'];
@@ -86,10 +100,15 @@ var DeviceFramebuffer = /*#__PURE__*/function () {
         height = _ref.height;
       if (this.width !== width || this.height !== height) {
         this.destroy();
+        // Prevent double free texture.
+        // @ts-ignore
+        this.colorTexture.destroyed = true;
+        // @ts-ignore
+        this.depthTexture.destroyed = true;
         this.options.width = width;
         this.options.height = height;
-        this.createColorRenderTarget();
-        this.createDepthRenderTarget();
+        this.createColorRenderTarget(true);
+        this.createDepthRenderTarget(true);
       }
     }
   }]);

package/es/device/DeviceModel.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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 { BlendFactor, BlendMode, ChannelWriteMask, CompareFunction, CullMode, Format, StencilOp, TransparentBlack, VertexStepMode } from '@antv/g-device-api';
+import { BlendFactor, BlendMode, ChannelWriteMask, CompareFunction, CullMode, Format, StencilOp, TransparentBlack, VertexStepMode, ViewportOrigin } from '@antv/g-device-api';
 import { gl } from '@antv/l7-core';
 import { lodashUtil } from '@antv/l7-utils';
 import DeviceFramebuffer from "./DeviceFramebuffer";
@@ -25,14 +25,19 @@ var DeviceModel = /*#__PURE__*/function () {
       attributes = options.attributes,
       uniforms = options.uniforms,
       count = options.count,
-      elements = options.elements;
+      elements = options.elements,
+      diagnosticDerivativeUniformityEnabled = options.diagnosticDerivativeUniformityEnabled;
     this.options = options;
+    var diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? '' : this.service['viewportOrigin'] === ViewportOrigin.UPPER_LEFT ? 'diagnostic(off,derivative_uniformity);' : '';
     var program = device.createProgram({
       vertex: {
         glsl: vs
       },
       fragment: {
-        glsl: fs
+        glsl: fs,
+        postprocess: function postprocess(fs) {
+          return diagnosticDerivativeUniformityHeader + fs;
+        }
       }
     });
     this.program = program;
@@ -78,7 +83,9 @@ var DeviceModel = /*#__PURE__*/function () {
     if (elements) {
       this.indexBuffer = elements.get();
     }
-    var inputLayout = device.createInputLayout({
+
+    // const inputLayout = device.createInputLayout({
+    var inputLayout = service.renderCache.createInputLayout({
       vertexBufferDescriptors: vertexBufferDescriptors,
       indexBufferFormat: elements ? Format.U32_R : null,
       program: program
@@ -112,7 +119,9 @@ var DeviceModel = /*#__PURE__*/function () {
         stencil: stencil
       });
       var stencilEnabled = !!(stencilParams && stencilParams.enable);
-      return this.device.createRenderPipeline({
+
+      // return this.device.createRenderPipeline({
+      return this.service.renderCache.createRenderPipeline({
         inputLayout: this.inputLayout,
         program: this.program,
         topology: primitiveMap[primitive],
@@ -151,11 +160,17 @@ var DeviceModel = /*#__PURE__*/function () {
           stencilWrite: stencilEnabled,
           stencilFront: {
             compare: stencilEnabled ? stencilParams.func.cmp : CompareFunction.ALWAYS,
-            passOp: stencilParams.opFront.zpass
+            passOp: stencilParams.opFront.zpass,
+            failOp: stencilParams.opFront.fail,
+            depthFailOp: stencilParams.opFront.zfail,
+            mask: stencilParams.opFront.mask
           },
           stencilBack: {
             compare: stencilEnabled ? stencilParams.func.cmp : CompareFunction.ALWAYS,
-            passOp: stencilParams.opBack.zpass
+            passOp: stencilParams.opBack.zpass,
+            failOp: stencilParams.opBack.fail,
+            depthFailOp: stencilParams.opBack.zfail,
+            mask: stencilParams.opBack.mask
           }
         }
       });
@@ -201,11 +216,22 @@ var DeviceModel = /*#__PURE__*/function () {
         renderPass = _this$service.renderPass,
         currentFramebuffer = _this$service.currentFramebuffer,
         width = _this$service.width,
-        height = _this$service.height;
+        height = _this$service.height,
+        renderCache = _this$service.renderCache;
 
       // TODO: Recreate pipeline only when blend / cull changed.
       this.pipeline = this.createPipeline(mergedOptions, pick);
+
+      // const height = this.device['swapChainHeight'];
+      var device = this.service['device'];
+      // @ts-ignore
+      var tmpHeight = device['swapChainHeight'];
+      // @ts-ignore
+      device['swapChainHeight'] = (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['height']) || height;
       renderPass.setViewport(0, 0, (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['width']) || width, (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['height']) || height);
+
+      // @ts-ignore
+      device['swapChainHeight'] = tmpHeight;
       renderPass.setPipeline(this.pipeline);
       renderPass.setStencilReference(1);
       renderPass.setVertexInput(this.inputLayout, this.vertexBuffers.map(function (buffer) {
@@ -217,7 +243,8 @@ var DeviceModel = /*#__PURE__*/function () {
         offset: 0
       } : null);
       if (uniformBuffers) {
-        this.bindings = this.device.createBindings({
+        // this.bindings = device.createBindings({
+        this.bindings = renderCache.createBindings({
           pipeline: this.pipeline,
           uniformBufferBindings: uniformBuffers.map(function (uniformBuffer, i) {
             var buffer = uniformBuffer;
@@ -352,12 +379,14 @@ var DeviceModel = /*#__PURE__*/function () {
         opFront: {
           fail: stencilOpMap[opFront.fail],
           zfail: stencilOpMap[opFront.zfail],
-          zpass: stencilOpMap[opFront.zpass]
+          zpass: stencilOpMap[opFront.zpass],
+          mask: func.mask
         },
         opBack: {
           fail: stencilOpMap[opBack.fail],
           zfail: stencilOpMap[opBack.zfail],
-          zpass: stencilOpMap[opBack.zpass]
+          zpass: stencilOpMap[opBack.zpass],
+          mask: func.mask
         }
       };
     }

package/es/device/DeviceTexture2D.d.ts

@@ -2,12 +2,15 @@ import type { Device, Texture } from '@antv/g-device-api';
 import type { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
 export declare function isTexture2D(t: any): t is ITexture2D;
 export default class DeviceTexture2D implements ITexture2D {
+    private device;
+    private options;
     private texture;
     private sampler;
     private width;
     private height;
     private isDestroy;
     constructor(device: Device, options: ITexture2DInitializationOptions);
+    private createTexture;
     get(): Texture;
     update(props: any): void;
     bind(): void;

package/es/device/DeviceTexture2D.js

@@ -11,62 +11,20 @@ var DeviceTexture2D = /*#__PURE__*/function () {
   function DeviceTexture2D(device, options) {
     _classCallCheck(this, DeviceTexture2D);
     _defineProperty(this, "isDestroy", false);
-    var data = options.data,
-      _options$type = options.type,
-      type = _options$type === void 0 ? gl.UNSIGNED_BYTE : _options$type,
-      width = options.width,
-      height = options.height,
-      _options$flipY = options.flipY,
-      flipY = _options$flipY === void 0 ? false : _options$flipY,
-      _options$format = options.format,
-      format = _options$format === void 0 ? gl.RGBA : _options$format,
-      _options$wrapS = options.wrapS,
+    this.device = device;
+    this.options = options;
+    var _options$wrapS = options.wrapS,
       wrapS = _options$wrapS === void 0 ? gl.CLAMP_TO_EDGE : _options$wrapS,
       _options$wrapT = options.wrapT,
       wrapT = _options$wrapT === void 0 ? gl.CLAMP_TO_EDGE : _options$wrapT,
-      _options$aniso = options.aniso,
-      aniso = _options$aniso === void 0 ? 0 : _options$aniso,
-      _options$alignment = options.alignment,
-      alignment = _options$alignment === void 0 ? 1 : _options$alignment,
-      _options$usage = options.usage,
-      usage = _options$usage === void 0 ? TextureUsage.SAMPLED : _options$usage,
+      aniso = options.aniso,
       _options$mipmap = options.mipmap,
       mipmap = _options$mipmap === void 0 ? false : _options$mipmap,
       _options$mag = options.mag,
       mag = _options$mag === void 0 ? gl.NEAREST : _options$mag,
       _options$min = options.min,
       min = _options$min === void 0 ? gl.NEAREST : _options$min;
-    this.width = width;
-    this.height = height;
-    var pixelFormat = Format.U8_RGBA_RT;
-    if (type === gl.UNSIGNED_BYTE && format === gl.RGBA) {
-      pixelFormat = Format.U8_RGBA_RT;
-    } else if (type === gl.UNSIGNED_BYTE && format === gl.LUMINANCE) {
-      pixelFormat = Format.U8_LUMINANCE;
-    } else if (type === gl.FLOAT && format === gl.RGB) {
-      pixelFormat = Format.F32_RGB;
-    } else if (type === gl.FLOAT && format === gl.RGBA) {
-      pixelFormat = Format.F32_RGBA;
-    } else if (type === gl.FLOAT && format === gl.RED) {
-      pixelFormat = Format.F32_R;
-    } else {
-      throw new Error("create texture error, type: ".concat(type, ", format: ").concat(format));
-    }
-    this.texture = device.createTexture({
-      format: pixelFormat,
-      width: width,
-      height: height,
-      usage: usage === TextureUsage.SAMPLED ? DeviceTextureUsage.SAMPLED : DeviceTextureUsage.RENDER_TARGET,
-      pixelStore: {
-        unpackFlipY: flipY,
-        packAlignment: alignment
-      },
-      mipLevelCount: usage === TextureUsage.RENDER_TARGET ? 1 : mipmap ? 1 : 0
-    });
-    if (data) {
-      // @ts-ignore
-      this.texture.setImageData([data]);
-    }
+    this.createTexture(options);
     this.sampler = device.createSampler({
       addressModeU: wrapModeMap[wrapS],
       addressModeV: wrapModeMap[wrapT],
@@ -79,6 +37,62 @@ var DeviceTexture2D = /*#__PURE__*/function () {
     });
   }
   _createClass(DeviceTexture2D, [{
+    key: "createTexture",
+    value: function createTexture(options) {
+      var data = options.data,
+        _options$type = options.type,
+        type = _options$type === void 0 ? gl.UNSIGNED_BYTE : _options$type,
+        width = options.width,
+        height = options.height,
+        _options$flipY = options.flipY,
+        flipY = _options$flipY === void 0 ? false : _options$flipY,
+        _options$format = options.format,
+        format = _options$format === void 0 ? gl.RGBA : _options$format,
+        aniso = options.aniso,
+        _options$alignment = options.alignment,
+        alignment = _options$alignment === void 0 ? 1 : _options$alignment,
+        _options$usage = options.usage,
+        usage = _options$usage === void 0 ? TextureUsage.SAMPLED : _options$usage,
+        _options$unorm = options.unorm,
+        unorm = _options$unorm === void 0 ? false : _options$unorm,
+        label = options.label;
+      this.width = width;
+      this.height = height;
+      var pixelFormat = Format.U8_RGBA_RT;
+      if (type === gl.UNSIGNED_BYTE && format === gl.RGBA) {
+        pixelFormat = unorm ? Format.U8_RGBA_NORM : Format.U8_RGBA_RT;
+      } else if (type === gl.UNSIGNED_BYTE && format === gl.LUMINANCE) {
+        pixelFormat = Format.U8_LUMINANCE;
+      } else if (type === gl.FLOAT && format === gl.RGB) {
+        pixelFormat = Format.F32_RGB;
+      } else if (type === gl.FLOAT && format === gl.RGBA) {
+        pixelFormat = Format.F32_RGBA;
+      } else if (type === gl.FLOAT && format === gl.RED) {
+        pixelFormat = Format.F32_R;
+      } else {
+        throw new Error("create texture error, type: ".concat(type, ", format: ").concat(format));
+      }
+      this.texture = this.device.createTexture({
+        format: pixelFormat,
+        width: width,
+        height: height,
+        usage: usage === TextureUsage.SAMPLED ? DeviceTextureUsage.SAMPLED : DeviceTextureUsage.RENDER_TARGET,
+        pixelStore: {
+          unpackFlipY: flipY,
+          packAlignment: alignment
+        },
+        // mipLevelCount: usage === TextureUsage.RENDER_TARGET ? 1 : mipmap ? 1 : 0,
+        mipLevelCount: 1
+      });
+      if (label) {
+        this.device.setResourceName(this.texture, label);
+      }
+      if (data) {
+        // @ts-ignore
+        this.texture.setImageData([data]);
+      }
+    }
+  }, {
     key: "get",
     value: function get() {
       return this.texture;
@@ -99,9 +113,13 @@ var DeviceTexture2D = /*#__PURE__*/function () {
     value: function resize(_ref) {
       var width = _ref.width,
         height = _ref.height;
-      // this.texture.resize(width, height);
-      this.width = width;
-      this.height = height;
+      if (this.width !== width || this.height !== height) {
+        this.destroy();
+      }
+      this.options.width = width;
+      this.options.height = height;
+      this.createTexture(this.options);
+      this.isDestroy = false;
     }
   }, {
     key: "getSize",
@@ -111,7 +129,8 @@ var DeviceTexture2D = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      if (!this.isDestroy) {
+      // @ts-ignore
+      if (!this.isDestroy && !this.texture.destroyed) {
         var _this$texture;
         (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
       }

package/es/device/index.d.ts

@@ -1,6 +1,7 @@
 import type { RenderPass, RenderTarget, SwapChain } from '@antv/g-device-api';
 import type { IAttribute, IAttributeInitializationOptions, IBuffer, IBufferInitializationOptions, IClearOptions, IElements, IElementsInitializationOptions, IExtensions, IFramebuffer, IFramebufferInitializationOptions, IModel, IModelInitializationOptions, IReadPixelsOptions, IRenderConfig, IRendererService, ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
 import 'reflect-metadata';
+import { RenderCache } from './DeviceCache';
 import DeviceFramebuffer from './DeviceFramebuffer';
 /**
  * Device API renderer
@@ -19,14 +20,18 @@ export default class DeviceRendererService implements IRendererService {
      * Current render pass.
      */
     renderPass: RenderPass;
+    preRenderPass: RenderPass;
     mainColorRT: RenderTarget;
     mainDepthRT: RenderTarget;
+    renderCache: RenderCache;
     /**
      * Current FBO.
      */
     currentFramebuffer: DeviceFramebuffer | null;
     queryVerdorInfo: () => string;
+    private viewportOrigin;
     init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
+    private createMainColorDepthRT;
     beginFrame(): void;
     endFrame(): void;
     getPointSizeRange(): any;
@@ -38,6 +43,7 @@ export default class DeviceRendererService implements IRendererService {
     createTexture2D: (options: ITexture2DInitializationOptions) => ITexture2D;
     createFramebuffer: (options: IFramebufferInitializationOptions) => DeviceFramebuffer;
     useFramebuffer: (framebuffer: IFramebuffer | null, drawCommands: () => void) => void;
+    useFramebufferAsync: (framebuffer: IFramebuffer | null, drawCommands: () => Promise<void>) => Promise<void>;
     clear: (options: IClearOptions) => void;
     viewport: ({ width, height, }: {
         x: number;
@@ -46,6 +52,7 @@ export default class DeviceRendererService implements IRendererService {
         height: number;
     }) => void;
     readPixels: (options: IReadPixelsOptions) => Uint8Array;
+    readPixelsAsync: (options: IReadPixelsOptions) => Promise<Uint8Array>;
     getViewportSize: () => {
         width: number;
         height: number;