matrix-engine-wgpu 1.0.1 → 1.0.4

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/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,20 +1,37 @@
-import MatrixEngineWGPU from "./src/meWGPU";
+import MatrixEngineWGPU from "./src/world.js";
+import {downloadMeshes} from './src/engine/loader-obj.js';
 
-let application = new MatrixEngineWGPU(()=> {
+export let application = new MatrixEngineWGPU({
+  useSingleRenderPass: false,
+  canvasSize: 'fullscreen'
+}, () => {
+  function onLoadObj(m) {
 
-  let c = {
-    position: { x: -1, y: 3, z: -10},
-    texturesPaths: ['./res/textures/rust.jpg']
-  };
+    console.log('Loaded objs:', m);
 
-  let o = {
-    position: { x: 5, y: 2, z: -10},
-    texturesPaths: ['./res/textures/rust.jpg']
-  };
+    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.addCube(c)
-  application.addBall(o)
+    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.1",
+  "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]);