matrix-engine-wgpu 1.0.2 → 1.0.4

package/public/res/meshes/obj/armor.obj

@@ -0,0 +1,319 @@
+# Blender v2.77 (sub 0) OBJ File: 'rpg items 2.blend'
+# www.blender.org
+mtllib spider_drone.mtl
+o armor_Plane.005
+v 0.298489 -0.802792 0.189632
+v 0.440916 -0.218482 0.241181
+v 0.169933 0.316586 0.269533
+v 0.294704 0.456258 0.115448
+v 0.635841 0.378181 0.017608
+v 0.575883 0.191020 0.172973
+v 0.592626 -0.053642 0.254658
+v 0.684469 -0.040584 0.072155
+v 0.338253 -0.088105 0.220946
+v 0.251449 0.287185 0.210654
+v 0.376108 0.381851 0.092555
+v -0.298489 -0.802792 0.189632
+v -0.000000 -0.802792 0.259498
+v -0.000000 -0.042422 0.380448
+v -0.440916 -0.218482 0.241181
+v -0.000000 0.277199 0.333237
+v -0.169933 0.316586 0.269533
+v -0.294704 0.456258 0.115448
+v -0.635841 0.378181 0.017608
+v -0.575883 0.191020 0.172973
+v -0.592626 -0.053642 0.254658
+v -0.000000 -0.114600 0.304054
+v -0.684469 -0.040584 0.072155
+v -0.338253 -0.088105 0.220946
+v -0.251449 0.287185 0.210654
+v -0.376108 0.381851 0.092555
+v 0.339839 -0.802792 -0.205727
+v 0.420581 -0.197667 -0.251268
+v 0.143759 0.476682 -0.299714
+v 0.279194 0.508063 -0.138994
+v 0.635841 0.378181 -0.148389
+v 0.597662 0.191020 -0.303754
+v 0.415281 -0.802792 -0.011773
+v 0.509713 -0.353713 -0.011773
+v 0.684469 -0.040584 -0.202936
+v 0.337962 -0.130996 -0.197246
+v 0.235000 0.287185 -0.234200
+v 0.376108 0.406804 -0.160230
+v -0.339839 -0.802792 -0.205727
+v -0.000000 -0.802792 -0.285120
+v -0.420581 -0.197667 -0.251268
+v -0.143759 0.476682 -0.299714
+v -0.279194 0.508063 -0.138994
+v -0.635841 0.378181 -0.148389
+v -0.597662 0.191020 -0.303754
+v -0.415281 -0.802792 -0.011773
+v -0.509713 -0.353713 -0.011773
+v -0.684469 -0.040584 -0.202936
+v -0.337963 -0.130996 -0.197246
+v -0.235000 0.287185 -0.234200
+v -0.376108 0.406804 -0.160230
+v -0.000000 0.031672 -0.374798
+vt 0.3703 0.2382
+vt 0.5280 0.2179
+vt 0.3702 0.2670
+vt 0.5620 0.2770
+vt 0.4220 0.3722
+vt 0.3704 0.3547
+vt 0.5716 0.3534
+vt 0.4598 0.4276
+vt 0.5889 0.4450
+vt 0.3706 0.0248
+vt 0.4816 0.0261
+vt 0.5667 0.0138
+vt 0.6111 0.1593
+vt 0.0982 0.8245
+vt 0.0887 0.6751
+vt 0.1905 0.7482
+vt 0.6312 0.2762
+vt 0.9626 0.2507
+vt 0.8205 0.3620
+vt 0.8136 0.1536
+vt 0.7283 0.2228
+vt 0.6907 0.1868
+vt 0.7000 0.1615
+vt 0.7306 0.1973
+vt 0.7348 0.3264
+vt 0.7309 0.3012
+vt 0.7432 0.2614
+vt 0.7001 0.0956
+vt 0.7430 0.1146
+vt 0.7768 0.0686
+vt 0.9654 0.1836
+vt 0.2115 0.2175
+vt 0.3166 0.3727
+vt 0.1770 0.2769
+vt 0.2788 0.4287
+vt 0.1668 0.3536
+vt 0.1495 0.4458
+vt 0.2594 0.0254
+vt 0.1285 0.1582
+vt 0.1742 0.0125
+vt 0.0147 0.2420
+vt 0.1073 0.2757
+vt 0.7067 0.3651
+vt 0.6958 0.3408
+vt 0.7112 0.4308
+vt 0.7528 0.4077
+vt 0.7895 0.4503
+vt 0.5900 0.5038
+vt 0.5932 0.5930
+vt 0.4548 0.4988
+vt 0.5485 0.7480
+vt 0.6410 0.8244
+vt 0.5941 0.9865
+vt 0.5099 0.9731
+vt 0.7385 0.9746
+vt 0.7369 0.7465
+vt 0.8252 0.9768
+vt 0.7943 0.5261
+vt 0.7640 0.5944
+vt 0.7224 0.5497
+vt 0.7429 0.5110
+vt 0.8651 0.5328
+vt 0.8908 0.6014
+vt 0.6573 0.5600
+vt 0.6704 0.6424
+vt 0.6552 0.7297
+vt 0.3696 0.9700
+vt 0.2292 0.9731
+vt 0.1485 0.5045
+vt 0.2831 0.4993
+vt 0.1459 0.5935
+vt 0.1451 0.9865
+vt 0.9162 0.7484
+vt 0.9144 0.5226
+vt 0.9325 0.5607
+vt 0.4121 0.5446
+vt 0.3693 0.6786
+vt 0.3266 0.5438
+vt 0.9943 0.5728
+vt 0.9802 0.6509
+vt 0.9938 0.7340
+vt 0.6505 0.6748
+vt 0.9119 0.9764
+vt 0.6828 0.4459
+vt 0.6611 0.3929
+vt 0.6507 0.3646
+vt 0.6442 0.1675
+vt 0.6527 0.1382
+vt 0.6708 0.0833
+vt 0.7235 0.2433
+vt 0.8027 0.0135
+vt 0.8592 0.0501
+vt 0.9739 0.1333
+vt 0.6868 0.9751
+vt 0.9636 0.9780
+vt 0.9816 0.3667
+vt 0.9698 0.3174
+vt 0.8728 0.4608
+vt 0.8189 0.5027
+vn -0.0731 -0.7249 0.6849
+vn 0.4851 -0.3507 0.8011
+vn -0.0000 -0.2274 0.9738
+vn 0.6574 -0.1551 0.7374
+vn 0.2753 0.2880 0.9172
+vn -0.0000 0.1911 0.9816
+vn 0.4494 0.4296 0.7832
+vn 0.3549 0.7223 0.5936
+vn 0.3449 0.8395 0.4198
+vn 0.0000 -0.0937 0.9956
+vn 0.5538 -0.1712 0.8148
+vn 0.9767 -0.2141 0.0164
+vn 0.9231 -0.3845 0.0029
+vn -0.9231 -0.3845 0.0029
+vn -0.6026 -0.4788 -0.6384
+vn -0.4190 -0.2958 -0.8584
+vn 0.8817 -0.3609 0.3039
+vn -0.0000 0.0251 -0.9997
+vn 0.4520 0.2386 -0.8595
+vn -0.4520 0.2386 -0.8595
+vn -0.4757 0.2802 -0.8338
+vn -0.6965 -0.5299 -0.4839
+vn -0.4476 -0.7237 -0.5253
+vn -0.4431 -0.2005 -0.8737
+vn 0.4431 -0.2005 -0.8737
+vn 0.4757 0.2802 -0.8338
+vn 0.0000 0.1247 -0.9922
+vn -0.1520 -0.9177 -0.3671
+vn -0.2728 -0.2248 -0.9355
+vn -0.2918 0.8129 -0.5041
+vn -0.5900 0.0681 -0.8045
+vn 0.0731 -0.7249 0.6849
+vn -0.4851 -0.3507 0.8011
+vn -0.2753 0.2880 0.9172
+vn -0.6574 -0.1551 0.7374
+vn -0.3549 0.7223 0.5936
+vn -0.4494 0.4296 0.7832
+vn -0.3449 0.8395 0.4198
+vn -0.5538 -0.1712 0.8148
+vn -0.9767 -0.2141 0.0164
+vn -0.8817 -0.3609 0.3039
+vn 0.4476 -0.7237 -0.5253
+vn 0.6965 -0.5299 -0.4839
+vn 0.1520 -0.9177 -0.3671
+vn 0.2728 -0.2248 -0.9355
+vn 0.2918 0.8129 -0.5041
+vn 0.2800 0.8712 -0.4033
+vn 0.2430 0.1576 -0.9571
+vn 0.3819 0.8630 -0.3307
+vn 0.4190 -0.2958 -0.8584
+vn 0.6174 -0.1495 -0.7723
+vn -0.6539 -0.0114 0.7565
+vn -0.3800 0.3314 0.8636
+vn -0.0000 -0.0487 0.9988
+vn -0.2244 0.1258 0.9663
+vn -0.1213 -0.0315 0.9921
+vn -0.3817 -0.7638 0.5204
+vn -0.7232 -0.5203 0.4542
+vn 0.2244 0.1258 0.9663
+vn 0.1213 -0.0315 0.9921
+vn -0.0639 -0.9116 0.4060
+vn 0.0493 -0.1081 0.9929
+vn -0.0732 0.8107 0.5808
+vn -0.0000 -0.1062 -0.9943
+vn -0.6174 -0.1495 -0.7723
+vn -0.2800 0.8712 -0.4033
+vn -0.3819 0.8630 -0.3307
+vn -0.2430 0.1576 -0.9571
+vn 0.3800 0.3314 0.8636
+vn 0.7232 -0.5203 0.4542
+vn 0.3817 -0.7638 0.5204
+vn 0.1770 0.3508 -0.9196
+vn 0.0000 -0.0255 -0.9997
+vn -0.1770 0.3508 -0.9196
+vn 0.0639 -0.9116 0.4060
+vn -0.0493 -0.1081 0.9929
+vn 0.0732 0.8107 0.5808
+vn 0.6026 -0.4788 -0.6384
+vn 0.6539 -0.0114 0.7565
+vn -0.9985 0.0048 -0.0537
+vn 0.9985 0.0048 -0.0537
+vn 0.5900 0.0681 -0.8045
+usemtl armor
+s 1
+f 22/1/1 2/2/2 14/3/3
+f 14/3/3 7/4/4 3/5/5 16/6/6
+f 14/3/3 2/2/2 7/4/4
+f 3/5/5 7/4/4 6/7/7 4/8/8
+f 5/9/9 4/8/8 6/7/7
+f 13/10/10 1/11/11 2/2/2 22/1/10
+f 2/2/2 1/11/11 33/12/12 34/13/13
+f 47/14/14 48/15/15 41/16/16
+f 7/4/4 2/2/2 8/17/17
+f 7/4/4 8/17/17 6/7/7
+f 13/18/18 24/19/19 9/20/20
+f 3/21/21 4/22/22 11/23/23 10/24/24
+f 25/25/25 17/26/26 16/27/27
+f 5/28/28 6/29/29 10/24/24 11/23/23
+f 6/29/29 8/30/30 9/20/20 10/24/24
+f 1/31/31 13/18/18 9/20/20
+f 22/1/32 14/3/3 15/32/33
+f 14/3/3 16/6/6 17/33/34 21/34/35
+f 14/3/3 21/34/35 15/32/33
+f 17/33/34 18/35/36 20/36/37 21/34/35
+f 19/37/38 20/36/37 18/35/36
+f 13/10/10 22/1/10 15/32/33 12/38/39
+f 15/32/33 47/39/14 46/40/40 12/38/39
+f 48/41/15 47/39/14 23/42/41
+f 21/34/35 23/42/41 15/32/33
+f 21/34/35 20/36/37 23/42/41
+f 25/25/25 16/27/27 24/19/19
+f 17/26/26 25/25/25 26/43/42 18/44/43
+f 24/19/19 16/27/27 9/20/20
+f 19/45/44 26/43/42 25/25/25 20/46/45
+f 20/46/45 25/25/25 24/19/19 23/47/46
+f 16/27/27 10/24/24 9/20/20
+f 31/48/47 32/49/48 30/50/49
+f 28/51/50 34/52/13 33/53/12 27/54/51
+f 27/55/52 36/56/53 40/57/54
+f 5/9/9 31/48/47 30/50/49 4/8/8
+f 29/58/55 37/59/56 38/60/57 30/61/58
+f 29/58/55 42/62/59 50/63/60 37/59/56
+f 31/64/61 38/60/57 37/59/56 32/65/62
+f 32/65/62 37/59/56 36/56/53 35/66/63
+f 40/67/64 39/68/65 41/16/16
+f 44/69/66 43/70/67 45/71/68
+f 27/54/51 40/67/64 28/51/50
+f 41/16/16 39/68/65 46/72/40 47/14/14
+f 47/39/14 15/32/33 23/42/41
+f 49/73/69 40/57/54 36/56/53
+f 19/37/38 18/35/36 43/70/67 44/69/66
+f 42/62/59 43/74/70 51/75/71 50/63/60
+f 29/76/72 52/77/73 42/78/74
+f 44/79/75 45/80/76 50/63/60 51/75/71
+f 45/80/76 48/81/77 49/73/69 50/63/60
+f 50/63/60 49/73/69 36/56/53 37/59/56
+f 28/51/50 32/49/48 35/82/78
+f 28/51/50 40/67/64 52/77/73
+f 48/15/15 45/71/68 41/16/16
+f 43/70/67 42/78/74 45/71/68
+f 29/76/72 30/50/49 32/49/48
+f 28/51/50 52/77/73 32/49/48
+f 41/16/16 52/77/73 40/67/64
+f 41/16/16 45/71/68 52/77/73
+f 45/71/68 42/78/74 52/77/73
+f 29/76/72 32/49/48 52/77/73
+f 40/57/54 49/73/69 39/83/79
+f 44/84/75 51/85/71 26/43/42 19/45/44
+f 18/44/43 26/43/42 51/85/71 43/86/70
+f 4/22/22 30/87/58 38/88/57 11/23/23
+f 31/89/61 5/28/28 11/23/23 38/88/57
+f 35/90/78 8/17/17 34/13/13
+f 34/52/13 28/51/50 35/82/78
+f 34/13/13 8/17/17 2/2/2
+f 9/20/20 8/30/30 35/91/63 36/92/53
+f 33/93/80 1/31/31 9/20/20
+f 33/94/80 36/56/53 27/55/52
+f 9/20/20 36/92/53 33/93/80
+f 46/95/81 39/83/79 49/73/69
+f 46/96/81 24/19/19 12/97/82
+f 49/98/69 24/19/19 46/96/81
+f 24/19/19 49/98/69 48/99/77 23/47/46
+f 24/19/19 13/18/18 12/97/82
+f 3/21/21 10/24/24 16/27/27

package/public/worker.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="manifest" href="manifest.web" />
+    <title>Matrix Engine webGPU variant. Created by Nikola Lukic zlatnaspirala@gmail.com </title>
+    <meta name="description" content="The benefits of this project is offering an overview of the entire application logic, easy native implementations (hybrid app), object structural. " />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link defer rel="stylesheet" href="css/style.css" />
+    <link rel="apple-touch-icon" href="res/icons/512.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="theme-color" content="#000000" />
+    <!-- <script defer src="./lib/gl-matrix-min.js"></script> -->
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui" />
+    <!-- <link rel="icon" type="image/png" sizes="96x96" href="res/icons/favicon-96x96.png" /> -->
+    <link rel="icon" type="image/png" sizes="512x512" href="res/icons/512.png" />
+    <!-- <link rel="icon" href="res/icons/favicon.ico" type="image/x-icon" /> -->
+    <!-- <meta name="msapplication-TileImage" content="res/icons/ms-icon.png" /> -->
+    <!-- <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script> -->
+  </head>
+  <body allow="autoplay">
+    <div id="shaders"></div>
+    <script src="app-worker.js"></script>
+  </body>
+</html>

package/readme.md

@@ -12,69 +12,77 @@
 The logos are licensed under Creative Commons Attribution 4.0 International.
 Download from https://www.w3.org/2023/02/webgpu-logos.html
 
-Used npm package `wgpu-matrix` for replacment of glmatrix library.
 
+Used npm package `wgpu-matrix` for replacment of glmatrix library.Classis "modelViewProjectionMatrix" calculations.
 I publish (this repo) npm package with name `matrix-engine-wgpu`.
 
-
 ## Objective
   - scene objects feature [objects/scene/transformation]
   - Make it similar to the matrix-engine webGL features.
 
-For now i will use `createRenderBundleEncoder` for multi object scene draws.
-
-
+For now i will use `createRenderBundleEncoder` for multi object scene draws but mix also with shadows pipline.
 
 
+## How to load obj file:
 Main instance script:
 ```js
-let application = new MatrixEngineWGPU(()=> {
-
-  let c = {
-    position: { x: -5, y: 3, z: -10}
-  };
-
-  let o = {
-    position: { x: 5, y: 2, z: -10}
-  };
-
-  application.addCube(c)
-  application.addBall(o)
+import MatrixEngineWGPU from "./src/meWGPU";
+import {testCUSTOMGEO} from "./public/res/meshes/blender/piramida.js";
+import {downloadMeshes} from './src/engine/loader-obj.js';
+
+let application = new MatrixEngineWGPU({ 
+  useSingleRenderPass: true,
+  canvasSize: 'fullscreen' }, () => {
+
+  function onLoadObj (m) {
+    application.addMeshObj({
+      position: {x: 0, y: 0, z: -5},
+      texturesPaths: ['./res/meshes/obj/armor.png'],
+      name: 'Armor',
+      mesh: m.armor
+    })
+  }
 
+  downloadMeshes(
+    {armor: "./res/meshes/obj/armor.obj"},
+    onLoadObj
+  )
 })
+// just for dev
+window.app = application
 ```
 
-Not the best solution but works for now.
-Next level is draw in one scene different shaders different pipline...
+## NPM Scripts
 
-System draws func:
 ```js
-frame = () => {
-    let commandEncoder = this.device.createCommandEncoder();
-    this.rbContainer = [];
+  "main-worker": "watchify app-worker.js -p [esmify --noImplicitAny] -o public/app-worker.js",
+  "examples": "watchify examples.js -p [esmify --noImplicitAny] -o public/examples.js",
+  "main": "watchify main.js -p [esmify --noImplicitAny] -o public/app.js",
+  "build-empty": "watchify empty.js -p [esmify --noImplicitAny] -o public/empty.js",
+  "build-all": "npm run main-worker.js | npm run examples | npm run main | npm run build-empty"
+```
 
-    let passEncoder;
+1) "main-worker" use same endpoint but with root wrapper.
+2) "examples" for now build just one current (just import script from ./examples/) instance.
+3) "main" this is build for main.js main instance.
+4) "build-empty" when you wanna use this engine on codepen or stackoverflow just build one empty instance
+   and you can write megpu code.
+5) "build-all" build all at once [every output is diff name].
 
-    this.mainRenderBundle.forEach((meItem, index) => {
-      meItem.draw();
-      this.rbContainer.push(meItem.renderBundle)
-      if(index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
-    })
+## Resource
+ Resources place is ./public also this folder is root for output js builds.
+ After all you get all needed stuff in one public folder (www).
+ 
 
-    // passEncoder.executeBundles([NIK.renderBundle, NIK2.renderBundle]);
-    passEncoder.executeBundles(this.rbContainer);
-    passEncoder.end();
-    this.device.queue.submit([commandEncoder.finish()]);
-
-    requestAnimationFrame(this.frame);
-  }
-```
 
 ## LICENCE
 
  - Structural shema for project and personal learning inspired by:
    https://webgpu.github.io/webgpu-samples/samples/renderBundles
 
+ - Obj loader [same like matrix-engine webgl engine]
+   Obj loader source http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html
+
 ### BSD 3-Clause 
 
 https://github.com/webgpu/webgpu-samples/blob/main/LICENSE.txt

package/src/engine/ball.js

@@ -1,6 +1,7 @@
-import {BALL_SHADER} from "../shaders/shaders";
+import {UNLIT_SHADER} from "../shaders/shaders";
 import {mat4, vec3} from 'wgpu-matrix';
 import {Position, Rotation} from "./matrix-class";
+import {createInputHandler} from "./engine";
 
 export default class MEBall {
 
@@ -8,6 +9,18 @@ export default class MEBall {
     this.context = context;
     this.device = device;
 
+    // The input handler
+    this.inputHandler = createInputHandler(window, canvas);
+    this.cameras = o.cameras;
+    this.scale = o.scale;
+    console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef)
+    this.cameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    } // |  WASD 'arcball' };
+
+    this.lastFrameMS = 0;
+
     this.entityArgPass = o.entityArgPass;
 
     this.SphereLayout = {
@@ -29,7 +42,7 @@ export default class MEBall {
     this.rotation.rotationSpeed.y = o.rotationSpeed.y;
     this.rotation.rotationSpeed.z = o.rotationSpeed.z;
 
-    this.shaderModule = device.createShaderModule({code: BALL_SHADER});
+    this.shaderModule = device.createShaderModule({code: UNLIT_SHADER});
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
     this.pipeline = device.createRenderPipeline({
@@ -113,8 +126,6 @@ export default class MEBall {
 
     this.loadTex0(this.texturesPaths, device).then(() => {
       this.loadTex1(device).then(() => {
-
-        console.log('NICE THIS', this)
         this.sampler = device.createSampler({
           magFilter: 'linear',
           minFilter: 'linear',
@@ -124,12 +135,11 @@ export default class MEBall {
         mat4.identity(this.transform);
 
         // Create one large central planet surrounded by a large ring of asteroids
-        this.planet = this.createSphereRenderable(1.0);
+        this.planet = this.createGeometry(this.scale);
         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.createGeometry(12, 8, 6, 0.15),
         ];
 
         this.renderables = [this.planet];
@@ -218,7 +228,7 @@ export default class MEBall {
     this.renderBundle = renderBundleEncoder.finish();
   }
 
-  createSphereRenderable(radius, widthSegments = 8, heightSegments = 4, randomness = 0) {
+  createGeometry(radius, widthSegments = 8, heightSegments = 4, randomness = 0) {
 
     const sphereMesh = this.createSphereMesh(radius, widthSegments, heightSegments, randomness);
     // Create a vertex buffer from the sphere data.
@@ -280,10 +290,16 @@ export default class MEBall {
   }
 
   getTransformationMatrix(pos) {
+    // const viewMatrix = mat4.identity();
+    const now = Date.now();
+    const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+    this.lastFrameMS = now;
+
+    // const viewMatrix = mat4.identity(); ORI
+    const camera = this.cameras[this.cameraParams.type];
+    const viewMatrix = camera.update(deltaTime, this.inputHandler());
 
-    const viewMatrix = mat4.identity();
     mat4.translate(viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
-    const now = Date.now() / 1000;
 
     mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
     mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);