@antv/l7-renderer 2.20.14 → 2.20.15

package/es/device/DeviceCache.d.ts

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

package/es/device/DeviceCache.js

@@ -92,12 +92,28 @@ function bindingsDescriptorHash(a) {
   }
   return hashCodeNumberFinish(hash);
 }
+function programDescriptorEquals(a, b) {
+  var _a$vertex, _b$vertex, _a$fragment, _b$fragment;
+  return ((_a$vertex = a.vertex) === null || _a$vertex === void 0 ? void 0 : _a$vertex.glsl) === ((_b$vertex = b.vertex) === null || _b$vertex === void 0 ? void 0 : _b$vertex.glsl) && ((_a$fragment = a.fragment) === null || _a$fragment === void 0 ? void 0 : _a$fragment.glsl) === ((_b$fragment = b.fragment) === null || _b$fragment === void 0 ? void 0 : _b$fragment.glsl);
+}
+function programDescriptorCopy(a) {
+  var _a$vertex2, _a$fragment2;
+  return {
+    vertex: {
+      glsl: (_a$vertex2 = a.vertex) === null || _a$vertex2 === void 0 ? void 0 : _a$vertex2.glsl
+    },
+    fragment: {
+      glsl: (_a$fragment2 = a.fragment) === null || _a$fragment2 === void 0 ? void 0 : _a$fragment2.glsl
+    }
+  };
+}
 export var RenderCache = /*#__PURE__*/function () {
   function RenderCache(device) {
     _classCallCheck(this, RenderCache);
     _defineProperty(this, "bindingsCache", new HashMap(bindingsDescriptorEquals, bindingsDescriptorHash));
     _defineProperty(this, "renderPipelinesCache", new HashMap(renderPipelineDescriptorEquals, renderPipelineDescriptorHash));
     _defineProperty(this, "inputLayoutsCache", new HashMap(inputLayoutDescriptorEquals, nullHashFunc));
+    _defineProperty(this, "programCache", new HashMap(programDescriptorEquals, nullHashFunc));
     this.device = device;
   }
   _createClass(RenderCache, [{
@@ -145,6 +161,17 @@ export var RenderCache = /*#__PURE__*/function () {
       }
       return inputLayout;
     }
+  }, {
+    key: "createProgram",
+    value: function createProgram(descriptor) {
+      var program = this.programCache.get(descriptor);
+      if (program === null) {
+        var descriptorCopy = programDescriptorCopy(descriptor);
+        program = this.device.createProgram(descriptor);
+        this.programCache.add(descriptorCopy, program);
+      }
+      return program;
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -179,17 +206,28 @@ export var RenderCache = /*#__PURE__*/function () {
           var inputLayout = _step3.value;
           inputLayout.destroy();
         }
-        // for (const program of this.programCache.values()) program.destroy();
-        // for (const sampler of this.samplerCache.values()) sampler.destroy();
       } catch (err) {
         _iterator3.e(err);
       } finally {
         _iterator3.f();
       }
+      var _iterator4 = _createForOfIteratorHelper(this.programCache.values()),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var program = _step4.value;
+          program.destroy();
+        }
+        // for (const sampler of this.samplerCache.values()) sampler.destroy();
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
       this.bindingsCache.clear();
       this.renderPipelinesCache.clear();
       this.inputLayoutsCache.clear();
-      // this.programCache.clear();
+      this.programCache.clear();
       // this.samplerCache.clear();
     }
   }]);

package/es/device/DeviceModel.js

@@ -29,7 +29,7 @@ var DeviceModel = /*#__PURE__*/function () {
       diagnosticDerivativeUniformityEnabled = options.diagnosticDerivativeUniformityEnabled;
     this.options = options;
     var diagnosticDerivativeUniformityHeader = diagnosticDerivativeUniformityEnabled ? '' : this.service['viewportOrigin'] === ViewportOrigin.UPPER_LEFT ? 'diagnostic(off,derivative_uniformity);' : '';
-    var program = device.createProgram({
+    this.program = service.renderCache.createProgram({
       vertex: {
         glsl: vs
       },
@@ -40,7 +40,6 @@ var DeviceModel = /*#__PURE__*/function () {
         }
       }
     });
-    this.program = program;
     if (uniforms) {
       this.uniforms = this.extractUniforms(uniforms);
     }
@@ -83,12 +82,10 @@ var DeviceModel = /*#__PURE__*/function () {
     if (elements) {
       this.indexBuffer = elements.get();
     }
-
-    // const inputLayout = device.createInputLayout({
     var inputLayout = service.renderCache.createInputLayout({
       vertexBufferDescriptors: vertexBufferDescriptors,
       indexBufferFormat: elements ? Format.U32_R : null,
-      program: program
+      program: this.program
     });
     this.inputLayout = inputLayout;
     this.pipeline = this.createPipeline(options);
@@ -119,9 +116,8 @@ var DeviceModel = /*#__PURE__*/function () {
         stencil: stencil
       });
       var stencilEnabled = !!(stencilParams && stencilParams.enable);
-
-      // return this.device.createRenderPipeline({
-      return this.service.renderCache.createRenderPipeline({
+      return this.device.createRenderPipeline({
+        // return this.service.renderCache.createRenderPipeline({
         inputLayout: this.inputLayout,
         program: this.program,
         topology: primitiveMap[primitive],
@@ -351,12 +347,12 @@ var DeviceModel = /*#__PURE__*/function () {
       var _ref5 = stencil || {},
         enable = _ref5.enable,
         _ref5$mask = _ref5.mask,
-        mask = _ref5$mask === void 0 ? -1 : _ref5$mask,
+        mask = _ref5$mask === void 0 ? 0xffffffff : _ref5$mask,
         _ref5$func = _ref5.func,
         func = _ref5$func === void 0 ? {
           cmp: gl.ALWAYS,
           ref: 0,
-          mask: -1
+          mask: 0xffffffff
         } : _ref5$func,
         _ref5$opFront = _ref5.opFront,
         opFront = _ref5$opFront === void 0 ? {

package/es/device/DeviceTexture2D.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { TextureUsage as DeviceTextureUsage, FilterMode, Format, MipmapFilterMode } from '@antv/g-device-api';
 import { TextureUsage, gl } from '@antv/l7-core';
 import { wrapModeMap } from "./constants";
+import { extend3ChannelsTo4 } from "./utils/typedarray";
 export function isTexture2D(t) {
   return !!(t && t['texture']);
 }
@@ -39,8 +40,7 @@ var DeviceTexture2D = /*#__PURE__*/function () {
   _createClass(DeviceTexture2D, [{
     key: "createTexture",
     value: function createTexture(options) {
-      var data = options.data,
-        _options$type = options.type,
+      var _options$type = options.type,
         type = _options$type === void 0 ? gl.UNSIGNED_BYTE : _options$type,
         width = options.width,
         height = options.height,
@@ -56,6 +56,7 @@ var DeviceTexture2D = /*#__PURE__*/function () {
         _options$unorm = options.unorm,
         unorm = _options$unorm === void 0 ? false : _options$unorm,
         label = options.label;
+      var data = options.data;
       this.width = width;
       this.height = height;
       var pixelFormat = Format.U8_RGBA_RT;
@@ -64,7 +65,16 @@ var DeviceTexture2D = /*#__PURE__*/function () {
       } 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;
+        // @see https://github.com/antvis/L7/pull/2262
+        if (this.device.queryVendorInfo().platformString === 'WebGPU') {
+          if (data) {
+            // @ts-ignore
+            data = extend3ChannelsTo4(data, 0);
+          }
+          pixelFormat = Format.F32_RGBA;
+        } else {
+          pixelFormat = Format.F32_RGB;
+        }
       } else if (type === gl.FLOAT && format === gl.RGBA) {
         pixelFormat = Format.F32_RGBA;
       } else if (type === gl.FLOAT && format === gl.RED) {

package/es/device/index.js

@@ -302,6 +302,7 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
   }, {
     key: "beginFrame",
     value: function beginFrame() {
+      this.device.beginFrame();
       var currentFramebuffer = this.currentFramebuffer,
         swapChain = this.swapChain,
         mainColorRT = this.mainColorRT,
@@ -337,6 +338,7 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
     key: "endFrame",
     value: function endFrame() {
       this.device.submitPass(this.renderPass);
+      this.device.endFrame();
     }
   }, {
     key: "getPointSizeRange",

package/es/device/utils/typedarray.d.ts

@@ -1,2 +1,7 @@
 export type TypedArray = Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array;
 export declare function isTypedArray(x: any): x is TypedArray;
+/**
+ * WebGPU does not support RGB texture, so we need to convert RGB to RGBA
+ * @see https://github.com/antvis/L7/pull/2262
+ */
+export declare function extend3ChannelsTo4(array: Float32Array, valueToInsert: number): Float32Array;

package/es/device/utils/typedarray.js

@@ -13,4 +13,22 @@ var dtypes = {
 // eslint-disable-next-line
 export function isTypedArray(x) {
   return Object.prototype.toString.call(x) in dtypes;
+}
+
+/**
+ * WebGPU does not support RGB texture, so we need to convert RGB to RGBA
+ * @see https://github.com/antvis/L7/pull/2262
+ */
+export function extend3ChannelsTo4(array, valueToInsert) {
+  var originalLength = array.length;
+  var insertCount = Math.ceil(originalLength / 3);
+  var newLength = originalLength + insertCount;
+  var newArray = new Float32Array(newLength);
+  for (var i = 0; i < newLength; i += 4) {
+    newArray[i] = array[i / 4 * 3];
+    newArray[i + 1] = array[i / 4 * 3 + 1];
+    newArray[i + 2] = array[i / 4 * 3 + 2];
+    newArray[i + 3] = valueToInsert;
+  }
+  return newArray;
 }

package/lib/device/DeviceCache.js

@@ -117,6 +117,21 @@ function bindingsDescriptorHash(a) {
   }
   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;
@@ -129,6 +144,10 @@ var RenderCache = class {
       import_g_device_api.inputLayoutDescriptorEquals,
       import_HashMap.nullHashFunc
     );
+    this.programCache = new import_HashMap.HashMap(
+      programDescriptorEquals,
+      import_HashMap.nullHashFunc
+    );
   }
   createBindings(descriptor) {
     var _a;
@@ -163,6 +182,15 @@ var RenderCache = class {
     }
     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();
@@ -170,9 +198,12 @@ var RenderCache = class {
       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:

package/lib/device/DeviceModel.js

@@ -58,7 +58,7 @@ var DeviceModel = class {
     } = 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({
+    this.program = service.renderCache.createProgram({
       vertex: {
         glsl: vs
       },
@@ -67,7 +67,6 @@ var DeviceModel = class {
         postprocess: (fs2) => diagnosticDerivativeUniformityHeader + fs2
       }
     });
-    this.program = program;
     if (uniforms) {
       this.uniforms = this.extractUniforms(uniforms);
     }
@@ -109,7 +108,7 @@ var DeviceModel = class {
     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);
@@ -124,7 +123,8 @@ var DeviceModel = class {
     const blendEnabled = !!(blendParams && blendParams.enable);
     const stencilParams = this.getStencilDrawParams({ stencil });
     const stencilEnabled = !!(stencilParams && stencilParams.enable);
-    return this.service.renderCache.createRenderPipeline({
+    return this.device.createRenderPipeline({
+      // return this.service.renderCache.createRenderPipeline({
       inputLayout: this.inputLayout,
       program: this.program,
       topology: import_constants.primitiveMap[primitive],
@@ -331,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,

package/lib/device/DeviceTexture2D.js

@@ -26,6 +26,7 @@ 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"]);
 }
@@ -57,7 +58,6 @@ var DeviceTexture2D = class {
   }
   createTexture(options) {
     const {
-      data,
       type = import_l7_core.gl.UNSIGNED_BYTE,
       width,
       height,
@@ -74,6 +74,7 @@ var DeviceTexture2D = class {
       // copy = false,
       label
     } = options;
+    let { data } = options;
     this.width = width;
     this.height = height;
     let pixelFormat = import_g_device_api.Format.U8_RGBA_RT;
@@ -82,7 +83,14 @@ var DeviceTexture2D = class {
     } 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) {

package/lib/device/index.js

@@ -246,6 +246,7 @@ var DeviceRendererService = class {
     );
   }
   beginFrame() {
+    this.device.beginFrame();
     const { currentFramebuffer, swapChain, mainColorRT, mainDepthRT } = this;
     const colorAttachment = currentFramebuffer ? currentFramebuffer["colorRenderTarget"] : mainColorRT;
     const colorResolveTo = currentFramebuffer ? null : swapChain.getOnscreenTexture();
@@ -276,6 +277,7 @@ var DeviceRendererService = class {
   }
   endFrame() {
     this.device.submitPass(this.renderPass);
+    this.device.endFrame();
   }
   getPointSizeRange() {
     const gl = this.device["gl"];

package/lib/device/utils/typedarray.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/device/utils/typedarray.ts
 var typedarray_exports = {};
 __export(typedarray_exports, {
+  extend3ChannelsTo4: () => extend3ChannelsTo4,
   isTypedArray: () => isTypedArray
 });
 module.exports = __toCommonJS(typedarray_exports);
@@ -37,7 +38,21 @@ var dtypes = {
 function isTypedArray(x) {
   return Object.prototype.toString.call(x) in dtypes;
 }
+function extend3ChannelsTo4(array, valueToInsert) {
+  const originalLength = array.length;
+  const insertCount = Math.ceil(originalLength / 3);
+  const newLength = originalLength + insertCount;
+  const newArray = new Float32Array(newLength);
+  for (let i = 0; i < newLength; i += 4) {
+    newArray[i] = array[i / 4 * 3];
+    newArray[i + 1] = array[i / 4 * 3 + 1];
+    newArray[i + 2] = array[i / 4 * 3 + 2];
+    newArray[i + 3] = valueToInsert;
+  }
+  return newArray;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  extend3ChannelsTo4,
   isTypedArray
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.20.14",
+  "version": "2.20.15",
   "description": "",
   "license": "ISC",
   "author": "xiaoiver",
@@ -24,20 +24,20 @@
     "tsc": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "@antv/g-device-api": "^1.5.0",
-    "@antv/l7-core": "2.20.14",
-    "@antv/l7-utils": "2.20.14",
+    "@antv/g-device-api": "^1.6.4",
+    "@antv/l7-core": "2.20.15",
+    "@antv/l7-utils": "2.20.15",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "reflect-metadata": "^0.2.1",
     "regl": "1.6.1"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.20.14",
+    "@antv/l7-test-utils": "2.20.15",
     "gl": "^6.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ad997ac14616fa503fec4022f1a1a48747524f87"
+  "gitHead": "283c12854a06cd2181552d6a9cf00d3e34bbd58e"
 }