matrix-engine-wgpu 1.3.16 → 1.3.18

package/.codesandbox/tasks.json

@@ -0,0 +1,46 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "npm install"
+    },
+    {
+      "command": "npm run main",
+      "name": "n"
+    },
+    {
+      "command": "npm run hosts",
+      "name": "n"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "main-worker": {
+      "name": "main-worker",
+      "command": "npm run main-worker",
+      "runAtStart": false
+    },
+    "examples": {
+      "name": "examples",
+      "command": "npm run examples",
+      "runAtStart": false
+    },
+    "main": {
+      "name": "main",
+      "command": "npm run main",
+      "runAtStart": false
+    },
+    "build-empty": {
+      "name": "build-empty",
+      "command": "npm run build-empty",
+      "runAtStart": false
+    },
+    "build-all": {
+      "name": "build-all",
+      "command": "npm run build-all",
+      "runAtStart": false
+    }
+  }
+}

package/.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm"
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

package/.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

package/REFERENCE.md

@@ -0,0 +1,59 @@
+
+### 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 " FIXED !
+
+
+# https://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToAngle/index.htm
+
+
+LOOK HERE:
+
+https://glm.g-truc.net/0.9.0/api/a00184.html

package/app-worker.js

@@ -0,0 +1,45 @@
+
+var canvas = document.createElement('canvas')
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+document.body.append(canvas)
+ 
+// The web worker is created by passing a path to the worker's source file, which will then be
+// executed on a separate thread.
+const worker = new Worker('app.js');
+
+// The primary way to communicate with the worker is to send and receive messages.
+worker.addEventListener('message', (ev) => {
+  // The format of the message can be whatever you'd like, but it's helpful to decide on a
+  // consistent convention so that you can tell the message types apart as your apps grow in
+  // complexity. Here we establish a convention that all messages to and from the worker will
+  // have a `type` field that we can use to determine the content of the message.
+  switch (ev.data.type) {
+    default: {
+      console.error(`Unknown Message Type: ${ev.data.type}`);
+    }
+  }
+});
+
+try {
+  // In order for the worker to display anything on the page, an OffscreenCanvas must be used.
+  // Here we can create one from our normal canvas by calling transferControlToOffscreen().
+  // Anything drawn to the OffscreenCanvas that call returns will automatically be displayed on
+  // the source canvas on the page.
+  const offscreenCanvas = canvas.transferControlToOffscreen();
+  const devicePixelRatio = window.devicePixelRatio;
+  offscreenCanvas.width = canvas.clientWidth * devicePixelRatio;
+  offscreenCanvas.height = canvas.clientHeight * devicePixelRatio;
+
+  // Send a message to the worker telling it to initialize WebGPU with the OffscreenCanvas. The
+  // array passed as the second argument here indicates that the OffscreenCanvas is to be
+  // transferred to the worker, meaning this main thread will lose access to it and it will be
+  // fully owned by the worker.
+  worker.postMessage({ type: 'init', offscreenCanvas, devicePixelRatio: devicePixelRatio }, [offscreenCanvas]);
+} catch (err) {
+  // TODO: This catch is added here because React will call init twice with the same canvas, and
+  // the second time will fail the transferControlToOffscreen() because it's already been
+  // transferred. I'd love to know how to get around that.
+  console.warn(err.message);
+  worker.terminate();
+}