matrix-engine-wgpu 1.0.2 → 1.0.4

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();
+}

package/empty.js

@@ -0,0 +1,12 @@
+import MatrixEngineWGPU from "./src/world.js";
+import {downloadMeshes} from './src/engine/loader-obj.js';
+
+export let application = new MatrixEngineWGPU({
+  useSingleRenderPass: false,
+  canvasSize: 'fullscreen'
+}, () => {
+  window.app = application
+  // for now
+  window.downloadMeshes = downloadMeshes;
+  console.log("matrix-engine-wgpu is loaded with text/javascript.")
+})

package/examples/load-obj-file.js

@@ -0,0 +1,48 @@
+import MatrixEngineWGPU from "../src/world.js";
+import {downloadMeshes} from '../src/engine/loader-obj.js';
+
+export let application = new MatrixEngineWGPU({
+  useSingleRenderPass: false,
+  canvasSize: 'fullscreen'
+}, () => {
+
+  let c = {
+    scale: 1,
+    position: {x: -2, y: 2, z: -10},
+    rotation: {x: 0, y: 0, z: 0},
+    rotationSpeed: {x: 0, y: 0, z: 0},
+    texturesPaths: ['./res/textures/rust.jpg']
+  };
+
+  let o = {
+    scale: 2,
+    position: {x: 2, y: 0, z: -10},
+    rotation: {x: 0, y: 45, z: 0},
+    rotationSpeed: {x: 0, y: 0, z: 0},
+    texturesPaths: ['./res/textures/rust.jpg']
+  };
+
+  // let mesh = adaptJSON1(stanfordDragonData)
+  // application.addBall(o)
+  // application.addCube(c)
+  application.addCube(o)
+
+  function onLoadObj(m) {
+    console.log('Loaded obj:', m.armor);
+    // console.log('APP2 ', jsonPiramyd);
+    // jsonPiramyd.vertexNormals = jsonPiramyd.normals;
+    // jsonPiramyd.indices = jsonPiramyd.faces;
+    // jsonPiramyd.textures = jsonPiramyd.uvs;
+    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)
+  downloadMeshes({armor: "./res/meshes/blender/piramyd.obj"}, onLoadObj)
+})
+
+window.app = application

package/examples/unlit-textures.js

@@ -0,0 +1,27 @@
+import MatrixEngineWGPU from "../src/meWGPU";
+
+export let application = new MatrixEngineWGPU({
+  useSingleRenderPass: false,
+  canvasSize: 'fullscreen'
+}, () => {
+
+  let c = {
+    scale: 2,
+    position: {x: -3, y: 0, z: -10},
+    rotation: {x: 0, y: 0, z: 0},
+    rotationSpeed: {x: 10, y: 0, z: 0},
+    texturesPaths: ['./res/textures/rust.jpg']
+  };
+
+  let o = {
+    scale: 2,
+    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.addBall(c)
+  application.addCube(o)
+})
+
+window.app = application

package/examples.js

@@ -0,0 +1,7 @@
+/**
+ * @examples
+ * Just import curent example/demo
+ */
+import { application } from "./examples/load-obj-file.js";
+
+window.app = application

package/index.js

@@ -1,11 +1,24 @@
-
+/**
+ * This file created by:
+ * Nikola Lukic zlatnaspirala@gmail.com mart 2024
+ * npm import/export
+ */
+import {degToRad} from "wgpu-matrix/dist/2.x/utils.js";
+import {downloadMeshes} from "./src/engine/loader-obj.js";
 import MatrixEngineWGPU from "./src/meWGPU.js";
 
-var testNpm = () => {
-  console.log("Hi npm")
+var about = () => {
+  console.log("Hi npm. matrix-engine for webgpu is ready...")
+  console.log("--------------------------------------------")
+  console.log("List of features : ")
+  console.log(" - Loading obj files with uvs")
+  console.log(" - Scene oriented draws")
+  console.log(" - position, rotation - same like matrix-engine")
 }
 
 export {
   MatrixEngineWGPU,
-  testNpm
-}
+  downloadMeshes,
+  degToRad,
+  about
+}

package/main.js

@@ -1,26 +1,37 @@
-import MatrixEngineWGPU from "./src/meWGPU";
-
-let application = new MatrixEngineWGPU({ useSingleRenderPass: false }, () => {
-
-  let c = {
-    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: 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.addBall(o)
-
-  application.addCube(c)
-  
+import MatrixEngineWGPU from "./src/world.js";
+import {downloadMeshes} from './src/engine/loader-obj.js';
+
+export let application = new MatrixEngineWGPU({
+  useSingleRenderPass: false,
+  canvasSize: 'fullscreen'
+}, () => {
+  function onLoadObj(m) {
+
+    console.log('Loaded objs:', m);
+
+    application.addMeshObj({
+      position: {x: -3, y: 0, z: -5},
+      rotation: {x: 0, y: 0, z: 0},
+      rotationSpeed: {x: 0, y: 10, z: 0},
+      texturesPaths: ['./res/meshes/obj/armor.png'],
+      name: 'Armor',
+      mesh: m.armor
+    })
+
+    application.addMeshObj({
+      position: {x: 3, y: 0, z: -5},
+      rotation: {x: -90, y: 0, z: 0},
+      rotationSpeed: {x: 0, y: 0, z: 0},
+      texturesPaths: ['./res/meshes/obj/armor.png'],
+      name: 'MyText',
+      mesh: m.welcomeText
+    })
+  }
+
+  downloadMeshes({
+    welcomeText: "./res/meshes/blender/piramyd.obj",
+    armor: "./res/meshes/obj/armor.obj"
+  }, onLoadObj)
 
 })
 

package/package.json

@@ -1,17 +1,26 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "webGPU powered pwa application.Crazy fast rendering.",
   "main": "index.js",
   "scripts": {
-    "main": "watchify main.js -p [esmify --noImplicitAny] -o public/app.js"
+    "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 | npm run examples | npm run main | npm run build-empty"
   },
   "keywords": [
     "webGPU",
+    "webGPU-scene",
+    "webGPU-engine",
     "matrix",
     "matrix-engine",
     "matrix-engine-webGPU",
     "matrix-calculation",
+    "modelView",
+    "modelViewProjectionMatrix",
+    "ProjectionMatrix",
     "render",
     "wgpu",
     "zlatnaspirala",

package/public/app-worker.js

@@ -0,0 +1,47 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+
+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();
+}
+},{}]},{},[1]);