@antv/g-webgpu - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

@@ -6,2 +6,16 @@ # Change Log
 
+# [0.6.0](https://github.com/xiaoiver/GWebGPUEngine/compare/v0.4.1...v0.6.0) (2020-11-23)
+
+
+### Features
+
+* modify Kernel & Compiler API ([a6003b5](https://github.com/xiaoiver/GWebGPUEngine/commit/a6003b54fa7581815a7d4c0ef503fb334546eacb))
+* ray tracer ([3fa95b9](https://github.com/xiaoiver/GWebGPUEngine/commit/3fa95b939b2dbf519ebf266b5e57bc7493258b9b))
+* support render multi views in the same canvas [#29](https://github.com/xiaoiver/GWebGPUEngine/issues/29) ([18bc4b5](https://github.com/xiaoiver/GWebGPUEngine/commit/18bc4b518baf2dfc3980e9a5a2cc6d8789e3f141))
+* support unit chart ([11511a1](https://github.com/xiaoiver/GWebGPUEngine/commit/11511a17b71f82de0de48f6cd2e51cd1c09f18d7))
+
+
+
+
+
 # [0.5.0](https://github.com/xiaoiver/GWebGPUEngine/compare/v0.4.1...v0.5.0) (2020-11-06)
@@ -8,0 +22,0 @@

es/index.js

@@ -1,35 +0,6 @@
-import { createContainerModule, IDENTIFIER } from '@antv/g-webgpu-core';
-import { WebGLEngine, WebGPUEngine } from '@antv/g-webgpu-engine';
-import { Container } from 'inversify';
-import { Camera } from './Camera';
+import { Camera } from './camera/Camera';
 import { Kernel } from './Kernel';
-import { Point } from './mesh/point/Point';
-import { Renderable } from './Renderable';
-import { Renderer } from './Renderer';
-import { Scene } from './Scene';
-import { View } from './View';
+import { Renderable } from './renderable/Renderable';
 import { World } from './World';
-export var RenderableType = {
-  Point: Symbol('Point'),
-  Line: Symbol('Line')
-};
-var container = new Container();
-container.load(createContainerModule()); // bind render engine, fallback to WebGL
-
-var engineClazz = !navigator.gpu ? WebGLEngine : WebGPUEngine;
-
-if (!container.isBound(IDENTIFIER.RenderEngine)) {
-  container.bind(IDENTIFIER.RenderEngine) // @ts-ignore
-  .to(engineClazz).inSingletonScope();
-}
-
-container.bind(Renderer).toSelf();
-container.bind(Kernel).toSelf();
-container.bind(Renderable).toSelf();
-container.bind(View).toSelf();
-container.bind(Camera).toSelf();
-container.bind(Scene).toSelf();
-container.bind(World).toSelf().inSingletonScope();
-container.bind(IDENTIFIER.Renderable).to(Point).whenTargetNamed(RenderableType.Point);
-export { World, Kernel, Camera, container };
+export { World, Kernel, Camera, Renderable };
 //# sourceMappingURL=index.js.map

es/Renderer.js

@@ -21,3 +21,2 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { inject, injectable } from 'inversify';
-import { container } from '.';
 export var Renderer = (_dec = injectable(), _dec2 = inject(IDENTIFIER.RenderEngine), _dec3 = inject(IDENTIFIER.ShaderModuleService), _dec4 = inject(IDENTIFIER.ConfigService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
@@ -35,2 +34,6 @@ function Renderer() {
     this.rendering = false;
+    this.pendings = [];
+    this.views = [];
+    this.size = void 0;
+    this.container = void 0;
   }
@@ -42,3 +45,3 @@
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var config, systems, _iterator, _step, system;
+        var systems, config, _iterator, _step, system;
 
@@ -51,4 +54,4 @@ return _regeneratorRuntime.wrap(function _callee$(_context) {
                 this.shaderModule.registerBuiltinModules();
+                systems = this.container.getAll(IDENTIFIER.Systems);
                 config = this.configService.get();
-                systems = container.getAll(IDENTIFIER.Systems);
 
@@ -130,4 +133,11 @@ if (!config.canvas) {
     value: function () {
-      var _render = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(view) {
-        var systems, _iterator2, _step2, system;
+      var _render = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var systems,
+            _len,
+            views,
+            _key,
+            _iterator2,
+            _step2,
+            system,
+            _args2 = arguments;
 
@@ -146,13 +156,24 @@ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               case 2:
+                if (this.pendings.length) {
+                  this.pendings.forEach(function (pending) {
+                    pending();
+                  });
+                }
+
                 this.rendering = true;
                 this.engine.beginFrame();
-                systems = container.getAll(IDENTIFIER.Systems);
+                systems = this.container.getAll(IDENTIFIER.Systems);
+
+                for (_len = _args2.length, views = new Array(_len), _key = 0; _key < _len; _key++) {
+                  views[_key] = _args2[_key];
+                }
+
                 _iterator2 = _createForOfIteratorHelper(systems);
-                _context2.prev = 6;
+                _context2.prev = 8;
 
                 _iterator2.s();
 
-              case 8:
+              case 10:
                 if ((_step2 = _iterator2.n()).done) {
-                  _context2.next = 15;
+                  _context2.next = 17;
                   break;
@@ -164,31 +185,31 @@ }
                 if (!system.execute) {
-                  _context2.next = 13;
+                  _context2.next = 15;
                   break;
                 }
 
-                _context2.next = 13;
-                return system.execute(view);
+                _context2.next = 15;
+                return system.execute(views);
 
-              case 13:
-                _context2.next = 8;
-                break;
-
               case 15:
-                _context2.next = 20;
+                _context2.next = 10;
                 break;
 
               case 17:
-                _context2.prev = 17;
-                _context2.t0 = _context2["catch"](6);
+                _context2.next = 22;
+                break;
 
+              case 19:
+                _context2.prev = 19;
+                _context2.t0 = _context2["catch"](8);
+
                 _iterator2.e(_context2.t0);
 
-              case 20:
-                _context2.prev = 20;
+              case 22:
+                _context2.prev = 22;
 
                 _iterator2.f();
 
-                return _context2.finish(20);
+                return _context2.finish(22);
 
-              case 23:
+              case 25:
                 // 录制一遍绘制命令，后续直接播放
@@ -213,3 +234,3 @@ // if (this.useRenderBundle) {
 
-              case 25:
+              case 27:
               case "end":
@@ -219,6 +240,6 @@ return _context2.stop();
           }
-        }, _callee2, this, [[6, 17, 20, 23]]);
+        }, _callee2, this, [[8, 19, 22, 25]]);
       }));
 
-      function render(_x) {
+      function render() {
         return _render.apply(this, arguments);
@@ -229,2 +250,52 @@ }
     }()
+  }, {
+    key: "clear",
+    value: function clear(options) {
+      var _this = this;
+
+      if (this.inited) {
+        this.engine.clear(options);
+      } else {
+        this.pendings.unshift(function () {
+          _this.engine.clear(options);
+
+          _this.pendings.shift();
+        });
+      }
+
+      return this;
+    } // public setScissor(
+    //   scissor: Partial<{
+    //     enable: boolean;
+    //     box: {
+    //       x: number;
+    //       y: number;
+    //       width: number;
+    //       height: number;
+    //     };
+    //   }>,
+    // ) {
+    //   this.engine.setScissor(scissor);
+    //   return this;
+    // }
+
+  }, {
+    key: "setSize",
+    value: function setSize(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      var canvas = this.engine.getCanvas();
+      this.size = {
+        width: width,
+        height: height
+      };
+      canvas.width = width;
+      canvas.height = height;
+      return this;
+    }
+  }, {
+    key: "getSize",
+    value: function getSize() {
+      return this.size;
+    }
   }]);
@@ -231,0 +302,0 @@

es/View.js

@@ -0,11 +1,17 @@
+import _initializerDefineProperty from "@babel/runtime/helpers/initializerDefineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _applyDecoratedDescriptor from "@babel/runtime/helpers/applyDecoratedDescriptor";
+import _initializerWarningHelper from "@babel/runtime/helpers/initializerWarningHelper";
 
-var _dec, _class, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _descriptor, _temp;
 
-import { injectable } from 'inversify';
-export var View = (_dec = injectable(), _dec(_class = (_temp = /*#__PURE__*/function () {
+import { IDENTIFIER } from '@antv/g-webgpu-core';
+import { inject, injectable, named } from 'inversify';
+export var View = (_dec = injectable(), _dec2 = inject(IDENTIFIER.Systems), _dec3 = named(IDENTIFIER.RendererSystem), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
   function View() {
     _classCallCheck(this, View);
 
+    _initializerDefineProperty(this, "rendererSystem", _descriptor, this);
+
     this.camera = void 0;
@@ -19,2 +25,3 @@ this.scene = void 0;
     };
+    this.clearColor = [1, 1, 1, 1];
   }
@@ -38,2 +45,7 @@
   }, {
+    key: "getClearColor",
+    value: function getClearColor() {
+      return this.clearColor;
+    }
+  }, {
     key: "setCamera",
@@ -56,6 +68,22 @@ value: function setCamera(camera) {
     }
+  }, {
+    key: "setClearColor",
+    value: function setClearColor(clearColor) {
+      this.clearColor = clearColor;
+      return this;
+    }
+  }, {
+    key: "pick",
+    value: function pick(position) {
+      return this.rendererSystem.pick(position, this);
+    }
   }]);
 
   return View;
-}(), _temp)) || _class);
+}(), _temp), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "rendererSystem", [_dec2, _dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);
 //# sourceMappingURL=View.js.map

es/World.js

@@ -18,10 +18,12 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /// <reference path="../../../node_modules/@webgpu/types/dist/index.d.ts" />
-import { createEntity as _createEntity, IDENTIFIER } from '@antv/g-webgpu-core'; // tslint:disable-next-line:no-submodule-imports
+import { createEntity as _createEntity, createWorldContainer, IDENTIFIER } from '@antv/g-webgpu-core';
+import { WebGLEngine, WebGPUEngine } from '@antv/g-webgpu-engine'; // tslint:disable-next-line:no-submodule-imports
 
 import * as WebGPUConstants from '@webgpu/types/dist/constants';
 import { inject, injectable } from 'inversify';
-import { container } from '.';
-import { Camera } from './Camera';
+import { Camera } from './camera/Camera';
 import { Kernel } from './Kernel';
-import { Renderable } from './Renderable';
+import { Line } from './renderable/line/Line';
+import { Point } from './renderable/point/Point';
+import { Renderable } from './renderable/Renderable';
 import { Renderer } from './Renderer';
@@ -36,2 +38,4 @@ import { Scene } from './Scene';
     _initializerDefineProperty(this, "configService", _descriptor, this);
+
+    this.container = void 0;
   }
@@ -49,3 +53,3 @@
               case 0:
-                engine = container.get(IDENTIFIER.RenderEngine);
+                engine = this.container.get(IDENTIFIER.RenderEngine);
                 _this$configService$g = this.configService.get(), canvas = _this$configService$g.canvas, engineOptions = _this$configService$g.engineOptions;
@@ -84,6 +88,12 @@ _context.next = 4;
     value: function getTransformComponent(entity) {
-      var manager = container.get(IDENTIFIER.TransformComponentManager);
+      var manager = this.container.get(IDENTIFIER.TransformComponentManager);
       return manager.getComponentByEntity(entity);
     }
   }, {
+    key: "getMeshComponent",
+    value: function getMeshComponent(entity) {
+      var manager = this.container.get(IDENTIFIER.MeshComponentManager);
+      return manager.getComponentByEntity(entity);
+    }
+  }, {
     key: "setConfig",
@@ -94,2 +104,12 @@ value: function setConfig(config) {
   }, {
+    key: "setContainer",
+    value: function setContainer(container) {
+      this.container = container;
+    }
+  }, {
+    key: "getContainer",
+    value: function getContainer() {
+      return this.container;
+    }
+  }, {
     key: "createEntity",
@@ -102,3 +122,3 @@ value: function createEntity() {
     value: function createScene() {
-      return container.get(Scene);
+      return this.container.get(Scene);
     }
@@ -108,3 +128,3 @@ }, {
     value: function createCamera() {
-      return new Camera();
+      return this.container.get(Camera);
     }
@@ -114,8 +134,9 @@ }, {
     value: function createView() {
-      return container.get(View);
+      return this.container.get(View);
     }
   }, {
     key: "createRenderable",
-    value: function createRenderable(entity) {
-      var renderable = container.get(Renderable);
+    value: function createRenderable(entity, type, config) {
+      var renderable = type ? this.container.getNamed(IDENTIFIER.Renderable, type) : this.container.get(Renderable);
+      renderable.setConfig(config);
       renderable.setEntity(entity);
@@ -127,3 +148,3 @@ return renderable;
     value: function createBoxGeometry(params) {
-      var geometrySystem = container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
+      var geometrySystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
       return geometrySystem.createBox(params);
@@ -134,3 +155,3 @@ }
     value: function createBufferGeometry(params) {
-      var geometrySystem = container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
+      var geometrySystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
       return geometrySystem.createBufferGeometry(params);
@@ -141,3 +162,3 @@ }
     value: function createInstancedBufferGeometry(params) {
-      var geometrySystem = container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
+      var geometrySystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
       return geometrySystem.createInstancedBufferGeometry(params);
@@ -148,3 +169,3 @@ }
     value: function createBasicMaterial() {
-      var materialSystem = container.getNamed(IDENTIFIER.Systems, IDENTIFIER.MaterialSystem);
+      var materialSystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.MaterialSystem);
       return materialSystem.createBasicMaterial();
@@ -155,3 +176,3 @@ }
     value: function createShaderMaterial(params) {
-      var materialSystem = container.getNamed(IDENTIFIER.Systems, IDENTIFIER.MaterialSystem);
+      var materialSystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.MaterialSystem);
       return materialSystem.createShaderMaterial(params);
@@ -162,3 +183,3 @@ }
     value: function createKernel(precompiledBundle) {
-      var kernel = container.get(Kernel);
+      var kernel = this.container.get(Kernel);
 
@@ -177,3 +198,4 @@ if (typeof precompiledBundle === 'string') {
     value: function createRenderer() {
-      var renderer = container.get(Renderer);
+      var renderer = this.container.get(Renderer);
+      renderer.container = this.container;
       renderer.init();
@@ -185,3 +207,3 @@ return renderer;
     value: function destroy() {
-      var systems = container.getAll(IDENTIFIER.Systems);
+      var systems = this.container.getAll(IDENTIFIER.Systems);
       systems.forEach(function (system) {
@@ -192,13 +214,7 @@ if (system.tearDown) {
       });
-      var engine = container.get(IDENTIFIER.RenderEngine);
-      engine.destroy(); // container.unload(containerModule);
-    } // public pick(position: { x: number; y: number }): number | undefined {
-    //   const pickingPass = this.container.getNamed(
-    //     IDENTIFIER.RenderPass,
-    //     PixelPickingPass.IDENTIFIER,
-    //   );
-    //   // @ts-ignore
-    //   return pickingPass.pick(position);
-    // }
-
+      var engine = this.container.get(IDENTIFIER.RenderEngine);
+      engine.destroy();
+      var interactor = this.container.get(IDENTIFIER.InteractorService);
+      interactor.destroy();
+    }
   }], [{
@@ -208,3 +224,22 @@ key: "create",
       var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var world = container.get(World);
+      var worldContainer = createWorldContainer(); // bind render engine, fallback to WebGL
+
+      var engineClazz = !navigator.gpu ? WebGLEngine : WebGPUEngine;
+
+      if (!worldContainer.isBound(IDENTIFIER.RenderEngine)) {
+        worldContainer.bind(IDENTIFIER.RenderEngine) // @ts-ignore
+        .to(engineClazz).inSingletonScope();
+      }
+
+      worldContainer.bind(Renderer).toSelf();
+      worldContainer.bind(Kernel).toSelf();
+      worldContainer.bind(Renderable).toSelf();
+      worldContainer.bind(View).toSelf();
+      worldContainer.bind(Camera).toSelf();
+      worldContainer.bind(Scene).toSelf();
+      worldContainer.bind(World).toSelf();
+      worldContainer.bind(IDENTIFIER.Renderable).to(Point).whenTargetNamed(Renderable.POINT);
+      worldContainer.bind(IDENTIFIER.Renderable).to(Line).whenTargetNamed(Renderable.LINE);
+      var world = worldContainer.get(World);
+      world.setContainer(worldContainer);
       world.setConfig(config);
@@ -211,0 +246,0 @@ return world;

lib/index.js

@@ -18,2 +18,8 @@ "use strict";
 });
+Object.defineProperty(exports, "Renderable", {
+  enumerable: true,
+  get: function get() {
+    return _Renderable.Renderable;
+  }
+});
 Object.defineProperty(exports, "World", {
@@ -25,50 +31,10 @@ enumerable: true,
 });
-exports.container = exports.RenderableType = void 0;
 
-var _gWebgpuCore = require("@antv/g-webgpu-core");
+var _Camera = require("./camera/Camera");
 
-var _gWebgpuEngine = require("@antv/g-webgpu-engine");
-
-var _inversify = require("inversify");
-
-var _Camera = require("./Camera");
-
 var _Kernel = require("./Kernel");
 
-var _Point = require("./mesh/point/Point");
+var _Renderable = require("./renderable/Renderable");
 
-var _Renderable = require("./Renderable");
-
-var _Renderer = require("./Renderer");
-
-var _Scene = require("./Scene");
-
-var _View = require("./View");
-
 var _World = require("./World");
-
-var RenderableType = {
-  Point: Symbol('Point'),
-  Line: Symbol('Line')
-};
-exports.RenderableType = RenderableType;
-var container = new _inversify.Container();
-exports.container = container;
-container.load((0, _gWebgpuCore.createContainerModule)()); // bind render engine, fallback to WebGL
-
-var engineClazz = !navigator.gpu ? _gWebgpuEngine.WebGLEngine : _gWebgpuEngine.WebGPUEngine;
-
-if (!container.isBound(_gWebgpuCore.IDENTIFIER.RenderEngine)) {
-  container.bind(_gWebgpuCore.IDENTIFIER.RenderEngine) // @ts-ignore
-  .to(engineClazz).inSingletonScope();
-}
-
-container.bind(_Renderer.Renderer).toSelf();
-container.bind(_Kernel.Kernel).toSelf();
-container.bind(_Renderable.Renderable).toSelf();
-container.bind(_View.View).toSelf();
-container.bind(_Camera.Camera).toSelf();
-container.bind(_Scene.Scene).toSelf();
-container.bind(_World.World).toSelf().inSingletonScope();
-container.bind(_gWebgpuCore.IDENTIFIER.Renderable).to(_Point.Point).whenTargetNamed(RenderableType.Point);
 //# sourceMappingURL=index.js.map

lib/Renderer.js

@@ -32,4 +32,2 @@ "use strict";
 
-var _ = require(".");
-
 var _dec, _dec2, _dec3, _dec4, _class, _class2, _descriptor, _descriptor2, _descriptor3, _temp;
@@ -51,2 +49,6 @@
     this.rendering = false;
+    this.pendings = [];
+    this.views = [];
+    this.size = void 0;
+    this.container = void 0;
   }
@@ -58,3 +60,3 @@
       var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var config, systems, _iterator, _step, system;
+        var systems, config, _iterator, _step, system;
 
@@ -67,4 +69,4 @@ return _regenerator.default.wrap(function _callee$(_context) {
                 this.shaderModule.registerBuiltinModules();
+                systems = this.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
                 config = this.configService.get();
-                systems = _.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
 
@@ -146,4 +148,11 @@ if (!config.canvas) {
     value: function () {
-      var _render = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(view) {
-        var systems, _iterator2, _step2, system;
+      var _render = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var systems,
+            _len,
+            views,
+            _key,
+            _iterator2,
+            _step2,
+            system,
+            _args2 = arguments;
 
@@ -162,13 +171,24 @@ return _regenerator.default.wrap(function _callee2$(_context2) {
               case 2:
+                if (this.pendings.length) {
+                  this.pendings.forEach(function (pending) {
+                    pending();
+                  });
+                }
+
                 this.rendering = true;
                 this.engine.beginFrame();
-                systems = _.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
+                systems = this.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
+
+                for (_len = _args2.length, views = new Array(_len), _key = 0; _key < _len; _key++) {
+                  views[_key] = _args2[_key];
+                }
+
                 _iterator2 = _createForOfIteratorHelper(systems);
-                _context2.prev = 6;
+                _context2.prev = 8;
 
                 _iterator2.s();
 
-              case 8:
+              case 10:
                 if ((_step2 = _iterator2.n()).done) {
-                  _context2.next = 15;
+                  _context2.next = 17;
                   break;
@@ -180,31 +200,31 @@ }
                 if (!system.execute) {
-                  _context2.next = 13;
+                  _context2.next = 15;
                   break;
                 }
 
-                _context2.next = 13;
-                return system.execute(view);
+                _context2.next = 15;
+                return system.execute(views);
 
-              case 13:
-                _context2.next = 8;
-                break;
-
               case 15:
-                _context2.next = 20;
+                _context2.next = 10;
                 break;
 
               case 17:
-                _context2.prev = 17;
-                _context2.t0 = _context2["catch"](6);
+                _context2.next = 22;
+                break;
 
+              case 19:
+                _context2.prev = 19;
+                _context2.t0 = _context2["catch"](8);
+
                 _iterator2.e(_context2.t0);
 
-              case 20:
-                _context2.prev = 20;
+              case 22:
+                _context2.prev = 22;
 
                 _iterator2.f();
 
-                return _context2.finish(20);
+                return _context2.finish(22);
 
-              case 23:
+              case 25:
                 // 录制一遍绘制命令，后续直接播放
@@ -229,3 +249,3 @@ // if (this.useRenderBundle) {
 
-              case 25:
+              case 27:
               case "end":
@@ -235,6 +255,6 @@ return _context2.stop();
           }
-        }, _callee2, this, [[6, 17, 20, 23]]);
+        }, _callee2, this, [[8, 19, 22, 25]]);
       }));
 
-      function render(_x) {
+      function render() {
         return _render.apply(this, arguments);
@@ -245,2 +265,52 @@ }
     }()
+  }, {
+    key: "clear",
+    value: function clear(options) {
+      var _this = this;
+
+      if (this.inited) {
+        this.engine.clear(options);
+      } else {
+        this.pendings.unshift(function () {
+          _this.engine.clear(options);
+
+          _this.pendings.shift();
+        });
+      }
+
+      return this;
+    } // public setScissor(
+    //   scissor: Partial<{
+    //     enable: boolean;
+    //     box: {
+    //       x: number;
+    //       y: number;
+    //       width: number;
+    //       height: number;
+    //     };
+    //   }>,
+    // ) {
+    //   this.engine.setScissor(scissor);
+    //   return this;
+    // }
+
+  }, {
+    key: "setSize",
+    value: function setSize(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      var canvas = this.engine.getCanvas();
+      this.size = {
+        width: width,
+        height: height
+      };
+      canvas.width = width;
+      canvas.height = height;
+      return this;
+    }
+  }, {
+    key: "getSize",
+    value: function getSize() {
+      return this.size;
+    }
   }]);
@@ -247,0 +317,0 @@ return Renderer;

lib/View.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -15,9 +17,16 @@
 
+var _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));
+
+var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));
+
+var _gWebgpuCore = require("@antv/g-webgpu-core");
+
 var _inversify = require("inversify");
 
-var _dec, _class, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _descriptor, _temp;
 
-var View = (_dec = (0, _inversify.injectable)(), _dec(_class = (_temp = /*#__PURE__*/function () {
+var View = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.Systems), _dec3 = (0, _inversify.named)(_gWebgpuCore.IDENTIFIER.RendererSystem), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
   function View() {
     (0, _classCallCheck2.default)(this, View);
+    (0, _initializerDefineProperty2.default)(this, "rendererSystem", _descriptor, this);
     this.camera = void 0;
@@ -31,2 +40,3 @@ this.scene = void 0;
     };
+    this.clearColor = [1, 1, 1, 1];
   }
@@ -50,2 +60,7 @@
   }, {
+    key: "getClearColor",
+    value: function getClearColor() {
+      return this.clearColor;
+    }
+  }, {
     key: "setCamera",
@@ -68,6 +83,22 @@ value: function setCamera(camera) {
     }
+  }, {
+    key: "setClearColor",
+    value: function setClearColor(clearColor) {
+      this.clearColor = clearColor;
+      return this;
+    }
+  }, {
+    key: "pick",
+    value: function pick(position) {
+      return this.rendererSystem.pick(position, this);
+    }
   }]);
   return View;
-}(), _temp)) || _class);
+}(), _temp), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "rendererSystem", [_dec2, _dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);
 exports.View = View;
 //# sourceMappingURL=View.js.map

lib/World.js

@@ -30,2 +30,4 @@ "use strict";
 
+var _gWebgpuEngine = require("@antv/g-webgpu-engine");
+
 var WebGPUConstants = _interopRequireWildcard(require("@webgpu/types/dist/constants"));
@@ -35,10 +37,12 @@
 
-var _ = require(".");
+var _Camera = require("./camera/Camera");
 
-var _Camera = require("./Camera");
-
 var _Kernel = require("./Kernel");
 
-var _Renderable = require("./Renderable");
+var _Line = require("./renderable/line/Line");
 
+var _Point = require("./renderable/point/Point");
+
+var _Renderable = require("./renderable/Renderable");
+
 var _Renderer = require("./Renderer");
@@ -62,2 +66,3 @@
     (0, _initializerDefineProperty2.default)(this, "configService", _descriptor, this);
+    this.container = void 0;
   }
@@ -75,3 +80,3 @@
               case 0:
-                engine = _.container.get(_gWebgpuCore.IDENTIFIER.RenderEngine);
+                engine = this.container.get(_gWebgpuCore.IDENTIFIER.RenderEngine);
                 _this$configService$g = this.configService.get(), canvas = _this$configService$g.canvas, engineOptions = _this$configService$g.engineOptions;
@@ -110,7 +115,12 @@ _context.next = 4;
     value: function getTransformComponent(entity) {
-      var manager = _.container.get(_gWebgpuCore.IDENTIFIER.TransformComponentManager);
-
+      var manager = this.container.get(_gWebgpuCore.IDENTIFIER.TransformComponentManager);
       return manager.getComponentByEntity(entity);
     }
   }, {
+    key: "getMeshComponent",
+    value: function getMeshComponent(entity) {
+      var manager = this.container.get(_gWebgpuCore.IDENTIFIER.MeshComponentManager);
+      return manager.getComponentByEntity(entity);
+    }
+  }, {
     key: "setConfig",
@@ -121,2 +131,12 @@ value: function setConfig(config) {
   }, {
+    key: "setContainer",
+    value: function setContainer(container) {
+      this.container = container;
+    }
+  }, {
+    key: "getContainer",
+    value: function getContainer() {
+      return this.container;
+    }
+  }, {
     key: "createEntity",
@@ -129,3 +149,3 @@ value: function createEntity() {
     value: function createScene() {
-      return _.container.get(_Scene.Scene);
+      return this.container.get(_Scene.Scene);
     }
@@ -135,3 +155,3 @@ }, {
     value: function createCamera() {
-      return new _Camera.Camera();
+      return this.container.get(_Camera.Camera);
     }
@@ -141,9 +161,9 @@ }, {
     value: function createView() {
-      return _.container.get(_View.View);
+      return this.container.get(_View.View);
     }
   }, {
     key: "createRenderable",
-    value: function createRenderable(entity) {
-      var renderable = _.container.get(_Renderable.Renderable);
-
+    value: function createRenderable(entity, type, config) {
+      var renderable = type ? this.container.getNamed(_gWebgpuCore.IDENTIFIER.Renderable, type) : this.container.get(_Renderable.Renderable);
+      renderable.setConfig(config);
       renderable.setEntity(entity);
@@ -155,4 +175,3 @@ return renderable;
     value: function createBoxGeometry(params) {
-      var geometrySystem = _.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
-
+      var geometrySystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
       return geometrySystem.createBox(params);
@@ -163,4 +182,3 @@ }
     value: function createBufferGeometry(params) {
-      var geometrySystem = _.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
-
+      var geometrySystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
       return geometrySystem.createBufferGeometry(params);
@@ -171,4 +189,3 @@ }
     value: function createInstancedBufferGeometry(params) {
-      var geometrySystem = _.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
-
+      var geometrySystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
       return geometrySystem.createInstancedBufferGeometry(params);
@@ -179,4 +196,3 @@ }
     value: function createBasicMaterial() {
-      var materialSystem = _.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.MaterialSystem);
-
+      var materialSystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.MaterialSystem);
       return materialSystem.createBasicMaterial();
@@ -187,4 +203,3 @@ }
     value: function createShaderMaterial(params) {
-      var materialSystem = _.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.MaterialSystem);
-
+      var materialSystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.MaterialSystem);
       return materialSystem.createShaderMaterial(params);
@@ -195,3 +210,3 @@ }
     value: function createKernel(precompiledBundle) {
-      var kernel = _.container.get(_Kernel.Kernel);
+      var kernel = this.container.get(_Kernel.Kernel);
 
@@ -210,4 +225,4 @@ if (typeof precompiledBundle === 'string') {
     value: function createRenderer() {
-      var renderer = _.container.get(_Renderer.Renderer);
-
+      var renderer = this.container.get(_Renderer.Renderer);
+      renderer.container = this.container;
       renderer.init();
@@ -219,4 +234,3 @@ return renderer;
     value: function destroy() {
-      var systems = _.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
-
+      var systems = this.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
       systems.forEach(function (system) {
@@ -227,15 +241,7 @@ if (system.tearDown) {
       });
-
-      var engine = _.container.get(_gWebgpuCore.IDENTIFIER.RenderEngine);
-
-      engine.destroy(); // container.unload(containerModule);
-    } // public pick(position: { x: number; y: number }): number | undefined {
-    //   const pickingPass = this.container.getNamed(
-    //     IDENTIFIER.RenderPass,
-    //     PixelPickingPass.IDENTIFIER,
-    //   );
-    //   // @ts-ignore
-    //   return pickingPass.pick(position);
-    // }
-
+      var engine = this.container.get(_gWebgpuCore.IDENTIFIER.RenderEngine);
+      engine.destroy();
+      var interactor = this.container.get(_gWebgpuCore.IDENTIFIER.InteractorService);
+      interactor.destroy();
+    }
   }], [{
@@ -245,5 +251,22 @@ key: "create",
       var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var worldContainer = (0, _gWebgpuCore.createWorldContainer)(); // bind render engine, fallback to WebGL
 
-      var world = _.container.get(World);
+      var engineClazz = !navigator.gpu ? _gWebgpuEngine.WebGLEngine : _gWebgpuEngine.WebGPUEngine;
 
+      if (!worldContainer.isBound(_gWebgpuCore.IDENTIFIER.RenderEngine)) {
+        worldContainer.bind(_gWebgpuCore.IDENTIFIER.RenderEngine) // @ts-ignore
+        .to(engineClazz).inSingletonScope();
+      }
+
+      worldContainer.bind(_Renderer.Renderer).toSelf();
+      worldContainer.bind(_Kernel.Kernel).toSelf();
+      worldContainer.bind(_Renderable.Renderable).toSelf();
+      worldContainer.bind(_View.View).toSelf();
+      worldContainer.bind(_Camera.Camera).toSelf();
+      worldContainer.bind(_Scene.Scene).toSelf();
+      worldContainer.bind(World).toSelf();
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Renderable).to(_Point.Point).whenTargetNamed(_Renderable.Renderable.POINT);
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Renderable).to(_Line.Line).whenTargetNamed(_Renderable.Renderable.LINE);
+      var world = worldContainer.get(World);
+      world.setContainer(worldContainer);
       world.setConfig(config);
@@ -250,0 +273,0 @@ return world;

package.json

 {
   "name": "@antv/g-webgpu",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "",
@@ -27,6 +27,7 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-webgpu-core": "^0.5.0",
-    "@antv/g-webgpu-engine": "^0.5.0",
+    "@antv/g-webgpu-core": "^0.6.0",
+    "@antv/g-webgpu-engine": "^0.6.0",
     "@webgpu/types": "^0.0.31",
     "gl-matrix": "^3.1.0",
+    "gl-vec2": "^1.3.0",
     "hammerjs": "^2.0.8",
@@ -36,2 +37,4 @@ "inversify": "^5.0.1",
     "lodash": "^4.17.15",
+    "polyline-miter-util": "^1.0.1",
+    "polyline-normals": "^2.0.2",
     "probe.gl": "^3.1.1",
@@ -48,3 +51,3 @@ "reflect-metadata": "^0.1.13"
   },
-  "gitHead": "a6003b54fa7581815a7d4c0ef503fb334546eacb"
+  "gitHead": "25cfea6a4e7fb2d471392949531f99413186cfd6"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

439595

increased by61.2%

Number of package files

63

increased by23.53%

Lines of code

4566

increased by48.01%

Worsened metrics

Dependency count

13

increased by30%

Number of low supply chain risk alerts

3

increased by200%

Dependency changes

• + Addedgl-vec2@^1.3.0

• + Addedpolyline-miter-util@^1.0.1

• + Addedpolyline-normals@^2.0.2

• + Added@antv/g-webgpu-core@0.6.0(transitive)

• + Added@antv/g-webgpu-engine@0.6.0(transitive)

• + Addedgl-vec2@1.3.0(transitive)

• + Addedpolyline-miter-util@1.0.1(transitive)

• + Addedpolyline-normals@2.0.2(transitive)

• - Removed@antv/g-webgpu-core@0.5.6(transitive)

• - Removed@antv/g-webgpu-engine@0.5.6(transitive)

• Updated@antv/g-webgpu-core@^0.6.0

• Updated@antv/g-webgpu-engine@^0.6.0