@antv/l7-renderer 2.20.13 → 2.20.15

package/es/regl/index.js

@@ -53,6 +53,24 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
         framebuffer: framebuffer ? framebuffer.get() : null
       })(drawCommands);
     });
+    _defineProperty(this, "useFramebufferAsync", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(framebuffer, drawCommands) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this.gl({
+                framebuffer: framebuffer ? framebuffer.get() : null
+              })(drawCommands);
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }());
     _defineProperty(this, "clear", function (options) {
       var _this$gl;
       // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
@@ -69,11 +87,11 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
       reglClearOptions.framebuffer = framebuffer === null ? framebuffer : framebuffer.get();
       (_this$gl = _this.gl) === null || _this$gl === void 0 || _this$gl.clear(reglClearOptions);
     });
-    _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
       // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
       _this.gl._gl.viewport(x, y, width, height);
@@ -98,6 +116,22 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
       }
       return _this.gl.read(readPixelsOptions);
     });
+    _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 () {
       return {
         width: _this.gl._gl.drawingBufferWidth,
@@ -134,22 +168,22 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
   _createClass(ReglRendererService, [{
     key: "init",
     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:
               // this.$container = $container;
               this.canvas = canvas;
               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) {
                 regl({
                   canvas: _this2.canvas,
@@ -180,18 +214,18 @@ var ReglRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/funct
                 });
               });
             case 7:
-              this.gl = _context.sent;
+              this.gl = _context3.sent;
             case 8:
               this.extensionObject = {
                 OES_texture_float: this.testExtension('OES_texture_float')
               };
             case 9:
             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);
       }
       return init;

package/lib/device/DeviceCache.js

@@ -0,0 +1,212 @@
+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);
+}
+function programDescriptorEquals(a, b) {
+  var _a, _b, _c, _d;
+  return ((_a = a.vertex) == null ? void 0 : _a.glsl) === ((_b = b.vertex) == null ? void 0 : _b.glsl) && ((_c = a.fragment) == null ? void 0 : _c.glsl) === ((_d = b.fragment) == null ? void 0 : _d.glsl);
+}
+function programDescriptorCopy(a) {
+  var _a, _b;
+  return {
+    vertex: {
+      glsl: (_a = a.vertex) == null ? void 0 : _a.glsl
+    },
+    fragment: {
+      glsl: (_b = a.fragment) == null ? void 0 : _b.glsl
+    }
+  };
+}
+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
+    );
+    this.programCache = new import_HashMap.HashMap(
+      programDescriptorEquals,
+      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;
+  }
+  createProgram(descriptor) {
+    let program = this.programCache.get(descriptor);
+    if (program === null) {
+      const descriptorCopy = programDescriptorCopy(descriptor);
+      program = this.device.createProgram(descriptor);
+      this.programCache.add(descriptorCopy, program);
+    }
+    return program;
+  }
+  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();
+    for (const program of this.programCache.values())
+      program.destroy();
+    this.bindingsCache.clear();
+    this.renderPipelinesCache.clear();
+    this.inputLayoutsCache.clear();
+    this.programCache.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,17 +47,26 @@ 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 program = device.createProgram({
+    const diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? "" : this.service["viewportOrigin"] === import_g_device_api.ViewportOrigin.UPPER_LEFT ? "diagnostic(off,derivative_uniformity);" : "";
+    this.program = service.renderCache.createProgram({
       vertex: {
         glsl: vs
       },
       fragment: {
-        glsl: fs
+        glsl: fs,
+        postprocess: (fs2) => diagnosticDerivativeUniformityHeader + fs2
       }
     });
-    this.program = program;
     if (uniforms) {
       this.uniforms = this.extractUniforms(uniforms);
     }
@@ -96,10 +105,10 @@ 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
+      program: this.program
     });
     this.inputLayout = inputLayout;
     this.pipeline = this.createPipeline(options);
@@ -115,6 +124,7 @@ var DeviceModel = class {
     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;
@@ -311,11 +331,11 @@ var DeviceModel = class {
   }) {
     const {
       enable,
-      mask = -1,
+      mask = 4294967295,
       func = {
         cmp: import_l7_core.gl.ALWAYS,
         ref: 0,
-        mask: -1
+        mask: 4294967295
       },
       opFront = {
         fail: import_l7_core.gl.KEEP,
@@ -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

@@ -26,42 +26,71 @@ module.exports = __toCommonJS(DeviceTexture2D_exports);
 var import_g_device_api = require("@antv/g-device-api");
 var import_l7_core = require("@antv/l7-core");
 var import_constants = require("./constants");
+var import_typedarray = require("./utils/typedarray");
 function isTexture2D(t) {
   return !!(t && t["texture"]);
 }
 var DeviceTexture2D = class {
   constructor(device, options) {
+    this.device = device;
+    this.options = options;
     this.isDestroy = false;
     const {
-      data,
+      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 {
       type = import_l7_core.gl.UNSIGNED_BYTE,
       width,
       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;
+    let { data } = 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) {
-      pixelFormat = import_g_device_api.Format.F32_RGB;
+      if (this.device.queryVendorInfo().platformString === "WebGPU") {
+        if (data) {
+          data = (0, import_typedarray.extend3ChannelsTo4)(data, 0);
+        }
+        pixelFormat = import_g_device_api.Format.F32_RGBA;
+      } else {
+        pixelFormat = import_g_device_api.Format.F32_RGB;
+      }
     } else if (type === import_l7_core.gl.FLOAT && format === import_l7_core.gl.RGBA) {
       pixelFormat = import_g_device_api.Format.F32_RGBA;
     } else if (type === import_l7_core.gl.FLOAT && format === import_l7_core.gl.RED) {
@@ -69,7 +98,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 +107,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 +127,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;