@antv/l7-renderer - npm Package Compare versions

Comparing version 2.20.13 to 2.20.14

es/device/DeviceFramebuffer.js

@@ -20,2 +20,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     value: function createColorRenderTarget() {
+      var resize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$options = this.options,
@@ -27,2 +28,8 @@ width = _this$options.width,
         if (isTexture2D(color)) {
+          if (resize) {
+            color.resize({
+              width: width,
+              height: height
+            });
+          }
           this.colorTexture = color.get();
@@ -48,2 +55,3 @@ this.colorRenderTarget = this.device.createRenderTargetFromTexture(this.colorTexture);
     value: function createDepthRenderTarget() {
+      var resize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$options2 = this.options,
@@ -56,2 +64,8 @@ width = _this$options2.width,
         if (isTexture2D(depth)) {
+          if (resize) {
+            depth.resize({
+              width: width,
+              height: height
+            });
+          }
           this.depthTexture = depth.get();
@@ -93,6 +107,11 @@ this.depthRenderTarget = this.device.createRenderTargetFromTexture(this.depthTexture);
         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);
       }
@@ -99,0 +118,0 @@ }

es/device/DeviceModel.js

@@ -5,3 +5,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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';
@@ -29,4 +29,6 @@ import { lodashUtil } from '@antv/l7-utils';
       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({
@@ -37,3 +39,6 @@ vertex: {
       fragment: {
-        glsl: fs
+        glsl: fs,
+        postprocess: function postprocess(fs) {
+          return diagnosticDerivativeUniformityHeader + fs;
+        }
       }
@@ -84,3 +89,5 @@ });
     }
-    var inputLayout = device.createInputLayout({
+
+    // const inputLayout = device.createInputLayout({
+    var inputLayout = service.renderCache.createInputLayout({
       vertexBufferDescriptors: vertexBufferDescriptors,
@@ -119,3 +126,5 @@ indexBufferFormat: elements ? Format.U32_R : null,
       var stencilEnabled = !!(stencilParams && stencilParams.enable);
-      return this.device.createRenderPipeline({
+
+      // return this.device.createRenderPipeline({
+      return this.service.renderCache.createRenderPipeline({
         inputLayout: this.inputLayout,
@@ -159,7 +168,13 @@ program: this.program,
             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
           }
@@ -210,7 +225,18 @@ }
         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);
@@ -227,3 +253,4 @@ renderPass.setStencilReference(1);
       if (uniformBuffers) {
-        this.bindings = this.device.createBindings({
+        // this.bindings = device.createBindings({
+        this.bindings = renderCache.createBindings({
           pipeline: this.pipeline,
@@ -363,3 +390,4 @@ uniformBufferBindings: uniformBuffers.map(function (uniformBuffer, i) {
           zfail: stencilOpMap[opFront.zfail],
-          zpass: stencilOpMap[opFront.zpass]
+          zpass: stencilOpMap[opFront.zpass],
+          mask: func.mask
         },
@@ -369,3 +397,4 @@ opBack: {
           zfail: stencilOpMap[opBack.zfail],
-          zpass: stencilOpMap[opBack.zpass]
+          zpass: stencilOpMap[opBack.zpass],
+          mask: func.mask
         }
@@ -372,0 +401,0 @@ };

es/device/DeviceTexture2D.d.ts

@@ -5,2 +5,4 @@ import type { Device, Texture } from '@antv/g-device-api';
 export default class DeviceTexture2D implements ITexture2D {
+    private device;
+    private options;
     private texture;
@@ -12,2 +14,3 @@ private sampler;
     constructor(device: Device, options: ITexture2DInitializationOptions);
+    private createTexture;
     get(): Texture;
@@ -14,0 +17,0 @@ update(props: any): void;

es/device/DeviceTexture2D.js

@@ -14,21 +14,9 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     _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,
@@ -40,33 +28,3 @@ mipmap = _options$mipmap === void 0 ? false : _options$mipmap,
       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({
@@ -84,2 +42,58 @@ addressModeU: wrapModeMap[wrapS],
   _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",
@@ -105,5 +119,9 @@ value: function get() {
         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;
     }
@@ -118,3 +136,4 @@ }, {
     value: function destroy() {
-      if (!this.isDestroy) {
+      // @ts-ignore
+      if (!this.isDestroy && !this.texture.destroyed) {
         var _this$texture;
@@ -121,0 +140,0 @@ (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();

es/device/index.d.ts

 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';
@@ -22,4 +23,6 @@ /**
     renderPass: RenderPass;
+    preRenderPass: RenderPass;
     mainColorRT: RenderTarget;
     mainDepthRT: RenderTarget;
+    renderCache: RenderCache;
     /**
@@ -30,3 +33,5 @@ * Current FBO.
     queryVerdorInfo: () => string;
+    private viewportOrigin;
     init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
+    private createMainColorDepthRT;
     beginFrame(): void;
@@ -43,2 +48,3 @@ endFrame(): void;
     useFramebuffer: (framebuffer: IFramebuffer | null, drawCommands: () => void) => void;
+    useFramebufferAsync: (framebuffer: IFramebuffer | null, drawCommands: () => Promise<void>) => Promise<void>;
     clear: (options: IClearOptions) => void;
@@ -52,2 +58,3 @@ viewport: ({ width, height, }: {
     readPixels: (options: IReadPixelsOptions) => Uint8Array;
+    readPixelsAsync: (options: IReadPixelsOptions) => Promise<Uint8Array>;
     getViewportSize: () => {
@@ -54,0 +61,0 @@ width: number;

es/device/index.js

@@ -7,3 +7,4 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { Format, TextureUsage, TransparentBlack, WebGLDeviceContribution, WebGPUDeviceContribution, colorNewFromRGBA } from '@antv/g-device-api';
+import { Format, TextureUsage, TransparentBlack, ViewportOrigin, WebGLDeviceContribution, WebGPUDeviceContribution, colorNewFromRGBA } from '@antv/g-device-api';
+import { lodashUtil } from '@antv/l7-utils';
 import { injectable } from 'inversify';
@@ -13,2 +14,3 @@ import 'reflect-metadata';
 import DeviceBuffer from "./DeviceBuffer";
+import { RenderCache } from "./DeviceCache";
 import DeviceElements from "./DeviceElements";
@@ -19,2 +21,3 @@ import DeviceFramebuffer from "./DeviceFramebuffer";
 import { isWebGL2 } from "./utils/webgl";
+var isUndefined = lodashUtil.isUndefined;
 
@@ -57,2 +60,26 @@ /**
     });
+    _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.currentFramebuffer = framebuffer;
+              _this.preRenderPass = _this.renderPass;
+              _this.beginFrame();
+              _context.next = 5;
+              return drawCommands();
+            case 5:
+              _this.endFrame();
+              _this.currentFramebuffer = null;
+              _this.renderPass = _this.preRenderPass;
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "clear", function (options) {
@@ -72,14 +99,33 @@ // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
         };
+      } else {
+        var platformString = _this.queryVerdorInfo();
+        if (platformString === 'WebGL1') {
+          var gl = _this.getGLContext();
+          if (!isUndefined(stencil)) {
+            gl.clearStencil(stencil);
+            gl.clear(gl.STENCIL_BUFFER_BIT);
+          } else if (!isUndefined(depth)) {
+            gl.clearDepth(depth);
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+          }
+        } else if (platformString === 'WebGL2') {
+          var _gl = _this.getGLContext();
+          if (!isUndefined(stencil)) {
+            _gl.clearBufferiv(_gl.STENCIL, 0, [stencil]);
+          } else if (!isUndefined(depth)) {
+            _gl.clearBufferfv(_gl.DEPTH, 0, [depth]);
+          }
+        }
       }
+      // Recreate render pass
+      // this.beginFrame();
     });
-    _defineProperty(this, "viewport", function (_ref) {
-      var width = _ref.width,
-        height = _ref.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);
+    _defineProperty(this, "viewport", function (_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
+      // @see https://observablehq.com/@antv/g-device-api#cell-267
+      _this.swapChain.configureSwapChain(width, height);
+      _this.createMainColorDepthRT(width, height);
       _this.width = width;
       _this.height = height;
-      // Will be used in `setViewport` from RenderPass later.
-      // this.gl._refresh();
     });
@@ -94,4 +140,50 @@ _defineProperty(this, "readPixels", function (options) {
       var texture = framebuffer['colorTexture'];
-      return readback.readTextureSync(texture, x, y, width, height, new Uint8Array(width * height * 4));
+      var result = readback.readTextureSync(texture, x,
+      /**
+       * Origin is at lower-left corner. Width / height is already multiplied by dpr.
+       * WebGPU needs flipY
+       */
+      _this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : _this.height - y, width, height, new Uint8Array(width * height * 4));
+      readback.destroy();
+      return result;
     });
+    _defineProperty(this, "readPixelsAsync", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(options) {
+        var framebuffer, x, y, width, height, readback, texture, result, j, t;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              framebuffer = options.framebuffer, x = options.x, y = options.y, width = options.width, height = options.height;
+              readback = _this.device.createReadback();
+              texture = framebuffer['colorTexture'];
+              _context2.next = 5;
+              return readback.readTexture(texture, x,
+              /**
+               * Origin is at lower-left corner. Width / height is already multiplied by dpr.
+               * WebGPU needs flipY
+               */
+              _this.viewportOrigin === ViewportOrigin.LOWER_LEFT ? y : _this.height - y, width, height, new Uint8Array(width * height * 4));
+            case 5:
+              result = _context2.sent;
+              // Since we use U8_RGBA_RT format in render target, need to change bgranorm -> rgba here.
+              if (_this.viewportOrigin !== ViewportOrigin.LOWER_LEFT) {
+                for (j = 0; j < result.length; j += 4) {
+                  // Switch b and r components.
+                  t = result[j];
+                  result[j] = result[j + 2];
+                  result[j + 2] = t;
+                }
+              }
+              readback.destroy();
+              return _context2.abrupt("return", result);
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "getViewportSize", function () {
@@ -109,3 +201,2 @@ // FIXME: add viewport size in Device API.
     _defineProperty(this, "getCanvas", function () {
-      // return this.$container?.getElementsByTagName('canvas')[0] || null;
       return _this.canvas;
@@ -126,2 +217,3 @@ });
       _this.device.destroy();
+      _this.renderCache.destroy();
 
@@ -141,6 +233,6 @@ // make sure release webgl context
     value: function () {
-      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, cfg) {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(canvas, cfg) {
         var enableWebGPU, shaderCompilerPath, deviceContribution, swapChain, gl;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -166,12 +258,14 @@ enableWebGPU = cfg.enableWebGPU, shaderCompilerPath = cfg.shaderCompilerPath; // this.$container = $container;
               });
-              _context.next = 5;
+              _context3.next = 5;
               return deviceContribution.createSwapChain(canvas);
             case 5:
-              swapChain = _context.sent;
+              swapChain = _context3.sent;
               swapChain.configureSwapChain(canvas.width, canvas.height);
               this.device = swapChain.getDevice();
               this.swapChain = swapChain;
+              this.renderCache = new RenderCache(this.device);
 
               // Create default RT
               this.currentFramebuffer = null;
+              this.viewportOrigin = this.device.queryVendorInfo().viewportOrigin;
 
@@ -184,21 +278,10 @@ // @ts-ignore
               };
-              this.mainColorRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
-                format: Format.U8_RGBA_RT,
-                width: canvas.width,
-                height: canvas.height,
-                usage: TextureUsage.RENDER_TARGET
-              }));
-              this.mainDepthRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
-                format: Format.D24_S8,
-                width: canvas.width,
-                height: canvas.height,
-                usage: TextureUsage.RENDER_TARGET
-              }));
-            case 14:
+              this.createMainColorDepthRT(canvas.width, canvas.height);
+            case 15:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function init(_x, _x2) {
+      function init(_x4, _x5) {
         return _init.apply(this, arguments);
@@ -209,2 +292,24 @@ }
   }, {
+    key: "createMainColorDepthRT",
+    value: function createMainColorDepthRT(width, height) {
+      if (this.mainColorRT) {
+        this.mainColorRT.destroy();
+      }
+      if (this.mainDepthRT) {
+        this.mainDepthRT.destroy();
+      }
+      this.mainColorRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
+        format: Format.U8_RGBA_RT,
+        width: width,
+        height: height,
+        usage: TextureUsage.RENDER_TARGET
+      }));
+      this.mainDepthRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
+        format: Format.D24_S8,
+        width: width,
+        height: height,
+        usage: TextureUsage.RENDER_TARGET
+      }));
+    }
+  }, {
     key: "beginFrame",
@@ -216,15 +321,14 @@ value: function beginFrame() {
         mainDepthRT = this.mainDepthRT;
-      var onscreenTexture = swapChain.getOnscreenTexture();
       var colorAttachment = currentFramebuffer ? currentFramebuffer['colorRenderTarget'] : mainColorRT;
-      var colorResolveTo = currentFramebuffer ? null : onscreenTexture;
+      var colorResolveTo = currentFramebuffer ? null : swapChain.getOnscreenTexture();
       var depthStencilAttachment = currentFramebuffer ? currentFramebuffer['depthRenderTarget'] : mainDepthRT;
-      var _ref2 =
+      var _ref4 =
         // @ts-ignore
         (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer.clearOptions) || {},
-        _ref2$color = _ref2.color,
-        color = _ref2$color === void 0 ? [0, 0, 0, 0] : _ref2$color,
-        _ref2$depth = _ref2.depth,
-        depth = _ref2$depth === void 0 ? 1 : _ref2$depth,
-        _ref2$stencil = _ref2.stencil,
-        stencil = _ref2$stencil === void 0 ? 0 : _ref2$stencil;
+        _ref4$color = _ref4.color,
+        color = _ref4$color === void 0 ? [0, 0, 0, 0] : _ref4$color,
+        _ref4$depth = _ref4.depth,
+        depth = _ref4$depth === void 0 ? 1 : _ref4$depth,
+        _ref4$stencil = _ref4.stencil,
+        stencil = _ref4$stencil === void 0 ? 0 : _ref4$stencil;
       var colorClearColor = colorAttachment ? colorNewFromRGBA(color[0] * 255, color[1] * 255, color[2] * 255, color[3]) : TransparentBlack;
@@ -237,2 +341,4 @@ var depthClearValue = depthStencilAttachment ? depth : undefined;
         colorClearColor: [colorClearColor],
+        // colorStore: [!!currentFramebuffer],
+        colorStore: [true],
         depthStencilAttachment: depthStencilAttachment,
@@ -239,0 +345,0 @@ depthClearValue: depthClearValue,

es/regl/index.d.ts

@@ -32,2 +32,3 @@ /**
     useFramebuffer: (framebuffer: IFramebuffer | null, drawCommands: () => void) => void;
+    useFramebufferAsync: (framebuffer: IFramebuffer | null, drawCommands: () => Promise<void>) => Promise<void>;
     clear: (options: IClearOptions) => void;
@@ -41,2 +42,3 @@ viewport: ({ x, y, width, height, }: {
     readPixels: (options: IReadPixelsOptions) => Uint8Array;
+    readPixelsAsync: (options: IReadPixelsOptions) => Promise<Uint8Array>;
     getViewportSize: () => {
@@ -43,0 +45,0 @@ width: number;

es/regl/index.js

@@ -56,2 +56,20 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
     });
+    _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) {
@@ -73,7 +91,7 @@ var _this$gl;
     });
-    _defineProperty(this, "viewport", function (_ref) {
-      var x = _ref.x,
-        y = _ref.y,
-        width = _ref.width,
-        height = _ref.height;
+    _defineProperty(this, "viewport", function (_ref2) {
+      var x = _ref2.x,
+        y = _ref2.y,
+        width = _ref2.width,
+        height = _ref2.height;
       // use WebGL context directly
@@ -103,2 +121,18 @@ // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
     });
+    _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 () {
@@ -140,6 +174,6 @@ return {
     value: function () {
-      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, cfg, gl) {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(canvas, cfg, gl) {
         var _this2 = this;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -149,10 +183,10 @@ // this.$container = $container;
               if (!gl) {
-                _context.next = 5;
+                _context3.next = 5;
                 break;
               }
               this.gl = gl;
-              _context.next = 8;
+              _context3.next = 8;
               break;
             case 5:
-              _context.next = 7;
+              _context3.next = 7;
               return new Promise(function (resolve, reject) {
@@ -188,3 +222,3 @@ regl({
             case 7:
-              this.gl = _context.sent;
+              this.gl = _context3.sent;
             case 8:
@@ -196,7 +230,7 @@ this.extensionObject = {
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function init(_x, _x2, _x3) {
+      function init(_x4, _x5, _x6) {
         return _init.apply(this, arguments);
@@ -203,0 +237,0 @@ }

lib/device/DeviceFramebuffer.js

@@ -34,6 +34,9 @@ var __defProp = Object.defineProperty;
   }
-  createColorRenderTarget() {
+  createColorRenderTarget(resize = false) {
     const { width, height, color } = this.options;
     if (color) {
       if ((0, import_DeviceTexture2D.isTexture2D)(color)) {
+        if (resize) {
+          color.resize({ width, height });
+        }
         this.colorTexture = color.get();
@@ -60,6 +63,9 @@ this.colorRenderTarget = this.device.createRenderTargetFromTexture(
   }
-  createDepthRenderTarget() {
+  createDepthRenderTarget(resize = false) {
     const { width, height, depth } = this.options;
     if (depth) {
       if ((0, import_DeviceTexture2D.isTexture2D)(depth)) {
+        if (resize) {
+          depth.resize({ width, height });
+        }
         this.depthTexture = depth.get();
@@ -97,8 +103,10 @@ this.depthRenderTarget = this.device.createRenderTargetFromTexture(
       this.destroy();
+      this.colorTexture.destroyed = true;
+      this.depthTexture.destroyed = true;
       this.options.width = width;
       this.options.height = height;
-      this.createColorRenderTarget();
-      this.createDepthRenderTarget();
+      this.createColorRenderTarget(true);
+      this.createDepthRenderTarget(true);
     }
   }
 };

lib/device/DeviceModel.js

@@ -50,4 +50,13 @@ var __create = Object.create;
     this.vertexBuffers = [];
-    const { vs, fs, attributes, uniforms, count, elements } = options;
+    const {
+      vs,
+      fs,
+      attributes,
+      uniforms,
+      count,
+      elements,
+      diagnosticDerivativeUniformityEnabled
+    } = options;
     this.options = options;
+    const diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? "" : this.service["viewportOrigin"] === import_g_device_api.ViewportOrigin.UPPER_LEFT ? "diagnostic(off,derivative_uniformity);" : "";
     const program = device.createProgram({
@@ -58,3 +67,4 @@ vertex: {
       fragment: {
-        glsl: fs
+        glsl: fs,
+        postprocess: (fs2) => diagnosticDerivativeUniformityHeader + fs2
       }
@@ -101,3 +111,3 @@ });
     }
-    const inputLayout = device.createInputLayout({
+    const inputLayout = service.renderCache.createInputLayout({
       vertexBufferDescriptors,
@@ -120,3 +130,3 @@ indexBufferFormat: elements ? import_g_device_api.Format.U32_R : null,
     const stencilEnabled = !!(stencilParams && stencilParams.enable);
-    return this.device.createRenderPipeline({
+    return this.service.renderCache.createRenderPipeline({
       inputLayout: this.inputLayout,
@@ -162,7 +172,13 @@ program: this.program,
           compare: stencilEnabled ? stencilParams.func.cmp : import_g_device_api.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 : import_g_device_api.CompareFunction.ALWAYS,
-          passOp: stencilParams.opBack.zpass
+          passOp: stencilParams.opBack.zpass,
+          failOp: stencilParams.opBack.fail,
+          depthFailOp: stencilParams.opBack.zfail,
+          mask: stencilParams.opBack.mask
         }
@@ -210,4 +226,7 @@ }
     };
-    const { renderPass, currentFramebuffer, width, height } = this.service;
+    const { renderPass, currentFramebuffer, width, height, renderCache } = this.service;
     this.pipeline = this.createPipeline(mergedOptions, pick);
+    const device = this.service["device"];
+    const tmpHeight = device["swapChainHeight"];
+    device["swapChainHeight"] = (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height;
     renderPass.setViewport(
@@ -219,2 +238,3 @@ 0,
     );
+    device["swapChainHeight"] = tmpHeight;
     renderPass.setPipeline(this.pipeline);
@@ -233,3 +253,3 @@ renderPass.setStencilReference(1);
     if (uniformBuffers) {
-      this.bindings = this.device.createBindings({
+      this.bindings = renderCache.createBindings({
         pipeline: this.pipeline,
@@ -349,3 +369,4 @@ uniformBufferBindings: uniformBuffers.map((uniformBuffer, i) => {
         zfail: import_constants.stencilOpMap[opFront.zfail],
-        zpass: import_constants.stencilOpMap[opFront.zpass]
+        zpass: import_constants.stencilOpMap[opFront.zpass],
+        mask: func.mask
       },
@@ -355,3 +376,4 @@ opBack: {
         zfail: import_constants.stencilOpMap[opBack.zfail],
-        zpass: import_constants.stencilOpMap[opBack.zpass]
+        zpass: import_constants.stencilOpMap[opBack.zpass],
+        mask: func.mask
       }
@@ -358,0 +380,0 @@ };

lib/device/DeviceTexture2D.js

@@ -34,4 +34,28 @@ var __defProp = Object.defineProperty;
   constructor(device, options) {
+    this.device = device;
+    this.options = options;
     this.isDestroy = false;
     const {
+      wrapS = import_l7_core.gl.CLAMP_TO_EDGE,
+      wrapT = import_l7_core.gl.CLAMP_TO_EDGE,
+      aniso,
+      mipmap = false,
+      // premultiplyAlpha = false,
+      mag = import_l7_core.gl.NEAREST,
+      min = import_l7_core.gl.NEAREST
+    } = options;
+    this.createTexture(options);
+    this.sampler = device.createSampler({
+      addressModeU: import_constants.wrapModeMap[wrapS],
+      addressModeV: import_constants.wrapModeMap[wrapT],
+      minFilter: min === import_l7_core.gl.NEAREST ? import_g_device_api.FilterMode.POINT : import_g_device_api.FilterMode.BILINEAR,
+      magFilter: mag === import_l7_core.gl.NEAREST ? import_g_device_api.FilterMode.POINT : import_g_device_api.FilterMode.BILINEAR,
+      mipmapFilter: import_g_device_api.MipmapFilterMode.NO_MIP,
+      // lodMinClamp: 0,
+      // lodMaxClamp: 0,
+      maxAnisotropy: aniso
+    });
+  }
+  createTexture(options) {
+    const {
       data,
@@ -43,11 +67,7 @@ type = import_l7_core.gl.UNSIGNED_BYTE,
       format = import_l7_core.gl.RGBA,
-      wrapS = import_l7_core.gl.CLAMP_TO_EDGE,
-      wrapT = import_l7_core.gl.CLAMP_TO_EDGE,
-      aniso = 0,
+      aniso,
       alignment = 1,
       usage = import_l7_core.TextureUsage.SAMPLED,
-      mipmap = false,
       // premultiplyAlpha = false,
-      mag = import_l7_core.gl.NEAREST,
-      min = import_l7_core.gl.NEAREST
+      unorm = false,
       // colorSpace = gl.BROWSER_DEFAULT_WEBGL,
@@ -57,2 +77,3 @@ // x = 0,
       // copy = false,
+      label
     } = options;
@@ -63,3 +84,3 @@ this.width = width;
     if (type === import_l7_core.gl.UNSIGNED_BYTE && format === import_l7_core.gl.RGBA) {
-      pixelFormat = import_g_device_api.Format.U8_RGBA_RT;
+      pixelFormat = unorm ? import_g_device_api.Format.U8_RGBA_NORM : import_g_device_api.Format.U8_RGBA_RT;
     } else if (type === import_l7_core.gl.UNSIGNED_BYTE && format === import_l7_core.gl.LUMINANCE) {
@@ -76,3 +97,3 @@ pixelFormat = import_g_device_api.Format.U8_LUMINANCE;
     }
-    this.texture = device.createTexture({
+    this.texture = this.device.createTexture({
       format: pixelFormat,
@@ -86,17 +107,11 @@ width,
       },
-      mipLevelCount: usage === import_l7_core.TextureUsage.RENDER_TARGET ? 1 : mipmap ? 1 : 0
+      // mipLevelCount: usage === TextureUsage.RENDER_TARGET ? 1 : mipmap ? 1 : 0,
+      mipLevelCount: 1
     });
+    if (label) {
+      this.device.setResourceName(this.texture, label);
+    }
     if (data) {
       this.texture.setImageData([data]);
     }
-    this.sampler = device.createSampler({
-      addressModeU: import_constants.wrapModeMap[wrapS],
-      addressModeV: import_constants.wrapModeMap[wrapT],
-      minFilter: min === import_l7_core.gl.NEAREST ? import_g_device_api.FilterMode.POINT : import_g_device_api.FilterMode.BILINEAR,
-      magFilter: mag === import_l7_core.gl.NEAREST ? import_g_device_api.FilterMode.POINT : import_g_device_api.FilterMode.BILINEAR,
-      mipmapFilter: import_g_device_api.MipmapFilterMode.NO_MIP,
-      // lodMinClamp: 0,
-      // lodMaxClamp: 0,
-      maxAnisotropy: aniso
-    });
   }
@@ -113,4 +128,9 @@ get() {
   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;
   }
@@ -122,3 +142,3 @@ getSize() {
     var _a;
-    if (!this.isDestroy) {
+    if (!this.isDestroy && !this.texture.destroyed) {
       (_a = this.texture) == null ? void 0 : _a.destroy();
@@ -125,0 +145,0 @@ }

lib/device/index.js

@@ -45,2 +45,3 @@ var __create = Object.create;
 var import_g_device_api = require("@antv/g-device-api");
+var import_l7_utils = require("@antv/l7-utils");
 var import_inversify = require("inversify");
@@ -50,2 +51,3 @@ var import_reflect_metadata = require("reflect-metadata");
 var import_DeviceBuffer = __toESM(require("./DeviceBuffer"));
+var import_DeviceCache = require("./DeviceCache");
 var import_DeviceElements = __toESM(require("./DeviceElements"));
@@ -56,2 +58,3 @@ var import_DeviceFramebuffer = __toESM(require("./DeviceFramebuffer"));
 var import_webgl = require("./utils/webgl");
+var { isUndefined } = import_l7_utils.lodashUtil;
 var DeviceRendererService = class {
@@ -76,2 +79,11 @@ constructor() {
     };
+    this.useFramebufferAsync = async (framebuffer, drawCommands) => {
+      this.currentFramebuffer = framebuffer;
+      this.preRenderPass = this.renderPass;
+      this.beginFrame();
+      await drawCommands();
+      this.endFrame();
+      this.currentFramebuffer = null;
+      this.renderPass = this.preRenderPass;
+    };
     this.clear = (options) => {
@@ -81,2 +93,21 @@ const { color, depth, stencil, framebuffer = null } = options;
         framebuffer.clearOptions = { color, depth, stencil };
+      } else {
+        const platformString = this.queryVerdorInfo();
+        if (platformString === "WebGL1") {
+          const gl = this.getGLContext();
+          if (!isUndefined(stencil)) {
+            gl.clearStencil(stencil);
+            gl.clear(gl.STENCIL_BUFFER_BIT);
+          } else if (!isUndefined(depth)) {
+            gl.clearDepth(depth);
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+          }
+        } else if (platformString === "WebGL2") {
+          const gl = this.getGLContext();
+          if (!isUndefined(stencil)) {
+            gl.clearBufferiv(gl.STENCIL, 0, [stencil]);
+          } else if (!isUndefined(depth)) {
+            gl.clearBufferfv(gl.DEPTH, 0, [depth]);
+          }
+        }
       }
@@ -90,2 +121,4 @@ };
     }) => {
+      this.swapChain.configureSwapChain(width, height);
+      this.createMainColorDepthRT(width, height);
       this.width = width;
@@ -98,6 +131,10 @@ this.height = height;
       const texture = framebuffer["colorTexture"];
-      return readback.readTextureSync(
+      const result = readback.readTextureSync(
         texture,
         x,
-        y,
+        /**
+         * Origin is at lower-left corner. Width / height is already multiplied by dpr.
+         * WebGPU needs flipY
+         */
+        this.viewportOrigin === import_g_device_api.ViewportOrigin.LOWER_LEFT ? y : this.height - y,
         width,
@@ -107,3 +144,31 @@ height,
       );
+      readback.destroy();
+      return result;
     };
+    this.readPixelsAsync = async (options) => {
+      const { framebuffer, x, y, width, height } = options;
+      const readback = this.device.createReadback();
+      const texture = framebuffer["colorTexture"];
+      const result = await readback.readTexture(
+        texture,
+        x,
+        /**
+         * Origin is at lower-left corner. Width / height is already multiplied by dpr.
+         * WebGPU needs flipY
+         */
+        this.viewportOrigin === import_g_device_api.ViewportOrigin.LOWER_LEFT ? y : this.height - y,
+        width,
+        height,
+        new Uint8Array(width * height * 4)
+      );
+      if (this.viewportOrigin !== import_g_device_api.ViewportOrigin.LOWER_LEFT) {
+        for (let j = 0; j < result.length; j += 4) {
+          const t = result[j];
+          result[j] = result[j + 2];
+          result[j + 2] = t;
+        }
+      }
+      readback.destroy();
+      return result;
+    };
     this.getViewportSize = () => {
@@ -132,2 +197,3 @@ return {
       this.device.destroy();
+      this.renderCache.destroy();
     };
@@ -157,3 +223,5 @@ }
     this.swapChain = swapChain;
+    this.renderCache = new import_DeviceCache.RenderCache(this.device);
     this.currentFramebuffer = null;
+    this.viewportOrigin = this.device.queryVendorInfo().viewportOrigin;
     const gl = this.device["gl"];
@@ -164,7 +232,16 @@ this.extensionObject = {
     };
+    this.createMainColorDepthRT(canvas.width, canvas.height);
+  }
+  createMainColorDepthRT(width, height) {
+    if (this.mainColorRT) {
+      this.mainColorRT.destroy();
+    }
+    if (this.mainDepthRT) {
+      this.mainDepthRT.destroy();
+    }
     this.mainColorRT = this.device.createRenderTargetFromTexture(
       this.device.createTexture({
         format: import_g_device_api.Format.U8_RGBA_RT,
-        width: canvas.width,
-        height: canvas.height,
+        width,
+        height,
         usage: import_g_device_api.TextureUsage.RENDER_TARGET
@@ -176,4 +253,4 @@ })
         format: import_g_device_api.Format.D24_S8,
-        width: canvas.width,
-        height: canvas.height,
+        width,
+        height,
         usage: import_g_device_api.TextureUsage.RENDER_TARGET
@@ -185,5 +262,4 @@ })
     const { currentFramebuffer, swapChain, mainColorRT, mainDepthRT } = this;
-    const onscreenTexture = swapChain.getOnscreenTexture();
     const colorAttachment = currentFramebuffer ? currentFramebuffer["colorRenderTarget"] : mainColorRT;
-    const colorResolveTo = currentFramebuffer ? null : onscreenTexture;
+    const colorResolveTo = currentFramebuffer ? null : swapChain.getOnscreenTexture();
     const depthStencilAttachment = currentFramebuffer ? currentFramebuffer["depthRenderTarget"] : mainDepthRT;
@@ -206,2 +282,4 @@ const { color = [0, 0, 0, 0], depth = 1, stencil = 0 } = (
       colorClearColor: [colorClearColor],
+      // colorStore: [!!currentFramebuffer],
+      colorStore: [true],
       depthStencilAttachment,
@@ -208,0 +286,0 @@ depthClearValue,

lib/regl/index.js

@@ -70,2 +70,7 @@ var __create = Object.create;
     };
+    this.useFramebufferAsync = async (framebuffer, drawCommands) => {
+      this.gl({
+        framebuffer: framebuffer ? framebuffer.get() : null
+      })(drawCommands);
+    };
     this.clear = (options) => {
@@ -106,2 +111,5 @@ var _a;
     };
+    this.readPixelsAsync = async (options) => {
+      return this.readPixels(options);
+    };
     this.getViewportSize = () => {
@@ -108,0 +116,0 @@ return {

package.json

 {
   "name": "@antv/l7-renderer",
-  "version": "2.20.13",
+  "version": "2.20.14",
   "description": "",
@@ -27,5 +27,5 @@ "license": "ISC",
   "dependencies": {
-    "@antv/g-device-api": "^1.4.10",
-    "@antv/l7-core": "2.20.13",
-    "@antv/l7-utils": "2.20.13",
+    "@antv/g-device-api": "^1.5.0",
+    "@antv/l7-core": "2.20.14",
+    "@antv/l7-utils": "2.20.14",
     "@babel/runtime": "^7.7.7",
@@ -37,3 +37,3 @@ "inversify": "^5.0.1",
   "devDependencies": {
-    "@antv/l7-test-utils": "2.20.13",
+    "@antv/l7-test-utils": "2.20.14",
     "gl": "^6.0.2"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "9487cca3bdd14eb2fc81b310e4eae5d30a30496f"
+  "gitHead": "ad997ac14616fa503fec4022f1a1a48747524f87"
 }

No alert changes

Improved metrics

Total package byte prevSize

246794

increased by21.44%

Number of package files

72

increased by9.09%

Lines of code

6131

increased by20.29%

Dependency changes

• + Added@antv/l7-core@2.20.14(transitive)

• + Added@antv/l7-utils@2.20.14(transitive)

• - Removed@antv/l7-core@2.20.13(transitive)

• - Removed@antv/l7-utils@2.20.13(transitive)

• Updated@antv/g-device-api@^1.5.0

• Updated@antv/l7-core@2.20.14

• Updated@antv/l7-utils@2.20.14