matrix-engine-wgpu 1.0.1 → 1.0.2

package/LICENSE

@@ -1,21 +1,26 @@
-MIT License
+Copyright 2019 WebGPU Samples Contributors
 
-Copyright (c) 2024 Nikola
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+   1. Redistributions of source code must retain the above copyright notice,
+      this list of conditions and the following disclaimer.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+   2. Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+   3. Neither the name of the copyright holder nor the names of its
+      contributors may be used to endorse or promote products derived from this
+      software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/REFERENCE.md

@@ -1,7 +1,53 @@
 
+### Best solution for learning:
 
+https://webgpufundamentals.org/webgpu/lessons/webgpu-from-webgl.html
 
-Best solution for learning:
 
-https://webgpufundamentals.org/webgpu/lessons/webgpu-from-webgl.html
+###  I got answer from gman at stackoverflow.com :
+
+https://stackoverflow.com/questions/78093302/webgpu-i-cant-draw-two-object-in-same-scene/78098135#78098135
+
+Interest facts about webGPU tech:
+
+```
+You can have different pipelines if the things you want to draw actually need different pipelines but if possible you could try to have less pipelines than more. In the example above, if you cube had a different pipeline than the sphere you'd call setPipeline with the sphere's pipeline after drawing the cube and before drawing the sphere.
+```
+
+```
+Let's assume you only have one pipeline and 2 things you want to draw with that pipeline, a cube, and a sphere. In pseudo code you might do something like this
+
+at init time
+create pipeline
+create vertex buffers for cube
+create uniform buffers for cube
+create bindGroup for cube
+create vertex buffers for sphere
+create uniform buffers for sphere
+create bindGroup for cube
+at render time
+create command buffer
+begin render pass
+set pipeline
+set vertex buffers for cube
+set bindGroups for cube
+draw cube
+set vertex buffers for sphere
+set bindgroups for sphere
+draw sphere
+end render pass
+finish command buffer
+submit command buffer
+
+Things to notice, there is only one command buffer. There is only 1 render pass.
+```
+
+
+```
+For each render pass, you need to set loadOp and storeOp correctly. 
+Most examples that have one render pass set loadOp: 'clear' but in the example above, if render pass 2 had loadOp: 'clear' it would erase the results from render pass 1. Instead it would need to be loadOp: 'load'.
+```
+
+YEs this is happening " would erase the results from render pass 1 "
+
 

package/main.js

@@ -1,20 +1,26 @@
 import MatrixEngineWGPU from "./src/meWGPU";
 
-let application = new MatrixEngineWGPU(()=> {
+let application = new MatrixEngineWGPU({ useSingleRenderPass: false }, () => {
 
   let c = {
-    position: { x: -1, y: 3, z: -10},
+    position: {x: -3, y: 0, z: -5},
+    rotation: {x: 0, y: 45, z: 0},
+    rotationSpeed: {x: 0, y: 0, z: 0},
     texturesPaths: ['./res/textures/rust.jpg']
   };
 
   let o = {
-    position: { x: 5, y: 2, z: -10},
+    position: {x: 3, y: 0, z: -10},
+    rotation: {x: 0, y: 45, z: 0},
+    rotationSpeed: {x: 0, y: 10, z: 0},
     texturesPaths: ['./res/textures/rust.jpg']
   };
 
-  application.addCube(c)
+
   application.addBall(o)
 
+  application.addCube(c)
+  
 
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "webGPU powered pwa application.Crazy fast rendering.",
   "main": "index.js",
   "scripts": {

package/public/app.js

@@ -3,25 +3,47 @@
 
 var _meWGPU = _interopRequireDefault(require("./src/meWGPU"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-let application = new _meWGPU.default(() => {
+let application = new _meWGPU.default({
+  useSingleRenderPass: false
+}, () => {
   let c = {
     position: {
-      x: -1,
-      y: 3,
-      z: -10
+      x: -3,
+      y: 0,
+      z: -5
+    },
+    rotation: {
+      x: 0,
+      y: 45,
+      z: 0
+    },
+    rotationSpeed: {
+      x: 0,
+      y: 0,
+      z: 0
     },
     texturesPaths: ['./res/textures/rust.jpg']
   };
   let o = {
     position: {
-      x: 5,
-      y: 2,
+      x: 3,
+      y: 0,
       z: -10
     },
+    rotation: {
+      x: 0,
+      y: 45,
+      z: 0
+    },
+    rotationSpeed: {
+      x: 0,
+      y: 10,
+      z: 0
+    },
     texturesPaths: ['./res/textures/rust.jpg']
   };
-  application.addCube(c);
   application.addBall(o);
+  application.addCube(c);
 });
 window.app = application;
 
@@ -5386,6 +5408,7 @@ class MEBall {
   constructor(canvas, device, context, o) {
     this.context = context;
     this.device = device;
+    this.entityArgPass = o.entityArgPass;
     this.SphereLayout = {
       vertexStride: 8 * 4,
       positionsOffset: 0,
@@ -5397,6 +5420,10 @@ class MEBall {
       this.texturesPaths.push(t);
     });
     this.position = new _matrixClass.Position(o.position.x, o.position.y, o.position.z);
+    this.rotation = new _matrixClass.Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
+    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
+    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
+    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
     this.shaderModule = device.createShaderModule({
       code: _shaders.BALL_SHADER
     });
@@ -5483,26 +5510,23 @@ class MEBall {
         this.renderables = [this.planet];
 
         // this.ensureEnoughAsteroids(asteroids, this.transform);
-
         this.renderPassDescriptor = {
           colorAttachments: [{
             view: undefined,
-            // Assigned later
-
             clearValue: {
               r: 0.0,
               g: 0.0,
               b: 0.0,
               a: 1.0
             },
-            loadOp: 'clear',
-            storeOp: 'store'
+            loadOp: this.entityArgPass.loadOp,
+            storeOp: this.entityArgPass.storeOp
           }],
           depthStencilAttachment: {
             view: this.depthTexture.createView(),
             depthClearValue: 1.0,
-            depthLoadOp: 'clear',
-            depthStoreOp: 'store'
+            depthLoadOp: this.entityArgPass.depthLoadOp,
+            depthStoreOp: this.entityArgPass.depthStoreOp
           }
         };
         const aspect = canvas.width / canvas.height;
@@ -5614,9 +5638,9 @@ class MEBall {
     const viewMatrix = _wgpuMatrix.mat4.identity();
     _wgpuMatrix.mat4.translate(viewMatrix, _wgpuMatrix.vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
     const now = Date.now() / 1000;
-    _wgpuMatrix.mat4.rotateZ(viewMatrix, Math.PI * 0.1, viewMatrix);
-    _wgpuMatrix.mat4.rotateX(viewMatrix, Math.PI * 0.1, viewMatrix);
-    _wgpuMatrix.mat4.rotateY(viewMatrix, now * 0.05, viewMatrix);
+    _wgpuMatrix.mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
+    _wgpuMatrix.mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
+    _wgpuMatrix.mat4.rotateZ(viewMatrix, Math.PI * this.rotation.getRotZ(), viewMatrix);
     _wgpuMatrix.mat4.multiply(this.projectionMatrix, viewMatrix, this.modelViewProjectionMatrix);
     return this.modelViewProjectionMatrix;
   }
@@ -5722,6 +5746,7 @@ class MEBall {
       indices: new Uint16Array(indices)
     };
   }
+
   // Render bundles function as partial, limited render passes, so we can use the
   // same code both to render the scene normally and to build the render bundle.
   renderScene(passEncoder) {
@@ -5778,6 +5803,8 @@ class MECube {
   constructor(canvas, device, context, o) {
     this.device = device;
     this.context = context;
+    this.entityArgPass = o.entityArgPass;
+    console.log('passed args', o.entityArgPass);
     this.shaderModule = device.createShaderModule({
       code: _shaders.BALL_SHADER
     });
@@ -5787,6 +5814,10 @@ class MECube {
     });
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
     this.position = new _matrixClass.Position(o.position.x, o.position.y, o.position.z);
+    this.rotation = new _matrixClass.Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
+    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
+    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
+    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
     this.pipeline = device.createRenderPipeline({
       layout: 'auto',
       vertex: {
@@ -5869,9 +5900,7 @@ class MECube {
         this.planet.bindGroup = this.createSphereBindGroup(this.texture0, this.transform);
         var asteroids = [this.createSphereRenderable(0.2, 8, 6, 0.15), this.createSphereRenderable(0.13, 8, 6, 0.15)];
         this.renderables = [this.planet];
-
         // this.ensureEnoughAsteroids(asteroids, this.transform);
-
         this.renderPassDescriptor = {
           colorAttachments: [{
             view: undefined,
@@ -5881,14 +5910,14 @@ class MECube {
               b: 0.0,
               a: 1.0
             },
-            loadOp: 'clear',
-            storeOp: 'store'
+            loadOp: this.entityArgPass.loadOp,
+            storeOp: this.entityArgPass.storeOp
           }],
           depthStencilAttachment: {
             view: this.depthTexture.createView(),
             depthClearValue: 1.0,
-            depthLoadOp: 'clear',
-            depthStoreOp: 'store'
+            depthLoadOp: this.entityArgPass.depthLoadOp,
+            depthStoreOp: this.entityArgPass.depthStoreOp
           }
         };
         const aspect = canvas.width / canvas.height;
@@ -5939,7 +5968,7 @@ class MECube {
     }
   }
   updateRenderBundle() {
-    console.log('sss');
+    console.log('[CUBE] updateRenderBundle');
     const renderBundleEncoder = this.device.createRenderBundleEncoder({
       colorFormats: [this.presentationFormat],
       depthStencilFormat: 'depth24plus'
@@ -5997,12 +6026,13 @@ class MECube {
     return bindGroup;
   }
   getTransformationMatrix(pos) {
+    // const now = Date.now() / 1000;
+
     const viewMatrix = _wgpuMatrix.mat4.identity();
     _wgpuMatrix.mat4.translate(viewMatrix, _wgpuMatrix.vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
-    const now = Date.now() / 1000;
-    _wgpuMatrix.mat4.rotateZ(viewMatrix, Math.PI * 0, viewMatrix);
-    _wgpuMatrix.mat4.rotateX(viewMatrix, Math.PI * 0, viewMatrix);
-    _wgpuMatrix.mat4.rotateY(viewMatrix, -45, viewMatrix);
+    _wgpuMatrix.mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
+    _wgpuMatrix.mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
+    _wgpuMatrix.mat4.rotateZ(viewMatrix, Math.PI * this.rotation.getRotZ(), viewMatrix);
     _wgpuMatrix.mat4.multiply(this.projectionMatrix, viewMatrix, this.modelViewProjectionMatrix);
     return this.modelViewProjectionMatrix;
   }
@@ -6145,7 +6175,7 @@ exports.default = MECube;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Position = void 0;
+exports.Rotation = exports.Position = void 0;
 // Sub classes for matrix-wgpu
 
 /**
@@ -6296,6 +6326,48 @@ class Position {
   }
 }
 exports.Position = Position;
+class Rotation {
+  constructor(x, y, z) {
+    // Not in use for nwo this is from matrix-engine project [nameUniq]
+    this.nameUniq = null;
+    if (typeof x == 'undefined') x = 0;
+    if (typeof y == 'undefined') y = 0;
+    if (typeof z == 'undefined') z = 0;
+    this.x = x;
+    this.y = y;
+    this.z = z;
+    this.rotationSpeed = {
+      x: 0,
+      y: 0,
+      z: 0
+    };
+  }
+  getRotX() {
+    if (this.rotationSpeed.x == 0) {
+      return this.x;
+    } else {
+      this.x = this.x + this.rotationSpeed.x * 0.001;
+      return this.x;
+    }
+  }
+  getRotY() {
+    if (this.rotationSpeed.y == 0) {
+      return this.y;
+    } else {
+      this.y = this.y + this.rotationSpeed.y * 0.001;
+      return this.y;
+    }
+  }
+  getRotZ() {
+    if (this.rotationSpeed.z == 0) {
+      return this.z;
+    } else {
+      this.z = this.z + this.rotationSpeed.z * 0.001;
+      return this.z;
+    }
+  }
+}
+exports.Rotation = Rotation;
 
 },{}],6:[function(require,module,exports){
 "use strict";
@@ -6307,13 +6379,26 @@ exports.default = void 0;
 var _ball = _interopRequireDefault(require("./engine/ball.js"));
 var _cube = _interopRequireDefault(require("./engine/cube.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// import { mat4, vec3 } from 'wgpu-matrix';
-// import { createSphereMesh, SphereLayout } from './src/engine/ballsBuffer.js';
-
 class MatrixEngineWGPU {
   mainRenderBundle = [];
   rbContainer = [];
-  constructor(callback) {
+  frame = () => {};
+  entityArgPass = {
+    loadOp: 'clear',
+    storeOp: 'store',
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  };
+  constructor(options, callback) {
+    console.log('typeof options ', typeof options);
+    console.log('typeof options ', options);
+    if (typeof options == 'undefined' || typeof options == "function") {
+      this.options = {
+        useSingleRenderPass: true
+      };
+      callback = options;
+    }
+    this.options = options;
     var canvas = document.createElement('canvas');
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
@@ -6340,8 +6425,41 @@ class MatrixEngineWGPU {
       format: presentationFormat,
       alphaMode: 'premultiplied'
     });
+    if (this.options.useSingleRenderPass == true) {
+      this.makeDefaultRenderPassDescriptor();
+      this.frame = this.frameSinglePass;
+    } else {
+      // must be
+      this.frame = this.framePassPerObject;
+    }
     this.run(callback);
   };
+  makeDefaultRenderPassDescriptor = () => {
+    this.depthTexture = this.device.createTexture({
+      size: [this.canvas.width, this.canvas.height],
+      format: 'depth24plus',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    this.renderPassDescriptor = {
+      colorAttachments: [{
+        view: undefined,
+        clearValue: {
+          r: 0.0,
+          g: 0.0,
+          b: 0.0,
+          a: 1.0
+        },
+        loadOp: 'clear',
+        storeOp: 'store'
+      }],
+      depthStencilAttachment: {
+        view: this.depthTexture.createView(),
+        depthClearValue: 1.0,
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store'
+      }
+    };
+  };
   addCube = o => {
     if (typeof o === 'undefined') {
       var o = {
@@ -6350,7 +6468,18 @@ class MatrixEngineWGPU {
           y: 0,
           z: -4
         },
-        texturesPaths: ['./res/textures/default.png']
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        entityArgPass: this.entityArgPass
       };
     } else {
       if (typeof o.position === 'undefined') {
@@ -6360,9 +6489,24 @@ class MatrixEngineWGPU {
           z: -4
         };
       }
+      if (typeof o.rotation === 'undefined') {
+        o.rotation = {
+          x: 0,
+          y: 0,
+          z: 0
+        };
+      }
+      if (typeof o.rotationSpeed === 'undefined') {
+        o.rotationSpeed = {
+          x: 0,
+          y: 0,
+          z: 0
+        };
+      }
       if (typeof o.texturesPaths === 'undefined') {
         o.texturesPaths = ['./res/textures/default.png'];
       }
+      o.entityArgPass = this.entityArgPass;
     }
     let myCube1 = new _cube.default(this.canvas, this.device, this.context, o);
     this.mainRenderBundle.push(myCube1);
@@ -6375,7 +6519,18 @@ class MatrixEngineWGPU {
           y: 0,
           z: -4
         },
-        texturesPaths: ['./res/textures/default.png']
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        entityArgPass: this.entityArgPass
       };
     } else {
       if (typeof o.position === 'undefined') {
@@ -6385,9 +6540,24 @@ class MatrixEngineWGPU {
           z: -4
         };
       }
+      if (typeof o.rotation === 'undefined') {
+        o.rotation = {
+          x: 0,
+          y: 0,
+          z: 0
+        };
+      }
+      if (typeof o.rotationSpeed === 'undefined') {
+        o.rotationSpeed = {
+          x: 0,
+          y: 0,
+          z: 0
+        };
+      }
       if (typeof o.texturesPaths === 'undefined') {
         o.texturesPaths = ['./res/textures/default.png'];
       }
+      o.entityArgPass = this.entityArgPass;
     }
     let myBall1 = new _ball.default(this.canvas, this.device, this.context, o);
     this.mainRenderBundle.push(myBall1);
@@ -6400,22 +6570,38 @@ class MatrixEngineWGPU {
       callback();
     }, 10);
   }
-  frame = () => {
+  frameSinglePass = () => {
+    console.log('single');
     let commandEncoder = this.device.createCommandEncoder();
     this.rbContainer = [];
     let passEncoder;
     this.mainRenderBundle.forEach((meItem, index) => {
       meItem.draw();
       this.rbContainer.push(meItem.renderBundle);
-      if (index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+      // if(index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
     });
-
-    // passEncoder.executeBundles([NIK.renderBundle, NIK2.renderBundle]);
+    this.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
+    passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
     passEncoder.executeBundles(this.rbContainer);
     passEncoder.end();
     this.device.queue.submit([commandEncoder.finish()]);
     requestAnimationFrame(this.frame);
   };
+  framePassPerObject = () => {
+    console.log('framePassPerObject');
+    let commandEncoder = this.device.createCommandEncoder();
+    this.rbContainer = [];
+    let passEncoder;
+    this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.draw();
+      this.rbContainer.push(meItem.renderBundle);
+      passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+      passEncoder.executeBundles(this.rbContainer);
+      passEncoder.end();
+    });
+    this.device.queue.submit([commandEncoder.finish()]);
+    requestAnimationFrame(this.frame);
+  };
 }
 exports.default = MatrixEngineWGPU;
 

package/readme.md

@@ -23,6 +23,9 @@ I publish (this repo) npm package with name `matrix-engine-wgpu`.
 
 For now i will use `createRenderBundleEncoder` for multi object scene draws.
 
+
+
+
 Main instance script:
 ```js
 let application = new MatrixEngineWGPU(()=> {
@@ -69,6 +72,36 @@ frame = () => {
 
 ## LICENCE
 
- - MIT LICENCE - Nikola Lukic zlatnaspirala@gmail.com 2024
  - Structural shema for project and personal learning inspired by:
    https://webgpu.github.io/webgpu-samples/samples/renderBundles
+
+### BSD 3-Clause 
+
+https://github.com/webgpu/webgpu-samples/blob/main/LICENSE.txt
+
+Copyright 2019 WebGPU Samples Contributors
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+   1. Redistributions of source code must retain the above copyright notice,
+      this list of conditions and the following disclaimer.
+
+   2. Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+
+   3. Neither the name of the copyright holder nor the names of its
+      contributors may be used to endorse or promote products derived from this
+      software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/src/engine/ball.js

@@ -1,6 +1,6 @@
 import {BALL_SHADER} from "../shaders/shaders";
 import {mat4, vec3} from 'wgpu-matrix';
-import {Position} from "./matrix-class";
+import {Position, Rotation} from "./matrix-class";
 
 export default class MEBall {
 
@@ -8,6 +8,8 @@ export default class MEBall {
     this.context = context;
     this.device = device;
 
+    this.entityArgPass = o.entityArgPass;
+
     this.SphereLayout = {
       vertexStride: 8 * 4,
       positionsOffset: 0,
@@ -22,6 +24,11 @@ export default class MEBall {
     })
 
     this.position = new Position(o.position.x, o.position.y, o.position.z)
+    this.rotation = new Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
+    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
+    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
+    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
+
     this.shaderModule = device.createShaderModule({code: BALL_SHADER});
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
@@ -128,23 +135,20 @@ export default class MEBall {
         this.renderables = [this.planet];
 
         // this.ensureEnoughAsteroids(asteroids, this.transform);
-
         this.renderPassDescriptor = {
           colorAttachments: [
             {
-              view: undefined, // Assigned later
-
+              view: undefined,
               clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
-              loadOp: 'clear',
-              storeOp: 'store',
+              loadOp:  this.entityArgPass.loadOp,
+              storeOp: this.entityArgPass.storeOp,
             },
           ],
           depthStencilAttachment: {
             view: this.depthTexture.createView(),
-
             depthClearValue: 1.0,
-            depthLoadOp: 'clear',
-            depthStoreOp: 'store',
+            depthLoadOp: this.entityArgPass.depthLoadOp,
+            depthStoreOp: this.entityArgPass.depthStoreOp,
           },
         };
 
@@ -281,9 +285,9 @@ export default class MEBall {
     mat4.translate(viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
     const now = Date.now() / 1000;
 
-    mat4.rotateZ(viewMatrix, Math.PI * 0.1, viewMatrix);
-    mat4.rotateX(viewMatrix, Math.PI * 0.1, viewMatrix);
-    mat4.rotateY(viewMatrix, now * 0.05, viewMatrix);
+    mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
+    mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
+    mat4.rotateZ(viewMatrix, Math.PI * this.rotation.getRotZ(), viewMatrix);
 
     mat4.multiply(this.projectionMatrix, viewMatrix, this.modelViewProjectionMatrix);
     return this.modelViewProjectionMatrix;
@@ -402,12 +406,12 @@ export default class MEBall {
       }
     }
 
-
     return {
       vertices: new Float32Array(vertices),
       indices: new Uint16Array(indices),
     };
   }
+
   // Render bundles function as partial, limited render passes, so we can use the
   // same code both to render the scene normally and to build the render bundle.
   renderScene(passEncoder) {

package/src/engine/cube.js

@@ -1,6 +1,6 @@
 import {BALL_SHADER} from "../shaders/shaders";
 import {mat4, vec3} from 'wgpu-matrix';
-import {Position} from "./matrix-class";
+import {Position, Rotation} from "./matrix-class";
 
 var SphereLayout = {
   vertexStride: 8 * 4,
@@ -15,6 +15,9 @@ export default class MECube {
     this.device = device;
     this.context = context;
 
+    this.entityArgPass = o.entityArgPass;
+
+    console.log('passed args', o.entityArgPass)
     this.shaderModule = device.createShaderModule({
       code: BALL_SHADER,
     });
@@ -26,7 +29,11 @@ export default class MECube {
     })
 
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    this.position = new Position(o.position.x, o.position.y, o.position.z)
+    this.position = new Position(o.position.x, o.position.y, o.position.z);
+    this.rotation = new Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
+    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
+    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
+    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
     this.pipeline = device.createRenderPipeline({
       layout: 'auto',
       vertex: {
@@ -109,23 +116,21 @@ export default class MECube {
         ];
 
         this.renderables = [this.planet];
-
         // this.ensureEnoughAsteroids(asteroids, this.transform);
-
         this.renderPassDescriptor = {
           colorAttachments: [
             {
               view: undefined,
               clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
-              loadOp: 'clear',
-              storeOp: 'store',
+              loadOp:  this.entityArgPass.loadOp,
+              storeOp: this.entityArgPass.storeOp,
             },
           ],
           depthStencilAttachment: {
             view: this.depthTexture.createView(),
             depthClearValue: 1.0,
-            depthLoadOp: 'clear',
-            depthStoreOp: 'store',
+            depthLoadOp: this.entityArgPass.depthLoadOp,
+            depthStoreOp: this.entityArgPass.depthStoreOp,
           },
         };
 
@@ -181,7 +186,7 @@ export default class MECube {
   }
 
   updateRenderBundle() {
-    console.log('sss')
+    console.log('[CUBE] updateRenderBundle')
     const renderBundleEncoder = this.device.createRenderBundleEncoder({
       colorFormats: [this.presentationFormat],
       depthStencilFormat: 'depth24plus',
@@ -252,14 +257,19 @@ export default class MECube {
   }
 
   getTransformationMatrix(pos) {
+    // const now = Date.now() / 1000;
+
     const viewMatrix = mat4.identity();
+
     mat4.translate(viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
-    const now = Date.now() / 1000;
-    mat4.rotateZ(viewMatrix, Math.PI * 0, viewMatrix);
-    mat4.rotateX(viewMatrix, Math.PI * 0, viewMatrix);
-    mat4.rotateY(viewMatrix,   -45, viewMatrix);
+
+    mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
+    mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
+    mat4.rotateZ(viewMatrix, Math.PI * this.rotation.getRotZ(), viewMatrix);
+
     mat4.multiply(this.projectionMatrix, viewMatrix, this.modelViewProjectionMatrix);
     return this.modelViewProjectionMatrix;
+
   }
 
   async loadTex1(device) {

package/src/engine/engine.js

@@ -0,0 +1,8 @@
+
+
+export class Engine {
+
+  constructor() {
+    
+  }
+}

package/src/engine/matrix-class.js

@@ -169,3 +169,45 @@ export class Position {
   }
 }
 
+export class Rotation {
+
+  constructor(x, y, z) {
+    // Not in use for nwo this is from matrix-engine project [nameUniq]
+    this.nameUniq = null;
+    if(typeof x == 'undefined') x = 0;
+    if(typeof y == 'undefined') y = 0;
+    if(typeof z == 'undefined') z = 0;
+    this.x = x;
+    this.y = y;
+    this.z = z;
+    this.rotationSpeed = {x: 0, y: 0, z: 0}
+  }
+
+  getRotX () {
+    if (this.rotationSpeed.x == 0) {
+      return this.x;
+    } else {
+      this.x = this.x + this.rotationSpeed.x* 0.001;
+      return this.x;
+    }
+  }
+
+  getRotY () {
+    if (this.rotationSpeed.y == 0) {
+      return this.y;
+    } else {
+      this.y = this.y + this.rotationSpeed.y * 0.001;
+      return this.y;
+    }
+  }
+
+  getRotZ () {
+    if (this.rotationSpeed.z == 0) {
+      return this.z;
+    } else {
+      this.z = this.z + this.rotationSpeed.z* 0.001;
+      return this.z;
+    }
+  }
+
+}

package/src/meWGPU.js

@@ -1,19 +1,35 @@
 import MEBall from "./engine/ball.js";
 import MECube from './engine/cube.js';
-// import { mat4, vec3 } from 'wgpu-matrix';
-// import { createSphereMesh, SphereLayout } from './src/engine/ballsBuffer.js';
 
 export default class MatrixEngineWGPU {
 
   mainRenderBundle = [];
   rbContainer = [];
+  frame = () => {};
+
+  entityArgPass = {
+    loadOp: 'clear',
+    storeOp: 'store',
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  }
+
+  constructor(options, callback) {
+    console.log('typeof options ', typeof options )
+    console.log('typeof options ',  options )
+    if (typeof options == 'undefined' || typeof options == "function") {
+      this.options = {
+        useSingleRenderPass: true
+      }
+      callback = options;
+    }
+
+    this.options = options;
 
-  constructor(callback) {
     var canvas = document.createElement('canvas')
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     document.body.append(canvas)
-
     this.init({canvas, callback})
   }
 
@@ -34,18 +50,58 @@ export default class MatrixEngineWGPU {
       alphaMode: 'premultiplied',
     });
 
+    if(this.options.useSingleRenderPass == true) {
+      this.makeDefaultRenderPassDescriptor()
+      this.frame = this.frameSinglePass;
+    } else {
+      // must be
+      this.frame = this.framePassPerObject;
+    }
+
     this.run(callback)
   };
 
+  makeDefaultRenderPassDescriptor = () => {
+
+    this.depthTexture = this.device.createTexture({
+      size: [this.canvas.width, this.canvas.height],
+      format: 'depth24plus',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    this.renderPassDescriptor = {
+      colorAttachments: [
+        {
+          view: undefined,
+          clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+      depthStencilAttachment: {
+        view: this.depthTexture.createView(),
+        depthClearValue: 1.0,
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store',
+      },
+    };
+  }
+
   addCube = (o) => {
     if(typeof o === 'undefined') {
       var o = {
         position: {x: 0, y: 0, z: -4},
-        texturesPaths: ['./res/textures/default.png']
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        entityArgPass: this.entityArgPass
       }
     } else {
       if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
+      if(typeof o.rotation === 'undefined') {o.rotation = {x: 0, y: 0, z: 0}}
+      if(typeof o.rotationSpeed === 'undefined') {o.rotationSpeed = {x: 0, y: 0, z: 0}}
       if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
+      o.entityArgPass = this.entityArgPass;
     }
     let myCube1 = new MECube(this.canvas, this.device, this.context, o)
     this.mainRenderBundle.push(myCube1);
@@ -55,11 +111,17 @@ export default class MatrixEngineWGPU {
     if(typeof o === 'undefined') {
       var o = {
         position: {x: 0, y: 0, z: -4},
-        texturesPaths: ['./res/textures/default.png']
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        entityArgPass: this.entityArgPass
       }
     } else {
       if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
+      if(typeof o.rotation === 'undefined') {o.rotation = {x: 0, y: 0, z: 0}}
+      if(typeof o.rotationSpeed === 'undefined') {o.rotationSpeed = {x: 0, y: 0, z: 0}}
       if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
+      o.entityArgPass = this.entityArgPass;
     }
     let myBall1 = new MEBall(this.canvas, this.device, this.context, o)
     this.mainRenderBundle.push(myBall1);
@@ -70,23 +132,42 @@ export default class MatrixEngineWGPU {
     setTimeout(() => {callback()}, 10)
   }
 
-  frame = () => {
+  frameSinglePass = () => {
+    console.log('single')
     let commandEncoder = this.device.createCommandEncoder();
     this.rbContainer = [];
-
     let passEncoder;
 
     this.mainRenderBundle.forEach((meItem, index) => {
       meItem.draw();
       this.rbContainer.push(meItem.renderBundle)
-      if(index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+      // if(index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
     })
 
-    // passEncoder.executeBundles([NIK.renderBundle, NIK2.renderBundle]);
+    this.renderPassDescriptor.colorAttachments[0].view = this.context
+      .getCurrentTexture()
+      .createView();
+
+    passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
     passEncoder.executeBundles(this.rbContainer);
     passEncoder.end();
     this.device.queue.submit([commandEncoder.finish()]);
+    requestAnimationFrame(this.frame);
+  }
 
+  framePassPerObject = () => {
+    console.log('framePassPerObject')
+    let commandEncoder = this.device.createCommandEncoder();
+    this.rbContainer = [];
+    let passEncoder;
+    this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.draw();
+      this.rbContainer.push(meItem.renderBundle)
+      passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+      passEncoder.executeBundles(this.rbContainer);
+      passEncoder.end();
+    })
+    this.device.queue.submit([commandEncoder.finish()]);
     requestAnimationFrame(this.frame);
   }
 }