@antv/l7-renderer 2.20.12 → 2.20.14

package/lib/device/DeviceCache.js

@@ -0,0 +1,181 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/device/DeviceCache.ts
+var DeviceCache_exports = {};
+__export(DeviceCache_exports, {
+  RenderCache: () => RenderCache
+});
+module.exports = __toCommonJS(DeviceCache_exports);
+var import_g_device_api = require("@antv/g-device-api");
+var import_HashMap = require("./utils/HashMap");
+function blendStateHash(hash, a) {
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.blendMode);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.blendSrcFactor);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.blendDstFactor);
+  return hash;
+}
+function attachmentStateHash(hash, a) {
+  hash = blendStateHash(hash, a.rgbBlendState);
+  hash = blendStateHash(hash, a.alphaBlendState);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.channelWriteMask);
+  return hash;
+}
+function colorHash(hash, a) {
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(
+    hash,
+    a.r << 24 | a.g << 16 | a.b << 8 | a.a
+  );
+  return hash;
+}
+function megaStateDescriptorHash(hash, a) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  for (let i = 0; i < a.attachmentsState.length; i++)
+    hash = attachmentStateHash(hash, a.attachmentsState[i]);
+  hash = colorHash(hash, a.blendConstant || import_g_device_api.TransparentBlack);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.depthCompare);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.depthWrite ? 1 : 0);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_a = a.stencilFront) == null ? void 0 : _a.compare);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_b = a.stencilFront) == null ? void 0 : _b.passOp);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_c = a.stencilFront) == null ? void 0 : _c.failOp);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_d = a.stencilFront) == null ? void 0 : _d.depthFailOp);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_e = a.stencilBack) == null ? void 0 : _e.compare);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_f = a.stencilBack) == null ? void 0 : _f.passOp);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_g = a.stencilBack) == null ? void 0 : _g.failOp);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, (_h = a.stencilBack) == null ? void 0 : _h.depthFailOp);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.stencilWrite ? 1 : 0);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.cullMode);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.frontFace ? 1 : 0);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.polygonOffset ? 1 : 0);
+  return hash;
+}
+function renderPipelineDescriptorHash(a) {
+  let hash = 0;
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.program.id);
+  if (a.inputLayout !== null)
+    hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.inputLayout.id);
+  hash = megaStateDescriptorHash(hash, a.megaStateDescriptor);
+  for (let i = 0; i < a.colorAttachmentFormats.length; i++)
+    hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.colorAttachmentFormats[i] || 0);
+  hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, a.depthStencilAttachmentFormat || 0);
+  return (0, import_HashMap.hashCodeNumberFinish)(hash);
+}
+function bindingsDescriptorHash(a) {
+  let hash = 0;
+  if (a.samplerBindings) {
+    for (let i = 0; i < a.samplerBindings.length; i++) {
+      const binding = a.samplerBindings[i];
+      if (binding !== null && binding.texture !== null)
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.texture.id);
+    }
+  }
+  if (a.uniformBufferBindings) {
+    for (let i = 0; i < a.uniformBufferBindings.length; i++) {
+      const binding = a.uniformBufferBindings[i];
+      if (binding !== null && binding.buffer !== null) {
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.buffer.id);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.binding);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.offset);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.size);
+      }
+    }
+  }
+  if (a.storageBufferBindings) {
+    for (let i = 0; i < a.storageBufferBindings.length; i++) {
+      const binding = a.storageBufferBindings[i];
+      if (binding !== null && binding.buffer !== null) {
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.buffer.id);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.binding);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.offset);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.size);
+      }
+    }
+  }
+  if (a.storageTextureBindings) {
+    for (let i = 0; i < a.storageTextureBindings.length; i++) {
+      const binding = a.storageTextureBindings[i];
+      if (binding !== null && binding.texture !== null) {
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.texture.id);
+        hash = (0, import_HashMap.hashCodeNumberUpdate)(hash, binding.binding);
+      }
+    }
+  }
+  return (0, import_HashMap.hashCodeNumberFinish)(hash);
+}
+var RenderCache = class {
+  constructor(device) {
+    this.device = device;
+    this.bindingsCache = new import_HashMap.HashMap(
+      import_g_device_api.bindingsDescriptorEquals,
+      bindingsDescriptorHash
+    );
+    this.renderPipelinesCache = new import_HashMap.HashMap(import_g_device_api.renderPipelineDescriptorEquals, renderPipelineDescriptorHash);
+    this.inputLayoutsCache = new import_HashMap.HashMap(
+      import_g_device_api.inputLayoutDescriptorEquals,
+      import_HashMap.nullHashFunc
+    );
+  }
+  createBindings(descriptor) {
+    var _a;
+    let bindings = this.bindingsCache.get(descriptor);
+    if (bindings === null) {
+      const descriptorCopy = (0, import_g_device_api.bindingsDescriptorCopy)(descriptor);
+      descriptorCopy.uniformBufferBindings = (_a = descriptorCopy.uniformBufferBindings) == null ? void 0 : _a.filter(
+        ({ size }) => size && size > 0
+      );
+      bindings = this.device.createBindings(descriptorCopy);
+      this.bindingsCache.add(descriptorCopy, bindings);
+    }
+    return bindings;
+  }
+  createRenderPipeline(descriptor) {
+    let renderPipeline = this.renderPipelinesCache.get(descriptor);
+    if (renderPipeline === null) {
+      const descriptorCopy = (0, import_g_device_api.renderPipelineDescriptorCopy)(descriptor);
+      descriptorCopy.colorAttachmentFormats = descriptorCopy.colorAttachmentFormats.filter((f) => f);
+      renderPipeline = this.device.createRenderPipeline(descriptorCopy);
+      this.renderPipelinesCache.add(descriptorCopy, renderPipeline);
+    }
+    return renderPipeline;
+  }
+  createInputLayout(descriptor) {
+    descriptor.vertexBufferDescriptors = descriptor.vertexBufferDescriptors.filter((d) => !!d);
+    let inputLayout = this.inputLayoutsCache.get(descriptor);
+    if (inputLayout === null) {
+      const descriptorCopy = (0, import_g_device_api.inputLayoutDescriptorCopy)(descriptor);
+      inputLayout = this.device.createInputLayout(descriptorCopy);
+      this.inputLayoutsCache.add(descriptorCopy, inputLayout);
+    }
+    return inputLayout;
+  }
+  destroy() {
+    for (const bindings of this.bindingsCache.values())
+      bindings.destroy();
+    for (const renderPipeline of this.renderPipelinesCache.values())
+      renderPipeline.destroy();
+    for (const inputLayout of this.inputLayoutsCache.values())
+      inputLayout.destroy();
+    this.bindingsCache.clear();
+    this.renderPipelinesCache.clear();
+    this.inputLayoutsCache.clear();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RenderCache
+});

package/lib/device/DeviceFramebuffer.js

@@ -31,10 +31,13 @@ var DeviceFramebuffer = class {
     this.createColorRenderTarget();
     this.createDepthRenderTarget();
   }
-  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();
         this.colorRenderTarget = this.device.createRenderTargetFromTexture(
           this.colorTexture
@@ -56,10 +59,13 @@ var DeviceFramebuffer = class {
       }
     }
   }
-  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();
         this.depthRenderTarget = this.device.createRenderTargetFromTexture(
           this.depthTexture
@@ -92,10 +98,12 @@ var DeviceFramebuffer = class {
   resize({ width, height }) {
     if (this.width !== width || this.height !== height) {
       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);
     }
   }
 };

package/lib/device/DeviceModel.js

@@ -47,14 +47,24 @@ var DeviceModel = class {
     this.destroyed = false;
     this.uniforms = {};
     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({
       vertex: {
         glsl: vs
       },
       fragment: {
-        glsl: fs
+        glsl: fs,
+        postprocess: (fs2) => diagnosticDerivativeUniformityHeader + fs2
       }
     });
     this.program = program;
@@ -96,7 +106,7 @@ var DeviceModel = class {
     if (elements) {
       this.indexBuffer = elements.get();
     }
-    const inputLayout = device.createInputLayout({
+    const inputLayout = service.renderCache.createInputLayout({
       vertexBufferDescriptors,
       indexBufferFormat: elements ? import_g_device_api.Format.U32_R : null,
       program
@@ -114,7 +124,7 @@ var DeviceModel = class {
     const blendEnabled = !!(blendParams && blendParams.enable);
     const stencilParams = this.getStencilDrawParams({ stencil });
     const stencilEnabled = !!(stencilParams && stencilParams.enable);
-    return this.device.createRenderPipeline({
+    return this.service.renderCache.createRenderPipeline({
       inputLayout: this.inputLayout,
       program: this.program,
       topology: import_constants.primitiveMap[primitive],
@@ -155,11 +165,17 @@ var DeviceModel = class {
         stencilWrite: stencilEnabled,
         stencilFront: {
           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
         }
       }
     });
@@ -202,14 +218,18 @@ var DeviceModel = class {
       ...this.uniforms,
       ...this.extractUniforms(uniforms)
     };
-    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(
       0,
       0,
       (currentFramebuffer == null ? void 0 : currentFramebuffer["width"]) || width,
       (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height
     );
+    device["swapChainHeight"] = tmpHeight;
     renderPass.setPipeline(this.pipeline);
     renderPass.setStencilReference(1);
     renderPass.setVertexInput(
@@ -223,7 +243,7 @@ var DeviceModel = class {
       } : null
     );
     if (uniformBuffers) {
-      this.bindings = this.device.createBindings({
+      this.bindings = renderCache.createBindings({
         pipeline: this.pipeline,
         uniformBufferBindings: uniformBuffers.map((uniformBuffer, i) => {
           const buffer = uniformBuffer;
@@ -338,12 +358,14 @@ var DeviceModel = class {
       opFront: {
         fail: import_constants.stencilOpMap[opFront.fail],
         zfail: import_constants.stencilOpMap[opFront.zfail],
-        zpass: import_constants.stencilOpMap[opFront.zpass]
+        zpass: import_constants.stencilOpMap[opFront.zpass],
+        mask: func.mask
       },
       opBack: {
         fail: import_constants.stencilOpMap[opBack.fail],
         zfail: import_constants.stencilOpMap[opBack.zfail],
-        zpass: import_constants.stencilOpMap[opBack.zpass]
+        zpass: import_constants.stencilOpMap[opBack.zpass],
+        mask: func.mask
       }
     };
   }

package/lib/device/DeviceTexture2D.js

@@ -31,7 +31,31 @@ function isTexture2D(t) {
 }
 var DeviceTexture2D = class {
   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,
       type = import_l7_core.gl.UNSIGNED_BYTE,
@@ -39,25 +63,22 @@ var DeviceTexture2D = class {
       height,
       flipY = false,
       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,
       // x = 0,
       // y = 0,
       // copy = false,
+      label
     } = options;
     this.width = width;
     this.height = height;
     let pixelFormat = import_g_device_api.Format.U8_RGBA_RT;
     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) {
       pixelFormat = import_g_device_api.Format.U8_LUMINANCE;
     } else if (type === import_l7_core.gl.FLOAT && format === import_l7_core.gl.RGB) {
@@ -69,7 +90,7 @@ var DeviceTexture2D = class {
     } else {
       throw new Error(`create texture error, type: ${type}, format: ${format}`);
     }
-    this.texture = device.createTexture({
+    this.texture = this.device.createTexture({
       format: pixelFormat,
       width,
       height,
@@ -78,21 +99,15 @@ var DeviceTexture2D = class {
         unpackFlipY: flipY,
         packAlignment: alignment
       },
-      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
-    });
   }
   get() {
     return this.texture;
@@ -104,15 +119,20 @@ var DeviceTexture2D = class {
   bind() {
   }
   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;
   }
   getSize() {
     return [this.width, this.height];
   }
   destroy() {
     var _a;
-    if (!this.isDestroy) {
+    if (!this.isDestroy && !this.texture.destroyed) {
       (_a = this.texture) == null ? void 0 : _a.destroy();
     }
     this.isDestroy = true;

package/lib/device/index.js

@@ -42,15 +42,18 @@ __export(device_exports, {
 });
 module.exports = __toCommonJS(device_exports);
 var import_g_device_api = require("@antv/g-device-api");
+var import_l7_utils = require("@antv/l7-utils");
 var import_inversify = require("inversify");
 var import_reflect_metadata = require("reflect-metadata");
 var import_DeviceAttribute = __toESM(require("./DeviceAttribute"));
 var import_DeviceBuffer = __toESM(require("./DeviceBuffer"));
+var import_DeviceCache = require("./DeviceCache");
 var import_DeviceElements = __toESM(require("./DeviceElements"));
 var import_DeviceFramebuffer = __toESM(require("./DeviceFramebuffer"));
 var import_DeviceModel = __toESM(require("./DeviceModel"));
 var import_DeviceTexture2D = __toESM(require("./DeviceTexture2D"));
 var import_webgl = require("./utils/webgl");
+var { isUndefined } = import_l7_utils.lodashUtil;
 var DeviceRendererService = class {
   constructor() {
     this.uniformBuffers = [];
@@ -70,10 +73,38 @@ var DeviceRendererService = class {
       this.endFrame();
       this.currentFramebuffer = null;
     };
+    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) => {
       const { color, depth, stencil, framebuffer = null } = options;
       if (framebuffer) {
         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]);
+          }
+        }
       }
     };
     this.viewport = ({
@@ -82,6 +113,8 @@ var DeviceRendererService = class {
       width,
       height
     }) => {
+      this.swapChain.configureSwapChain(width, height);
+      this.createMainColorDepthRT(width, height);
       this.width = width;
       this.height = height;
     };
@@ -89,14 +122,46 @@ var DeviceRendererService = class {
       const { framebuffer, x, y, width, height } = options;
       const readback = this.device.createReadback();
       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,
         height,
         new Uint8Array(width * height * 4)
       );
+      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 = () => {
       return {
@@ -121,6 +186,7 @@ var DeviceRendererService = class {
         buffer.destroy();
       });
       this.device.destroy();
+      this.renderCache.destroy();
     };
   }
   async init(canvas, cfg) {
@@ -145,34 +211,44 @@ var DeviceRendererService = class {
     swapChain.configureSwapChain(canvas.width, canvas.height);
     this.device = swapChain.getDevice();
     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"];
     this.extensionObject = {
       // @ts-ignore
       OES_texture_float: !(0, import_webgl.isWebGL2)(gl) && this.device["OES_texture_float"]
     };
+    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
       })
     );
     this.mainDepthRT = this.device.createRenderTargetFromTexture(
       this.device.createTexture({
         format: import_g_device_api.Format.D24_S8,
-        width: canvas.width,
-        height: canvas.height,
+        width,
+        height,
         usage: import_g_device_api.TextureUsage.RENDER_TARGET
       })
     );
   }
   beginFrame() {
     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;
     const { color = [0, 0, 0, 0], depth = 1, stencil = 0 } = (
       // @ts-ignore
@@ -190,6 +266,8 @@ var DeviceRendererService = class {
       colorAttachment: [colorAttachment],
       colorResolveTo: [colorResolveTo],
       colorClearColor: [colorClearColor],
+      // colorStore: [!!currentFramebuffer],
+      colorStore: [true],
       depthStencilAttachment,
       depthClearValue,
       stencilClearValue