matrix-engine-wgpu 1.3.16 → 1.3.18

package/src/engine/materials.js

@@ -0,0 +1,295 @@
+/**
+ * @description
+ * Created for matrix-engine-wgpu project.
+ * MeshObj class estends Materials.
+ * @author Nikola Lukic
+ * @email zlatnaspirala@gmail.com
+ */
+
+export default class Materials {
+  constructor(device) {
+    this.device = device;
+    this.isVideo = false;
+    this.compareSampler = this.device.createSampler({compare: 'less'});
+    // For image textures (standard sampler)
+    this.imageSampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+    // For external video textures (needs to be filtering sampler too!)
+    this.videoSampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+
+    // FX effect
+    this.postFXModeBuffer = this.device.createBuffer({
+      size: 4, // u32 = 4 bytes
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    // Dymmy buffer
+    this.dummySpotlightUniformBuffer = this.device.createBuffer({
+      size: 64, // Must match size in shader
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    this.device.queue.writeBuffer(this.dummySpotlightUniformBuffer, 0, new Float32Array(16)); 
+  }
+
+  updatePostFXMode(mode) {
+    const arrayBuffer = new Uint32Array([mode]);
+    this.device.queue.writeBuffer(this.postFXModeBuffer, 0, arrayBuffer);
+  }
+
+  async loadTex0(texturesPaths) {
+    this.sampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+    return new Promise(async (resolve) => {
+      const response = await fetch(texturesPaths[0]);
+      const imageBitmap = await createImageBitmap(await response.blob());
+      this.texture0 = this.device.createTexture({
+        size: [imageBitmap.width, imageBitmap.height, 1], // REMOVED 1
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+      this.device.queue.copyExternalImageToTexture(
+        {source: imageBitmap},
+        {texture: this.texture0},
+        [imageBitmap.width, imageBitmap.height]
+      );
+      resolve()
+    })
+  }
+
+  async loadVideoTexture(arg) {
+    this.isVideo = true;
+    if(arg.type === 'video') {
+      this.video = document.createElement('video');
+      this.video.src = arg.src || 'res/videos/tunel.mp4';
+      this.video.crossOrigin = 'anonymous';
+      this.video.autoplay = true;
+      this.video.loop = true;
+      document.body.append(this.video);
+      this.video.style.display = 'none';
+      await this.video.play();
+    } else if(arg.type === 'videoElement') {
+      this.video = arg.el;
+      await this.video.play();
+    } else if(arg.type === 'camera') {
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.muted = true;
+      this.video.playsInline = true;
+      this.video.style.display = 'none';
+      document.body.append(this.video);
+      try {
+        const stream = await (navigator.mediaDevices?.getUserMedia?.({
+          video: {
+            width: {ideal: 1280},
+            height: {ideal: 720},
+          },
+          audio: false
+        }));
+
+        this.video.srcObject = stream;
+        await this.video.play();
+      } catch(err) {
+        console.error("❌ Failed to access camera:", err);
+        return;
+      }
+    } else if(arg.type === 'canvas2d') {
+      // Existing canvas (arg.el) — assume it's actively drawing
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.muted = true;
+      this.video.playsInline = true;
+      this.video.style.display = 'none';
+      document.body.append(this.video);
+      const stream = arg.el.captureStream?.() || arg.el.mozCaptureStream?.();
+      if(!stream) {
+        console.error('❌ Cannot capture stream from canvas2d');
+        return;
+      }
+      this.video.srcObject = stream;
+      await this.video.play();
+    } else if(arg.type === 'canvas2d-inline') {
+      // Miniature inline-drawn canvas created dynamically
+      const canvas = document.createElement('canvas');
+      canvas.width = arg.width || 256;
+      canvas.height = arg.height || 256;
+      const ctx = canvas.getContext('2d');
+      if(typeof arg.canvaInlineProgram === 'function') {
+        // Start drawing loop
+        const drawLoop = () => {
+          arg.canvaInlineProgram(ctx, canvas);
+          requestAnimationFrame(drawLoop);
+        };
+        drawLoop();
+      }
+
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.muted = true;
+      this.video.playsInline = true;
+      this.video.style.display = 'none';
+      document.body.append(this.video);
+      const stream = canvas.captureStream?.() || canvas.mozCaptureStream?.();
+      if(!stream) {
+        console.error('❌ Cannot capture stream from inline canvas');
+        return;
+      }
+      this.video.srcObject = stream;
+      await this.video.play();
+    }
+
+    this.sampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+
+    // ✅ Now
+    this.createLayoutForRender();
+    this.setupPipeline();
+    setTimeout(() => this.createBindGroupForRender(), 1500);
+  }
+
+  updateVideoTexture() {
+    if(!this.video || this.video.readyState < 2) return;
+    this.externalTexture = this.device.importExternalTexture({source: this.video});
+    this.createBindGroupForRender();
+  }
+
+  createBindGroupForRender() {
+    const textureResource = this.isVideo
+      ? this.externalTexture // must be set via updateVideoTexture
+      : this.texture0.createView();
+    if(!textureResource || !this.sceneUniformBuffer || !this.shadowDepthTextureView || !this.sampler) {
+      console.warn("❗Missing res skipping...");
+      return;
+    }
+    // console.log('what is  this.lightContainer.length ',  this.lightContainer.length)
+    if(this.isVideo == true) {
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [
+          {
+            binding: 0,
+            resource: {buffer: this.sceneUniformBuffer},
+          },
+          {
+            binding: 1,
+            resource: this.shadowDepthTextureView,
+          },
+          {
+            binding: 2,
+            resource: this.compareSampler,
+          },
+          {
+            binding: 3,
+            resource: textureResource,
+          },
+          {
+            binding: 4,
+            resource: this.videoSampler,
+          },
+          {binding: 5, resource: {buffer: this.postFXModeBuffer}}
+        ],
+      });
+    } else {
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [
+          {
+            binding: 0,
+            resource: {buffer: this.sceneUniformBuffer},
+          },
+          {
+            binding: 1,
+            resource: this.shadowDepthTextureView,
+          },
+          {
+            binding: 2,
+            resource: this.compareSampler,
+          },
+          {
+            binding: 3,
+            resource: textureResource,
+          },
+          {
+            binding: 4,
+            resource: this.imageSampler,
+          },
+          {
+            binding: 5,
+            resource: {buffer: this.lightContainer.length == 0 ? this.dummySpotlightUniformBuffer : this.lightContainer[0].spotlightUniformBuffer},
+          },
+        ],
+      });
+    }
+  }
+
+  createLayoutForRender() {
+    this.bglForRender = this.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: {type: 'uniform'},
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {sampleType: 'depth'},
+        },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: {type: 'comparison'},
+        },
+        ...(this.isVideo
+          ? [ // VIDEO
+            {
+              binding: 3,
+              visibility: GPUShaderStage.FRAGMENT,
+              externalTexture: {},
+            },
+            {
+              binding: 4,
+              visibility: GPUShaderStage.FRAGMENT,
+              sampler: {type: 'filtering'}, // for video sampling
+            },
+            {
+              binding: 5,
+              visibility: GPUShaderStage.FRAGMENT,
+              buffer: {type: 'uniform'},
+            }
+          ]
+          : [ // IMAGE
+            {
+              binding: 3,
+              visibility: GPUShaderStage.FRAGMENT,
+              texture: {
+                sampleType: 'float',
+                viewDimension: '2d',
+              },
+            },
+            {
+              binding: 4,
+              visibility: GPUShaderStage.FRAGMENT,
+              sampler: {type: 'filtering'},
+            },
+            {
+              binding: 5,
+              visibility: GPUShaderStage.FRAGMENT,
+              buffer: {type: 'uniform'},
+            }
+          ])
+      ],
+    });
+  }
+}

package/src/engine/matrix-class.js

@@ -0,0 +1,252 @@
+import {degToRad, radToDeg} from "./utils";
+
+/**
+ * @description 
+ * Sub classes for matrix-wgpu
+ * Base class
+ * Position { x, y, z }
+ */
+
+export class Position {
+	constructor(x, y, z) {
+		// console.log('TEST TYTPOF ', x)
+		// Not in use for nwo this is from matrix-engine project [nameUniq]
+		this.nameUniq = null;
+
+		if(typeof x == 'undefined') x = 0;
+		if(typeof y == 'undefined') y = 0;
+		if(typeof z == 'undefined') z = 0;
+
+		this.x = parseFloat(x);
+		this.y = parseFloat(y);
+		this.z = parseFloat(z);
+
+		this.velY = 0;
+		this.velX = 0;
+		this.velZ = 0;
+		this.inMove = false;
+		this.targetX = parseFloat(x);
+		this.targetY = parseFloat(y);
+		this.targetZ = parseFloat(z);
+		this.thrust = 0.01;
+
+		return this;
+	}
+
+	setSpeed(n) {
+		if(typeof n === 'number') {
+			this.thrust = n;
+		} else {
+			console.log('Description: arguments (w, h) must be type of number.');
+		}
+	}
+
+	translateByX(x) {
+		this.inMove = true;
+		this.targetX = parseFloat(x);
+	};
+
+	translateByY(y) {
+		this.inMove = true;
+		this.targetY = parseFloat(y);
+	}
+
+	translateByZ(z) {
+		this.inMove = true;
+		this.targetZ = parseFloat(z);
+	}
+
+	translateByXY(x, y) {
+		this.inMove = true;
+		this.targetX = parseFloat(x);
+		this.targetY = parseFloat(y);
+	}
+
+	translateByXZ(x, z) {
+		this.inMove = true;
+		this.targetX = parseFloat(x);
+		this.targetZ = parseFloat(z);
+	}
+
+	translateByYZ(y, z) {
+		this.inMove = true;
+		this.targetY = parseFloat(y);
+		this.targetZ = parseFloat(z);
+	}
+
+	onTargetPositionReach() {}
+
+	update() {
+		var tx = parseFloat(this.targetX) - parseFloat(this.x),
+			ty = parseFloat(this.targetY) - parseFloat(this.y),
+			tz = parseFloat(this.targetZ) - parseFloat(this.z),
+			dist = Math.sqrt(tx * tx + ty * ty + tz * tz);
+		this.velX = (tx / dist) * this.thrust;
+		this.velY = (ty / dist) * this.thrust;
+		this.velZ = (tz / dist) * this.thrust;
+		if(this.inMove == true) {
+			if(dist > this.thrust) {
+				this.x += this.velX;
+				this.y += this.velY;
+				this.z += this.velZ;
+
+				// // from me
+				// if(net && net.connection && typeof em === 'undefined' && App.scene[this.nameUniq].net.enable == true) net.connection.send({
+				//   netPos: {x: this.x, y: this.y, z: this.z},
+				//   netObjId: this.nameUniq,
+				// });
+
+			} else {
+				this.x = this.targetX;
+				this.y = this.targetY;
+				this.z = this.targetZ;
+				this.inMove = false;
+				this.onTargetPositionReach();
+
+				// // from me
+				// if(net && net.connection && typeof em === 'undefined' && App.scene[this.nameUniq].net.enable == true) net.connection.send({
+				//   netPos: {x: this.x, y: this.y, z: this.z},
+				//   netObjId: this.nameUniq,
+				// });
+			}
+		}
+	}
+
+	get worldLocation() {
+		return [parseFloat(this.x), parseFloat(this.y), parseFloat(this.z)];
+	}
+
+	SetX(newx, em) {
+		this.x = newx;
+		this.targetX = newx;
+		this.inMove = false;
+
+		// if(net && net.connection && typeof em === 'undefined' &&
+		//   App.scene[this.nameUniq].net && App.scene[this.nameUniq].net.enable == true) {
+		//   net.connection.send({
+		//     netPos: {x: this.x, y: this.y, z: this.z},
+		//     netObjId: this.nameUniq,
+		//   });
+		// }
+	}
+
+	SetY(newy, em) {
+		this.y = newy;
+		this.targetY = newy;
+		this.inMove = false;
+		// if(net && net.connection && typeof em === 'undefined' &&
+		//   App.scene[this.nameUniq].net && App.scene[this.nameUniq].net.enable == true) net.connection.send({
+		//     netPos: {x: this.x, y: this.y, z: this.z},
+		//     netObjId: this.nameUniq,
+		//   });
+	}
+
+	SetZ(newz, em) {
+		this.z = newz;
+		this.targetZ = newz;
+		this.inMove = false;
+		// if(net && net.connection && typeof em === 'undefined' &&
+		//   App.scene[this.nameUniq].net && App.scene[this.nameUniq].net.enable == true) net.connection.send({
+		//     netPos: {x: this.x, y: this.y, z: this.z},
+		//     netObjId: this.nameUniq,
+		//   });
+	}
+
+	get X() {
+		return parseFloat(this.x)
+	}
+
+	get Y() {
+		return parseFloat(this.y)
+	}
+
+	get Z() {
+		return parseFloat(this.z)
+	}
+
+	setPosition(newx, newy, newz) {
+		this.x = newx;
+		this.y = newy;
+		this.z = newz;
+		this.targetX = newx;
+		this.targetY = newy;
+		this.targetZ = newz;
+		this.inMove = false;
+
+		// from me
+		// if(App.scene[this.nameUniq] && net && net.connection && typeof em === 'undefined' &&
+		//   App.scene[this.nameUniq].net && App.scene[this.nameUniq].net.enable == true) net.connection.send({
+		//     netPos: {x: this.x, y: this.y, z: this.z},
+		//     netObjId: this.nameUniq,
+		//   });
+	}
+}
+
+export class Rotation {
+
+	constructor(x, y, z) {
+		// Not in use for nwo this is from matrix-engine project [nameUniq]
+		this.nameUniq = null;
+		if(typeof x == 'undefined') x = 0;
+		if(typeof y == 'undefined') y = 0;
+		if(typeof z == 'undefined') z = 0;
+		this.x = x;
+		this.y = y;
+		this.z = z;
+		this.rotationSpeed = {x: 0, y: 0, z: 0};
+		this.angle = 0;
+		this.axis = {x: 0, y: 0, z: 0};
+		// not in use good for exstend logic
+		this.matrixRotation = null;
+	}
+
+	toDegree() {
+
+		/*
+		heading = atan2(y * sin(angle)- x * z * (1 - cos(angle)) , 1 - (y2 + z2 ) * (1 - cos(angle)))
+		attitude = asin(x * y * (1 - cos(angle)) + z * sin(angle))
+		bank = atan2(x * sin(angle)-y * z * (1 - cos(angle)) , 1 - (x2 + z2) * (1 - cos(angle)))
+		*/
+		return [radToDeg(this.axis.x), radToDeg(this.axis.y), radToDeg(this.axis.z)];
+	}
+
+	toDegreeX() {
+		return Math.cos(radToDeg(this.axis.x) / 2)
+	}
+
+	toDegreeY() {
+		return Math.cos(radToDeg(this.axis.z) / 2)
+	}
+
+	toDegreeZ() {
+		return Math.cos(radToDeg(this.axis.y) / 2)
+	}
+
+	getRotX() {
+		if(this.rotationSpeed.x == 0) {
+			return degToRad(this.x);
+		} else {
+			this.x = this.x + this.rotationSpeed.x * 0.001;
+			return degToRad(this.x);
+		}
+	}
+
+	getRotY() {
+		if(this.rotationSpeed.y == 0) {
+			return degToRad(this.y);
+		} else {
+			this.y = this.y + this.rotationSpeed.y * 0.001;
+			return degToRad(this.y);
+		}
+	}
+
+	getRotZ() {
+		if(this.rotationSpeed.z == 0) {
+			return degToRad(this.z);
+		} else {
+			this.z = this.z + this.rotationSpeed.z * 0.001;
+			return degToRad(this.z);
+		}
+	}
+
+}