@antv/g-webgpu - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3-alpha.0

es/camera/Camera.js

@@ -7,3 +7,3 @@ import _initializerDefineProperty from "@babel/runtime/helpers/initializerDefineProperty";
 
-var _dec, _dec2, _class, _class2, _descriptor, _temp;
+var _dec, _dec2, _class, _class2, _descriptor, _class3, _temp;
 
@@ -50,3 +50,3 @@ import { Frustum, IDENTIFIER } from '@antv/g-webgpu-core';
 
-export var Camera = (_dec = injectable(), _dec2 = inject(IDENTIFIER.InteractorService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
+export var Camera = (_dec = injectable(), _dec2 = inject(IDENTIFIER.InteractorService), _dec(_class = (_class2 = (_temp = _class3 = /*#__PURE__*/function () {
   function Camera() {
@@ -70,2 +70,4 @@ _classCallCheck(this, Camera);
     this.dollyingStep = 0;
+    this.maxDistance = Infinity;
+    this.minDistance = -Infinity;
     this.rotateWorld = false;
@@ -104,2 +106,7 @@
   }, {
+    key: "getProjectionMode",
+    value: function getProjectionMode() {
+      return this.projectionMode;
+    }
+  }, {
     key: "getPerspective",
@@ -183,2 +190,7 @@ value: function getPerspective() {
     }
+  }, {
+    key: "getWorldTransform",
+    value: function getWorldTransform() {
+      return this.matrix;
+    }
     /**
@@ -373,2 +385,14 @@ * 设置相机矩阵
     }
+  }, {
+    key: "setMaxDistance",
+    value: function setMaxDistance(d) {
+      this.maxDistance = d;
+      return this;
+    }
+  }, {
+    key: "setMinDistance",
+    value: function setMinDistance(d) {
+      this.minDistance = d;
+      return this;
+    }
     /**
@@ -547,2 +571,5 @@ * Changes the initial azimuth of the camera
       var step = value * this.dollyingStep;
+      var updatedDistance = this.distance + value * this.dollyingStep; // 限制视点距离范围
+
+      step = Math.max(Math.min(updatedDistance, this.maxDistance), this.minDistance) - this.distance;
       pos[0] += step * n[0];
@@ -802,3 +829,6 @@ pos[1] += step * n[1];
   return Camera;
-}(), _temp), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "interactor", [_dec2], {
+}(), _class3.ProjectionMode = {
+  ORTHOGRAPHIC: 'ORTHOGRAPHIC',
+  PERSPECTIVE: 'PERSPECTIVE'
+}, _temp), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "interactor", [_dec2], {
   configurable: true,
@@ -805,0 +835,0 @@ enumerable: true,

es/index.js

 import { Camera } from './camera/Camera';
+import { Geometry } from './geometry';
 import { Kernel } from './Kernel';
+import { Material } from './material';
 import { Renderable } from './renderable/Renderable';
 import { World } from './World';
-export { World, Kernel, Camera, Renderable };
+export { World, Kernel, Camera, Renderable, Geometry, Material };
 //# sourceMappingURL=index.js.map

es/renderable/point/index.js

@@ -34,8 +34,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var pointShapes = ['circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'];
-console.log();
+export
 /**
  * Use SDF to draw 2D point with stroke.
  */
-
-export var Point = (_dec = injectable(), _dec2 = inject(IDENTIFIER.Systems), _dec3 = named(IDENTIFIER.MaterialSystem), _dec4 = inject(IDENTIFIER.Systems), _dec5 = named(IDENTIFIER.GeometrySystem), _dec6 = inject(IDENTIFIER.ShaderModuleService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function (_Renderable) {
+var Point = (_dec = injectable(), _dec2 = inject(IDENTIFIER.Systems), _dec3 = named(IDENTIFIER.MaterialSystem), _dec4 = inject(IDENTIFIER.Systems), _dec5 = named(IDENTIFIER.GeometrySystem), _dec6 = inject(IDENTIFIER.ShaderModuleService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function (_Renderable) {
   _inherits(Point, _Renderable);
@@ -42,0 +41,0 @@

es/renderable/Renderable.js

@@ -91,3 +91,12 @@ import _initializerDefineProperty from "@babel/runtime/helpers/initializerDefineProperty";
     value: function setVisible(visible) {
+      var _this2 = this;
+
       this.meshComponent.visible = visible;
+      this.meshComponent.children.forEach(function (childEntity) {
+        var child = _this2.mesh.getComponentByEntity(childEntity);
+
+        if (child) {
+          child.visible = visible;
+        }
+      });
       return this;
@@ -94,0 +103,0 @@ }

es/Renderer.js

@@ -21,2 +21,17 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { inject, injectable } from 'inversify';
+
+/* babel-plugin-inline-import './material/shaders/map.frag.declaration.glsl' */
+var mapFragDeclaration = "#ifdef USE_MAP\n  uniform sampler2D map;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/map.frag.main.glsl' */
+var mapFragMain = "#ifdef USE_MAP\n  vec4 texelColor = texture2D(map, vUv);\n  // texelColor = mapTexelToLinear(texelColor);\n  diffuseColor *= texelColor;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/uv.frag.declaration.glsl' */
+var uvFragDeclaration = "#if (defined( USE_UV ) && ! defined( UVS_VERTEX_ONLY ))\n  varying vec2 vUv;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/uv.vert.declaration.glsl' */
+var uvVertDeclaration = "#ifdef USE_UV\n  attribute vec2 uv;\n\t#ifdef UVS_VERTEX_ONLY\n    vec2 vUv;\n\t#else\n\t\tvarying vec2 vUv;\n\t#endif\n\tuniform mat3 uvTransform;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/uv.vert.main.glsl' */
+var uvVertMain = "#ifdef USE_UV\n  vUv = (uvTransform * vec3(uv, 1)).xy;\n#endif";
 export var Renderer = (_dec = injectable(), _dec2 = inject(IDENTIFIER.RenderEngine), _dec3 = inject(IDENTIFIER.ShaderModuleService), _dec4 = inject(IDENTIFIER.ConfigService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
@@ -26,2 +41,4 @@ function Renderer() {
 
+    this.container = void 0;
+
     _initializerDefineProperty(this, "engine", _descriptor, this);
@@ -38,3 +55,2 @@
     this.size = void 0;
-    this.container = void 0;
   }
@@ -54,2 +70,17 @@
                 this.shaderModule.registerBuiltinModules();
+                this.shaderModule.registerModule('uv.vert.declaration', {
+                  vs: uvVertDeclaration
+                });
+                this.shaderModule.registerModule('uv.vert.main', {
+                  vs: uvVertMain
+                });
+                this.shaderModule.registerModule('uv.frag.declaration', {
+                  fs: uvFragDeclaration
+                });
+                this.shaderModule.registerModule('map.frag.declaration', {
+                  fs: mapFragDeclaration
+                });
+                this.shaderModule.registerModule('map.frag.main', {
+                  fs: mapFragMain
+                });
                 systems = this.container.getAll(IDENTIFIER.Systems);
@@ -59,7 +90,7 @@ config = this.configService.get();
                 if (!config.canvas) {
-                  _context.next = 25;
+                  _context.next = 30;
                   break;
                 }
 
-                _context.next = 6;
+                _context.next = 11;
                 return this.engine.init({
@@ -71,11 +102,11 @@ canvas: config.canvas,
 
-              case 6:
+              case 11:
                 _iterator = _createForOfIteratorHelper(systems);
-                _context.prev = 7;
+                _context.prev = 12;
 
                 _iterator.s();
 
-              case 9:
+              case 14:
                 if ((_step = _iterator.n()).done) {
-                  _context.next = 16;
+                  _context.next = 21;
                   break;
@@ -87,34 +118,34 @@ }
                 if (!system.initialize) {
-                  _context.next = 14;
+                  _context.next = 19;
                   break;
                 }
 
-                _context.next = 14;
+                _context.next = 19;
                 return system.initialize();
 
-              case 14:
-                _context.next = 9;
+              case 19:
+                _context.next = 14;
                 break;
 
-              case 16:
-                _context.next = 21;
+              case 21:
+                _context.next = 26;
                 break;
 
-              case 18:
-                _context.prev = 18;
-                _context.t0 = _context["catch"](7);
+              case 23:
+                _context.prev = 23;
+                _context.t0 = _context["catch"](12);
 
                 _iterator.e(_context.t0);
 
-              case 21:
-                _context.prev = 21;
+              case 26:
+                _context.prev = 26;
 
                 _iterator.f();
 
-                return _context.finish(21);
+                return _context.finish(26);
 
-              case 24:
+              case 29:
                 this.inited = true;
 
-              case 25:
+              case 30:
               case "end":
@@ -124,3 +155,3 @@ return _context.stop();
           }
-        }, _callee, this, [[7, 18, 21, 24]]);
+        }, _callee, this, [[12, 23, 26, 29]]);
       }));
@@ -127,0 +158,0 @@

es/Scene.js

@@ -20,2 +20,17 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
   }, {
+    key: "addRenderable",
+    value: function addRenderable(renderable) {
+      this.addEntity(renderable.getEntity());
+      return this;
+    }
+  }, {
+    key: "removeRenderable",
+    value: function removeRenderable(renderable) {
+      this.removeEntity(renderable.getEntity());
+      return this;
+    }
+  }, {
+    key: "addLight",
+    value: function addLight() {}
+  }, {
     key: "addEntity",
@@ -22,0 +37,0 @@ value: function addEntity(entity) {

es/utils/polyline-normals.js

@@ -1,2 +0,4 @@
-import { copy, create, dot } from 'gl-vec2';
+// @ts-ignore
+import { copy, create, dot } from 'gl-vec2'; // @ts-ignore
+
 import { computeMiter, direction, normal } from 'polyline-miter-util';
@@ -3,0 +5,0 @@

es/World.js

@@ -24,3 +24,10 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Camera } from './camera/Camera';
+import { Geometry } from './geometry';
+import { Box } from './geometry/Box';
+import { Merged } from './geometry/Merged';
+import { Plane } from './geometry/Plane';
+import { Sphere } from './geometry/Sphere';
 import { Kernel } from './Kernel';
+import { Material } from './material';
+import { Basic } from './material/basic';
 import { Grid } from './renderable/grid';
@@ -32,2 +39,4 @@ import { Line } from './renderable/line';
 import { Scene } from './Scene';
+import { TextureCache } from './texture/Cache';
+import { Texture2D } from './texture/Texture2D';
 import { createCanvas } from './utils/canvas';
@@ -137,4 +146,7 @@ import { View } from './View';
     key: "createRenderable",
-    value: function createRenderable(entity, type, config) {
+    value: function createRenderable(type, config) {
       var renderable = type ? this.container.getNamed(IDENTIFIER.Renderable, type) : this.container.get(Renderable);
+
+      var entity = _createEntity();
+
       renderable.setConfig(config || {});
@@ -145,8 +157,31 @@ renderable.setEntity(entity);
   }, {
-    key: "createBoxGeometry",
-    value: function createBoxGeometry(params) {
-      var geometrySystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.GeometrySystem);
-      return geometrySystem.createBox(params);
+    key: "createGeometry",
+    value: function createGeometry(type, config) {
+      var geometry = this.container.getNamed(IDENTIFIER.Geometry, type);
+
+      var entity = _createEntity();
+
+      geometry.setConfig(config || {});
+      geometry.setEntity(entity);
+      return geometry.getComponent();
     }
   }, {
+    key: "createMaterial",
+    value: function createMaterial(type, config) {
+      var material = this.container.getNamed(IDENTIFIER.Material, type);
+
+      var entity = _createEntity();
+
+      material.setConfig(config || {});
+      material.setEntity(entity, type);
+      return material.getComponent();
+    }
+  }, {
+    key: "createTexture2D",
+    value: function createTexture2D(config) {
+      var texture = this.container.get(Texture2D);
+      texture.setConfig(config);
+      return texture;
+    }
+  }, {
     key: "createBufferGeometry",
@@ -164,8 +199,2 @@ value: function createBufferGeometry(params) {
   }, {
-    key: "createBasicMaterial",
-    value: function createBasicMaterial() {
-      var materialSystem = this.container.getNamed(IDENTIFIER.Systems, IDENTIFIER.MaterialSystem);
-      return materialSystem.createBasicMaterial();
-    }
-  }, {
     key: "createShaderMaterial",
@@ -232,2 +261,12 @@ value: function createShaderMaterial(params) {
       worldContainer.bind(World).toSelf();
+      worldContainer.bind(TextureCache).toSelf();
+      worldContainer.bind(Texture2D).toSelf(); // bind geometries
+
+      worldContainer.bind(IDENTIFIER.Geometry).to(Box).whenTargetNamed(Geometry.BOX);
+      worldContainer.bind(IDENTIFIER.Geometry).to(Sphere).whenTargetNamed(Geometry.SPHERE);
+      worldContainer.bind(IDENTIFIER.Geometry).to(Plane).whenTargetNamed(Geometry.PLANE);
+      worldContainer.bind(IDENTIFIER.Geometry).to(Merged).whenTargetNamed(Geometry.MERGED); // bind materials
+
+      worldContainer.bind(IDENTIFIER.Material).to(Basic).whenTargetNamed(Material.BASIC); // bind renderables
+
       worldContainer.bind(IDENTIFIER.Renderable).to(Point).whenTargetNamed(Renderable.POINT);
@@ -234,0 +273,0 @@ worldContainer.bind(IDENTIFIER.Renderable).to(Line).whenTargetNamed(Renderable.LINE);

lib/camera/Camera.js

@@ -30,3 +30,3 @@ "use strict";
 
-var _dec, _dec2, _class, _class2, _descriptor, _temp;
+var _dec, _dec2, _class, _class2, _descriptor, _class3, _temp;
 
@@ -71,3 +71,3 @@ var CAMERA_TYPE;
 
-var Camera = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.InteractorService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
+var Camera = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.InteractorService), _dec(_class = (_class2 = (_temp = _class3 = /*#__PURE__*/function () {
   function Camera() {
@@ -90,2 +90,4 @@ (0, _classCallCheck2.default)(this, Camera);
     this.dollyingStep = 0;
+    this.maxDistance = Infinity;
+    this.minDistance = -Infinity;
     this.rotateWorld = false;
@@ -122,2 +124,7 @@ (0, _initializerDefineProperty2.default)(this, "interactor", _descriptor, this);
   }, {
+    key: "getProjectionMode",
+    value: function getProjectionMode() {
+      return this.projectionMode;
+    }
+  }, {
     key: "getPerspective",
@@ -201,2 +208,7 @@ value: function getPerspective() {
     }
+  }, {
+    key: "getWorldTransform",
+    value: function getWorldTransform() {
+      return this.matrix;
+    }
     /**
@@ -404,2 +416,14 @@ * 设置相机矩阵
     }
+  }, {
+    key: "setMaxDistance",
+    value: function setMaxDistance(d) {
+      this.maxDistance = d;
+      return this;
+    }
+  }, {
+    key: "setMinDistance",
+    value: function setMinDistance(d) {
+      this.minDistance = d;
+      return this;
+    }
     /**
@@ -592,2 +616,5 @@ * Changes the initial azimuth of the camera
       var step = value * this.dollyingStep;
+      var updatedDistance = this.distance + value * this.dollyingStep; // 限制视点距离范围
+
+      step = Math.max(Math.min(updatedDistance, this.maxDistance), this.minDistance) - this.distance;
       pos[0] += step * n[0];
@@ -870,3 +897,6 @@ pos[1] += step * n[1];
   return Camera;
-}(), _temp), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "interactor", [_dec2], {
+}(), _class3.ProjectionMode = {
+  ORTHOGRAPHIC: 'ORTHOGRAPHIC',
+  PERSPECTIVE: 'PERSPECTIVE'
+}, _temp), (_descriptor = (0, _applyDecoratedDescriptor2.default)(_class2.prototype, "interactor", [_dec2], {
   configurable: true,
@@ -873,0 +903,0 @@ enumerable: true,

lib/index.js

@@ -12,2 +12,8 @@ "use strict";
 });
+Object.defineProperty(exports, "Geometry", {
+  enumerable: true,
+  get: function get() {
+    return _geometry.Geometry;
+  }
+});
 Object.defineProperty(exports, "Kernel", {
@@ -19,2 +25,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "Material", {
+  enumerable: true,
+  get: function get() {
+    return _material.Material;
+  }
+});
 Object.defineProperty(exports, "Renderable", {
@@ -35,4 +47,8 @@ enumerable: true,
 
+var _geometry = require("./geometry");
+
 var _Kernel = require("./Kernel");
 
+var _material = require("./material");
+
 var _Renderable = require("./renderable/Renderable");
@@ -39,0 +55,0 @@

lib/renderable/point/index.js

@@ -56,7 +56,6 @@ "use strict";
 var pointShapes = ['circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'];
-console.log();
+
 /**
  * Use SDF to draw 2D point with stroke.
  */
-
 var Point = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.Systems), _dec3 = (0, _inversify.named)(_gWebgpuCore.IDENTIFIER.MaterialSystem), _dec4 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.Systems), _dec5 = (0, _inversify.named)(_gWebgpuCore.IDENTIFIER.GeometrySystem), _dec6 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.ShaderModuleService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function (_Renderable) {
@@ -63,0 +62,0 @@ (0, _inherits2.default)(Point, _Renderable);

lib/renderable/Renderable.js

@@ -100,3 +100,12 @@ "use strict";
     value: function setVisible(visible) {
+      var _this2 = this;
+
       this.meshComponent.visible = visible;
+      this.meshComponent.children.forEach(function (childEntity) {
+        var child = _this2.mesh.getComponentByEntity(childEntity);
+
+        if (child) {
+          child.visible = visible;
+        }
+      });
       return this;
@@ -103,0 +112,0 @@ }

lib/Renderer.js

@@ -40,5 +40,20 @@ "use strict";
 
+/* babel-plugin-inline-import './material/shaders/map.frag.declaration.glsl' */
+var mapFragDeclaration = "#ifdef USE_MAP\n  uniform sampler2D map;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/map.frag.main.glsl' */
+var mapFragMain = "#ifdef USE_MAP\n  vec4 texelColor = texture2D(map, vUv);\n  // texelColor = mapTexelToLinear(texelColor);\n  diffuseColor *= texelColor;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/uv.frag.declaration.glsl' */
+var uvFragDeclaration = "#if (defined( USE_UV ) && ! defined( UVS_VERTEX_ONLY ))\n  varying vec2 vUv;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/uv.vert.declaration.glsl' */
+var uvVertDeclaration = "#ifdef USE_UV\n  attribute vec2 uv;\n\t#ifdef UVS_VERTEX_ONLY\n    vec2 vUv;\n\t#else\n\t\tvarying vec2 vUv;\n\t#endif\n\tuniform mat3 uvTransform;\n#endif";
+
+/* babel-plugin-inline-import './material/shaders/uv.vert.main.glsl' */
+var uvVertMain = "#ifdef USE_UV\n  vUv = (uvTransform * vec3(uv, 1)).xy;\n#endif";
 var Renderer = (_dec = (0, _inversify.injectable)(), _dec2 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.RenderEngine), _dec3 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.ShaderModuleService), _dec4 = (0, _inversify.inject)(_gWebgpuCore.IDENTIFIER.ConfigService), _dec(_class = (_class2 = (_temp = /*#__PURE__*/function () {
   function Renderer() {
     (0, _classCallCheck2.default)(this, Renderer);
+    this.container = void 0;
     (0, _initializerDefineProperty2.default)(this, "engine", _descriptor, this);
@@ -52,3 +67,2 @@ (0, _initializerDefineProperty2.default)(this, "shaderModule", _descriptor2, this);
     this.size = void 0;
-    this.container = void 0;
   }
@@ -68,2 +82,17 @@
                 this.shaderModule.registerBuiltinModules();
+                this.shaderModule.registerModule('uv.vert.declaration', {
+                  vs: uvVertDeclaration
+                });
+                this.shaderModule.registerModule('uv.vert.main', {
+                  vs: uvVertMain
+                });
+                this.shaderModule.registerModule('uv.frag.declaration', {
+                  fs: uvFragDeclaration
+                });
+                this.shaderModule.registerModule('map.frag.declaration', {
+                  fs: mapFragDeclaration
+                });
+                this.shaderModule.registerModule('map.frag.main', {
+                  fs: mapFragMain
+                });
                 systems = this.container.getAll(_gWebgpuCore.IDENTIFIER.Systems);
@@ -73,7 +102,7 @@ config = this.configService.get();
                 if (!config.canvas) {
-                  _context.next = 25;
+                  _context.next = 30;
                   break;
                 }
 
-                _context.next = 6;
+                _context.next = 11;
                 return this.engine.init({
@@ -85,11 +114,11 @@ canvas: config.canvas,
 
-              case 6:
+              case 11:
                 _iterator = _createForOfIteratorHelper(systems);
-                _context.prev = 7;
+                _context.prev = 12;
 
                 _iterator.s();
 
-              case 9:
+              case 14:
                 if ((_step = _iterator.n()).done) {
-                  _context.next = 16;
+                  _context.next = 21;
                   break;
@@ -101,34 +130,34 @@ }
                 if (!system.initialize) {
-                  _context.next = 14;
+                  _context.next = 19;
                   break;
                 }
 
-                _context.next = 14;
+                _context.next = 19;
                 return system.initialize();
 
-              case 14:
-                _context.next = 9;
+              case 19:
+                _context.next = 14;
                 break;
 
-              case 16:
-                _context.next = 21;
+              case 21:
+                _context.next = 26;
                 break;
 
-              case 18:
-                _context.prev = 18;
-                _context.t0 = _context["catch"](7);
+              case 23:
+                _context.prev = 23;
+                _context.t0 = _context["catch"](12);
 
                 _iterator.e(_context.t0);
 
-              case 21:
-                _context.prev = 21;
+              case 26:
+                _context.prev = 26;
 
                 _iterator.f();
 
-                return _context.finish(21);
+                return _context.finish(26);
 
-              case 24:
+              case 29:
                 this.inited = true;
 
-              case 25:
+              case 30:
               case "end":
@@ -138,3 +167,3 @@ return _context.stop();
           }
-        }, _callee, this, [[7, 18, 21, 24]]);
+        }, _callee, this, [[12, 23, 26, 29]]);
       }));
@@ -141,0 +170,0 @@

lib/Scene.js

@@ -30,2 +30,17 @@ "use strict";
   }, {
+    key: "addRenderable",
+    value: function addRenderable(renderable) {
+      this.addEntity(renderable.getEntity());
+      return this;
+    }
+  }, {
+    key: "removeRenderable",
+    value: function removeRenderable(renderable) {
+      this.removeEntity(renderable.getEntity());
+      return this;
+    }
+  }, {
+    key: "addLight",
+    value: function addLight() {}
+  }, {
     key: "addEntity",
@@ -32,0 +47,0 @@ value: function addEntity(entity) {

lib/utils/polyline-normals.js

@@ -12,2 +12,4 @@ "use strict";
 
+// @ts-ignore
+// @ts-ignore
 function extrusions(positions, out, point, normal, scale) {
@@ -14,0 +16,0 @@ addNext(out, normal, -scale);

lib/World.js

@@ -38,4 +38,18 @@ "use strict";
 
+var _geometry = require("./geometry");
+
+var _Box = require("./geometry/Box");
+
+var _Merged = require("./geometry/Merged");
+
+var _Plane = require("./geometry/Plane");
+
+var _Sphere = require("./geometry/Sphere");
+
 var _Kernel = require("./Kernel");
 
+var _material = require("./material");
+
+var _basic = require("./material/basic");
+
 var _grid = require("./renderable/grid");
@@ -53,2 +67,6 @@
 
+var _Cache = require("./texture/Cache");
+
+var _Texture2D = require("./texture/Texture2D");
+
 var _canvas = require("./utils/canvas");
@@ -164,4 +182,5 @@
     key: "createRenderable",
-    value: function createRenderable(entity, type, config) {
+    value: function createRenderable(type, config) {
       var renderable = type ? this.container.getNamed(_gWebgpuCore.IDENTIFIER.Renderable, type) : this.container.get(_Renderable.Renderable);
+      var entity = (0, _gWebgpuCore.createEntity)();
       renderable.setConfig(config || {});
@@ -172,8 +191,27 @@ renderable.setEntity(entity);
   }, {
-    key: "createBoxGeometry",
-    value: function createBoxGeometry(params) {
-      var geometrySystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.GeometrySystem);
-      return geometrySystem.createBox(params);
+    key: "createGeometry",
+    value: function createGeometry(type, config) {
+      var geometry = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Geometry, type);
+      var entity = (0, _gWebgpuCore.createEntity)();
+      geometry.setConfig(config || {});
+      geometry.setEntity(entity);
+      return geometry.getComponent();
     }
   }, {
+    key: "createMaterial",
+    value: function createMaterial(type, config) {
+      var material = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Material, type);
+      var entity = (0, _gWebgpuCore.createEntity)();
+      material.setConfig(config || {});
+      material.setEntity(entity, type);
+      return material.getComponent();
+    }
+  }, {
+    key: "createTexture2D",
+    value: function createTexture2D(config) {
+      var texture = this.container.get(_Texture2D.Texture2D);
+      texture.setConfig(config);
+      return texture;
+    }
+  }, {
     key: "createBufferGeometry",
@@ -191,8 +229,2 @@ value: function createBufferGeometry(params) {
   }, {
-    key: "createBasicMaterial",
-    value: function createBasicMaterial() {
-      var materialSystem = this.container.getNamed(_gWebgpuCore.IDENTIFIER.Systems, _gWebgpuCore.IDENTIFIER.MaterialSystem);
-      return materialSystem.createBasicMaterial();
-    }
-  }, {
     key: "createShaderMaterial",
@@ -259,2 +291,12 @@ value: function createShaderMaterial(params) {
       worldContainer.bind(World).toSelf();
+      worldContainer.bind(_Cache.TextureCache).toSelf();
+      worldContainer.bind(_Texture2D.Texture2D).toSelf(); // bind geometries
+
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Geometry).to(_Box.Box).whenTargetNamed(_geometry.Geometry.BOX);
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Geometry).to(_Sphere.Sphere).whenTargetNamed(_geometry.Geometry.SPHERE);
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Geometry).to(_Plane.Plane).whenTargetNamed(_geometry.Geometry.PLANE);
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Geometry).to(_Merged.Merged).whenTargetNamed(_geometry.Geometry.MERGED); // bind materials
+
+      worldContainer.bind(_gWebgpuCore.IDENTIFIER.Material).to(_basic.Basic).whenTargetNamed(_material.Material.BASIC); // bind renderables
+
       worldContainer.bind(_gWebgpuCore.IDENTIFIER.Renderable).to(_point.Point).whenTargetNamed(_Renderable.Renderable.POINT);
@@ -261,0 +303,0 @@ worldContainer.bind(_gWebgpuCore.IDENTIFIER.Renderable).to(_line.Line).whenTargetNamed(_Renderable.Renderable.LINE);

package.json

 {
   "name": "@antv/g-webgpu",
-  "version": "0.5.2",
+  "version": "0.5.3-alpha.0",
   "description": "",
@@ -27,4 +27,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-webgpu-core": "^0.5.2",
-    "@antv/g-webgpu-engine": "^0.5.2",
+    "@antv/g-webgpu-core": "^0.5.3-alpha.0",
+    "@antv/g-webgpu-engine": "^0.5.3-alpha.0",
     "@webgpu/types": "^0.0.31",
@@ -31,0 +31,0 @@ "gl-matrix": "^3.1.0",

No alert changes

Improved metrics

Total package byte prevSize

704681

increased by36.71%

Number of package files

137

increased by47.31%

Lines of code

7579

increased by33.11%

Dependency changes

• Updated@antv/g-webgpu-core@^0.5.3-alpha.0

• Updated@antv/g-webgpu-engine@^0.5.3-alpha.0