matrix-engine-wgpu 1.0.1

package/public/css/style.css

@@ -0,0 +1,279 @@
+
+@font-face {
+  font-family: stormfaze;
+  src: url(../res/fonts/stormfaze.ttf);
+}
+
+@font-face {
+  font-family: wargames;
+  src: url(../res/fonts/wargames.ttf);
+}
+
+body {
+  color: lime;
+  background-color:black;
+  font-family: "Courier New";
+  font-size: 14px;
+  background-color: black;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+
+.noselection {
+	-webkit-touch-callout: none; /* Safari */
+	user-select: none; /* standard syntax */
+	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
+	-moz-user-select: none; /* mozilla browsers */
+	-khtml-user-select: none; /* webkit (konqueror) browsers */
+	-ms-user-select: none; /* IE10+ */
+}
+
+*::-webkit-media-controls-panel {
+	display: none !important;
+	-webkit-appearance: none;
+}
+
+/* Old shadow dom for play button */
+*::-webkit-media-controls-play-button {
+	display: none !important;
+	-webkit-appearance: none;
+}
+
+/* This one works! */
+*::-webkit-media-controls-start-playback-button {
+	display: none !important;
+	-webkit-appearance: none;
+}
+
+::-webkit-scrollbar {
+	width: 5px;
+}
+
+::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 5px rgb(102, 102, 102);
+	border-radius: 8px;
+}
+
+body::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 9px;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.6);
+}
+
+
+textarea:focus, input:focus {
+  outline: none;
+}
+
+a {
+  font-family: "Courier New";
+  color: #0080ff;
+}
+
+iframe {
+  border: none;
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+#matrix-editor {
+  position: absolute;
+  left: 0;
+  top:0;
+  width: 400px;
+}
+
+.btnShadow {
+  /* -webkit-box-shadow: inset 0px 1px 0px 0px rgb(52, 253, 189);
+  -moz-box-shadow: inset 0px 1px 0px 0px rgb(52, 253, 189);
+  box-shadow: inset 0px 1px 0px 0px rgb(52, 253, 189); */
+  cursor: pointer;
+  /* color: rgb(0, 255, 10);
+  text-shadow: 0px 0px 7px #80ffe0; */
+  font-family: stormfaze;
+}
+
+div.btnShadow:hover {
+  opacity: 1;
+  background-color: rgb(78, 255, 190);
+  color:rgb(0, 0, 0);
+  text-shadow: 0px 0px 20px #0dfdc1;
+}
+
+.debugBox {
+  position:absolute;
+  left:5px;
+  bottom:0;
+  font-size: 12px;
+  width:200px;
+  height: 15px;
+  background-color: black;
+  color: lime;
+}
+
+.textEditor {
+  font-size: 10px;
+  width : 100%;
+  max-width: 850px !important;
+  min-width: 550px !important;
+}
+
+textarea {
+  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
+  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
+  box-shadow: inset 0px 0px 22px 1px rgba(0,255,30,1);
+  background-color: black;
+  color: lime;
+}
+
+.textureCanvas2d {
+  display:none;
+  position:absolute;
+  left:-3000px;
+  top:0px;
+  width:512px;
+  height:512px;
+}
+
+.add-button {
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 2px 2px;
+  transition-duration: 0.4s;
+  cursor: pointer;
+  width:100%;
+  width: -webkit-fill-available;
+  height:30%;
+  background-color: rgb(27, 27, 27);
+  font-family: "stormfaze";
+  border-radius: 15px;
+}
+
+.button1 {
+  background-color:  rgb(27, 27, 27);; 
+  color: rgb(255, 255, 255); 
+  border: 2px solid #80004b;
+}
+
+.button1:hover {
+  background-color: #710243;
+  color: white;
+}
+
+.button2 {
+  background-color:  rgb(27, 27, 27);; 
+  color: white; 
+  border: 2px solid #4CAF50;
+}
+
+.button2:hover {
+  background-color: #95af4c;
+  color: white;
+}
+
+/** Style for UI system hud controls */
+
+.matrixTagHolder {
+  display:flex;
+  flex-direction: column;
+  position: absolute;
+  left:0;top:0;
+  background-color: black;
+  color: #0080ff;
+  font-family: stormfaze;
+}
+
+span {
+  cursor: default;
+  width: 100px;
+}
+
+.mLightInput {
+  width: 150px;
+  font-size: 26px;
+}
+
+.mLightCom {
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  border: solid #0c2540 3px;
+}
+
+#matrix-net {
+  position: absolute;
+  display: none;
+  right: 0;
+  height: 100%;
+  width: 40vh;
+  font-family: stormfaze;
+  background-color: crimson;
+}
+
+.timeLine {
+  display: flex;
+  position: absolute;
+  left: 5%;
+  top:85%;
+  width:90%;
+  flex-direction: column;
+}
+
+
+.timeLineSlider {
+  display:flex;
+  flex-direction: row;
+}
+.timeLineSlider, p {
+  background: rgba(12, 122, 22, 0.5);
+  width:100%;
+  margin: 5px 5px 5px 5px;
+}
+
+/* For animation Line */
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;  
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%; 
+  background: #04AA6D;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #04AA6D;
+  cursor: pointer;
+}

package/public/index.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.js"></script>
+  </body>
+</html>

package/public/manifest.web

@@ -0,0 +1,25 @@
+{
+  "name": "Matrix Engine wGpu",
+  "short_name": "matrix-wgpu",
+  "start_url": "build.html",
+  "orientation": "any",
+  "theme_color": "lime",
+  "background_color": "black",
+  "description": "Welcome here !",
+  "display": "standalone",
+  "lang": "en-US",
+  "icons": [
+    {
+      "src": "res/icons/512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "author": {
+      "name": "Nikola Lukic",
+      "website": "https://maximumroulette.com",
+      "github": "https://github.com/zlatnaspirala",
+      "source-repo": "https://github.com/zlatnaspirala/matrix-engine"
+  }
+}

package/public/res/icons/webgpu-horizontal.svg

@@ -0,0 +1,45 @@
+<svg id="Logo" xmlns="http://www.w3.org/2000/svg" width="932" height="315" viewBox="0 0 932 315">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        fill-rule: evenodd;
+        stroke-linejoin: round;
+      }
+
+      .cls-6 {
+        fill-rule: evenodd;
+      }
+
+      .cls-1 {
+        fill: #005a9c;
+        stroke: #005a9c;
+      }
+
+      .cls-2 {
+        fill: #0066b0;
+        stroke: #0066b0;
+      }
+
+      .cls-3 {
+        fill: #0076cc;
+        stroke: #0076cc;
+      }
+
+      .cls-4 {
+        fill: #0086e8;
+        stroke: #0086e8;
+      }
+
+      .cls-5 {
+        fill: #0093ff;
+        stroke: #0093ff;
+      }
+    </style>
+  </defs>
+  <path id="Triangle_4" data-name="Triangle 4" class="cls-4" d="m298.4 134.84-24.6-42.609h49.269z"/>
+  <path id="Triangle_5" data-name="Triangle 5" class="cls-5" d="m298.4 49.619-24.6 42.609h49.269z"/>
+  <path id="Triangle_3" data-name="Triangle 3" class="cls-3" d="m249.2 220.06-49.2-85.218 98.4-8.1e-4z"/>
+  <path id="Triangle_2" data-name="Triangle 2" class="cls-2" d="m249.2 49.619-49.2 85.218 98.4-8.1e-4z"/>
+  <path id="Triangle_1" data-name="Triangle 1" class="cls-1" d="m150.8 220.06-98.4-170.44h196.8z"/>
+  <path id="WebGPU" class="cls-6" d="M397.927,170a46.383,46.383,0,0,0-5.459-22.594A39.579,39.579,0,0,0,376.929,131.7a46.217,46.217,0,0,0-23.182-5.711,47.758,47.758,0,0,0-23.77,5.8,40.1,40.1,0,0,0-16.042,16.547q-5.714,10.752-5.712,25.029t5.88,25.114a41.6,41.6,0,0,0,16.21,16.714,46.512,46.512,0,0,0,23.434,5.88q16.461,0,27.55-8.315a39.574,39.574,0,0,0,14.782-21.586H379.617a24.465,24.465,0,0,1-9.323,12.347q-6.639,4.621-16.547,4.619a29.643,29.643,0,0,1-20.578-7.643q-8.484-7.642-9.323-21.25h73.577a89.923,89.923,0,0,0,.5-9.239h0Zm-15.791-3.192H324.014q1.173-13.1,9.323-20.494a28.334,28.334,0,0,1,19.738-7.391,32.751,32.751,0,0,1,14.7,3.275,25.147,25.147,0,0,1,10.5,9.575,28.21,28.21,0,0,1,3.863,15.035h0Zm51.235-22.174V95.246H418.084V219.554h15.287V202.588a35.4,35.4,0,0,0,13.523,13.27,40.941,40.941,0,0,0,20.914,5.208,41.875,41.875,0,0,0,37.964-23.014,52.851,52.851,0,0,0,5.712-24.862q0-14.111-5.712-24.777a41.653,41.653,0,0,0-15.622-16.547,42.965,42.965,0,0,0-22.342-5.879,40.763,40.763,0,0,0-20.662,5.207,36.146,36.146,0,0,0-13.775,13.439h0Zm62.49,28.557a38.312,38.312,0,0,1-4.2,18.4,29.535,29.535,0,0,1-11.338,11.927,30.887,30.887,0,0,1-15.707,4.115,30.558,30.558,0,0,1-15.539-4.115,30.072,30.072,0,0,1-11.422-11.927,40.557,40.557,0,0,1,0-36.285,30.092,30.092,0,0,1,11.422-11.927,30.578,30.578,0,0,1,15.539-4.115,31.4,31.4,0,0,1,15.707,4.031,29.1,29.1,0,0,1,11.338,11.759,37.449,37.449,0,0,1,4.2,18.142h0ZM638.647,136.4a52.884,52.884,0,0,0-20.914-26.038q-14.362-9.236-33.009-9.239a59.092,59.092,0,0,0-29.733,7.643,55.959,55.959,0,0,0-21.25,21.334,61.09,61.09,0,0,0-7.812,30.826,60.623,60.623,0,0,0,7.812,30.741,56.1,56.1,0,0,0,21.25,21.25,59.062,59.062,0,0,0,29.733,7.643,56.956,56.956,0,0,0,28.053-6.971A56.042,56.042,0,0,0,633.1,194.608a58.17,58.17,0,0,0,9.071-26.457V156.392H579.181v12.431h46.7q-1.849,17.472-12.935,27.717t-28.221,10.247a43.634,43.634,0,0,1-22.09-5.627,39.861,39.861,0,0,1-15.454-16.043q-5.631-10.413-5.628-24.189t5.628-24.274a39.769,39.769,0,0,1,15.454-16.127,43.654,43.654,0,0,1,22.09-5.627,40.52,40.52,0,0,1,21.5,5.627A36.445,36.445,0,0,1,620.337,136.4h18.31Zm101.967,0.336q0-15.118-10.332-24.694t-30.153-9.575h-37.8V219.554h15.286V170.671h22.51q20.493,0,30.489-9.659t10-24.274h0Zm-40.485,21.334h-22.51v-43h22.51q24.859,0,24.862,21.67,0,10.248-6.047,15.79t-18.815,5.544h0Zm59.13-55.6v73.913q0,14.614,5.795,24.61a36.391,36.391,0,0,0,15.791,14.866,54.05,54.05,0,0,0,44.852,0,36.911,36.911,0,0,0,15.874-14.866q5.878-9.993,5.88-24.61V102.469H832.164V176.55q0,15.623-7.643,23.182t-21.082,7.559q-13.606,0-21.25-7.559t-7.643-23.182V102.469H759.259Z"/>
+</svg>

package/readme.md

@@ -0,0 +1,74 @@
+# matrix-wgpu 
+## [underconstruct - not fully operative for now - deeply WIP]
+## Author Nikola Lukic zlatnaspirala@gmail.com 2024
+
+
+## Logo:
+
+<img width="350" height="350" src="https://github.com/zlatnaspirala/matrix-engine-wgpu/blob/main/public/res/icons/512.png?raw=true" />
+
+### In logo i used webGPU logo from:
+<span>WebGPU logo by <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a></span>.
+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.
+
+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.
+
+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)
+
+})
+```
+
+Not the best solution but works for now.
+Next level is draw in one scene different shaders different pipline...
+
+System draws func:
+```js
+frame = () => {
+    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);
+    })
+
+    // passEncoder.executeBundles([NIK.renderBundle, NIK2.renderBundle]);
+    passEncoder.executeBundles(this.rbContainer);
+    passEncoder.end();
+    this.device.queue.submit([commandEncoder.finish()]);
+
+    requestAnimationFrame(this.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