matrix-engine-wgpu 1.3.13 → 1.3.17

package/src/engine/materials.js

@@ -1,307 +0,0 @@
-/**
- * @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;
-    // For shadow comparison
-    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);
-
-      // Create stream from existing canvas
-      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
-    // includes externalTexture type
-    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();
-    // Log all bindings to debug
-    if(!textureResource || !this.sceneUniformBuffer || !this.shadowDepthTextureView || !this.sampler) {
-      console.warn("❗Missing res skipping...");
-      return;
-    }
-
-    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

@@ -1,252 +0,0 @@
-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);
-		}
-	}
-
-}