matrix-engine-wgpu 1.3.13 → 1.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.3.13",
+  "version": "1.3.16",
   "description": "obj sequence anim +HOTFIX raycast, webGPU powered pwa application. Crazy fast rendering with AmmoJS physics support. Simple raycaster hit object added.",
   "main": "index.js",
   "files": [

package/readme.md

@@ -142,6 +142,29 @@ app.cameras.WASD.pitch = 0.2;
 
 ---
 
+💡 Lighting System
+
+Matrix Engine WGPU now supports independent light entities, meaning lights are no longer tied to the camera. You can freely place and configure lights in the scene, and they will affect objects based on their type and parameters.
+
+Supported Light Types
+
+SpotLight – Emits light in a cone shape with configurable cutoff angles.
+
+(Planned: PointLight, DirectionalLight, AmbientLight)
+
+Features
+
+✅ Independent from camera (lights follow their own transform, not the player view)
+
+✅ Uniform buffer system for per-light data
+
+✅ Works with existing scene objects and materials
+
+✅ Supports multiple lights (attach as many as you want to the scene)
+
+✅ Shadow-ready (spotlight shadows implemented, extendable to others)
+
+
 ### Object Interaction (Raycasting)
 
 The raycast returns:

package/src/engine/ball.js

@@ -1,482 +0,0 @@
-import {UNLIT_SHADER} from "../shaders/shaders";
-import {mat4, vec3} from 'wgpu-matrix';
-import {Position, Rotation} from "./matrix-class";
-import {createInputHandler} from "./engine";
-
-export default class MEBall {
-
-	constructor(canvas, device, context, o) {
-		this.context = context;
-		this.device = device;
-
-		// The input handler
-		this.inputHandler = createInputHandler(window, canvas);
-		this.cameras = o.cameras;
-		this.scale = o.scale;
-		console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef)
-		this.mainCameraParams = {
-			type: o.mainCameraParams.type,
-			responseCoef: o.mainCameraParams.responseCoef
-		} // |  WASD 'arcball' };
-
-		this.lastFrameMS = 0;
-
-		this.entityArgPass = o.entityArgPass;
-
-		this.SphereLayout = {
-			vertexStride: 8 * 4,
-			positionsOffset: 0,
-			normalOffset: 3 * 4,
-			uvOffset: 6 * 4,
-		};
-
-		if(typeof o.raycast === 'undefined') {
-			this.raycast = {
-				enabled: false,
-				radius: 2
-			};
-		} else {
-			this.raycast = o.raycast;
-		}
-
-		this.texturesPaths = [];
-
-		o.texturesPaths.forEach((t) => {
-			this.texturesPaths.push(t)
-		})
-
-		this.position = new Position(o.position.x, o.position.y, o.position.z)
-		this.rotation = new Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
-		this.rotation.rotationSpeed.x = o.rotationSpeed.x;
-		this.rotation.rotationSpeed.y = o.rotationSpeed.y;
-		this.rotation.rotationSpeed.z = o.rotationSpeed.z;
-
-		this.shaderModule = device.createShaderModule({code: UNLIT_SHADER});
-		this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-
-		this.pipeline = device.createRenderPipeline({
-			layout: 'auto',
-			vertex: {
-				module: this.shaderModule,
-				entryPoint: 'vertexMain',
-				buffers: [
-					{
-						arrayStride: this.SphereLayout.vertexStride,
-						attributes: [
-							{
-								// position
-								shaderLocation: 0,
-								offset: this.SphereLayout.positionsOffset,
-								format: 'float32x3',
-							},
-							{
-								// normal
-								shaderLocation: 1,
-								offset: this.SphereLayout.normalOffset,
-								format: 'float32x3',
-							},
-							{
-								// uv
-								shaderLocation: 2,
-								offset: this.SphereLayout.uvOffset,
-								format: 'float32x2',
-							},
-						],
-					},
-				],
-			},
-			fragment: {
-				module: this.shaderModule,
-				entryPoint: 'fragmentMain',
-				targets: [
-					{
-						format: this.presentationFormat,
-					},
-				],
-			},
-			primitive: {
-				topology: 'triangle-list',
-
-				// Backface culling since the sphere is solid piece of geometry.
-				// Faces pointing away from the camera will be occluded by faces
-				// pointing toward the camera.
-				cullMode: 'back',
-			},
-
-			// Enable depth testing so that the fragment closest to the camera
-			// is rendered in front.
-			depthStencil: {
-				depthWriteEnabled: true,
-				depthCompare: 'less',
-				format: 'depth24plus',
-			},
-		});
-
-		this.depthTexture = device.createTexture({
-			size: [canvas.width, canvas.height],
-			format: 'depth24plus',
-			usage: GPUTextureUsage.RENDER_ATTACHMENT,
-		});
-
-		this.uniformBufferSize = 4 * 16; // 4x4 matrix
-		this.uniformBuffer = device.createBuffer({
-			size: this.uniformBufferSize,
-			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-		});
-
-		// Fetch the images and upload them into a GPUTexture.
-		this.texture0 = null;
-		this.moonTexture = null;
-
-		this.settings = {
-			useRenderBundles: true,
-			asteroidCount: 15,
-		};
-
-		this.loadTex0(this.texturesPaths, device).then(() => {
-			this.loadTex1(this.texturesPaths, device).then(() => {
-				this.sampler = device.createSampler({
-					magFilter: 'linear',
-					minFilter: 'linear',
-				});
-
-				this.transform = mat4.create();
-				mat4.identity(this.transform);
-
-				// Create one large central planet surrounded by a large ring of asteroids
-				this.planet = this.createGeometry(this.scale);
-				this.planet.bindGroup = this.createSphereBindGroup(this.texture0, this.transform);
-
-				var asteroids = [
-					this.createGeometry(12, 8, 6, 0.15),
-				];
-
-				this.renderables = [this.planet];
-
-				// this.ensureEnoughAsteroids(asteroids, this.transform);
-				this.renderPassDescriptor = {
-					colorAttachments: [
-						{
-							view: undefined,
-							clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
-							loadOp: this.entityArgPass.loadOp,
-							storeOp: this.entityArgPass.storeOp,
-						},
-					],
-					depthStencilAttachment: {
-						view: this.depthTexture.createView(),
-						depthClearValue: 1.0,
-						depthLoadOp: this.entityArgPass.depthLoadOp,
-						depthStoreOp: this.entityArgPass.depthStoreOp,
-					},
-				};
-
-				const aspect = canvas.width / canvas.height;
-				this.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 100.0);
-				this.modelViewProjectionMatrix = mat4.create();
-
-				this.frameBindGroup = device.createBindGroup({
-					layout: this.pipeline.getBindGroupLayout(0),
-					entries: [
-						{
-							binding: 0,
-							resource: {
-								buffer: this.uniformBuffer,
-							},
-						},
-					],
-				});
-
-
-				// The render bundle can be encoded once and re-used as many times as needed.
-				// Because it encodes all of the commands needed to render at the GPU level,
-				// those commands will not need to execute the associated JavaScript code upon
-				// execution or be re-validated, which can represent a significant time savings.
-				//
-				// However, because render bundles are immutable once created, they are only
-				// appropriate for rendering content where the same commands will be executed
-				// every time, with the only changes being the contents of the buffers and
-				// textures used. Cases where the executed commands differ from frame-to-frame,
-				// such as when using frustrum or occlusion culling, will not benefit from
-				// using render bundles as much.
-				this.renderBundle;
-				this.updateRenderBundle();
-
-			})
-		})
-
-	}
-
-	ensureEnoughAsteroids(asteroids, transform) {
-		for(let i = this.renderables.length;i <= this.settings.asteroidCount;++i) {
-			// Place copies of the asteroid in a ring.
-			const radius = Math.random() * 1.7 + 1.25;
-			const angle = Math.random() * Math.PI * 2;
-			const x = Math.sin(angle) * radius;
-			const y = (Math.random() - 0.5) * 0.015;
-			const z = Math.cos(angle) * radius;
-
-			mat4.identity(transform);
-			mat4.translate(transform, [x, y, z], transform);
-			mat4.rotateX(transform, Math.random() * Math.PI, transform);
-			mat4.rotateY(transform, Math.random() * Math.PI, transform);
-			this.renderables.push({
-				...asteroids[i % asteroids.length],
-				bindGroup: this.createSphereBindGroup(this.moonTexture, transform),
-			});
-		}
-	}
-
-	updateRenderBundle() {
-		console.log('updateRenderBundle')
-		const renderBundleEncoder = this.device.createRenderBundleEncoder({
-			colorFormats: [this.presentationFormat],
-			depthStencilFormat: 'depth24plus',
-		});
-		this.renderScene(renderBundleEncoder);
-		this.renderBundle = renderBundleEncoder.finish();
-	}
-
-	createGeometry(radius, widthSegments = 8, heightSegments = 4, randomness = 0) {
-
-		const sphereMesh = this.createSphereMesh(radius, widthSegments, heightSegments, randomness);
-		// Create a vertex buffer from the sphere data.
-		const vertices = this.device.createBuffer({
-			size: sphereMesh.vertices.byteLength,
-			usage: GPUBufferUsage.VERTEX,
-			mappedAtCreation: true,
-		});
-		new Float32Array(vertices.getMappedRange()).set(sphereMesh.vertices);
-		vertices.unmap();
-
-		const indices = this.device.createBuffer({
-			size: sphereMesh.indices.byteLength,
-			usage: GPUBufferUsage.INDEX,
-			mappedAtCreation: true,
-		});
-		new Uint16Array(indices.getMappedRange()).set(sphereMesh.indices);
-		indices.unmap();
-
-		return {
-			vertices,
-			indices,
-			indexCount: sphereMesh.indices.length,
-		};
-	}
-
-	createSphereBindGroup(texture, transform) {
-
-		const uniformBufferSize = 4 * 16; // 4x4 matrix
-		const uniformBuffer = this.device.createBuffer({
-			size: uniformBufferSize,
-			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-			mappedAtCreation: true,
-		});
-		new Float32Array(uniformBuffer.getMappedRange()).set(transform);
-		uniformBuffer.unmap();
-
-		const bindGroup = this.device.createBindGroup({
-			layout: this.pipeline.getBindGroupLayout(1),
-			entries: [
-				{
-					binding: 0,
-					resource: {
-						buffer: uniformBuffer,
-					},
-				},
-				{
-					binding: 1,
-					resource: this.sampler,
-				},
-				{
-					binding: 2,
-					resource: texture.createView(),
-				},
-			],
-		});
-
-		return bindGroup;
-	}
-
-	getTransformationMatrix(pos) {
-		// const viewMatrix = mat4.identity();
-		const now = Date.now();
-		const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
-		this.lastFrameMS = now;
-
-		// const viewMatrix = mat4.identity(); ORI
-		const camera = this.cameras[this.mainCameraParams.type];
-		const viewMatrix = camera.update(deltaTime, this.inputHandler());
-
-		mat4.translate(viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
-
-		mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
-		mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
-		mat4.rotateZ(viewMatrix, Math.PI * this.rotation.getRotZ(), viewMatrix);
-
-		mat4.multiply(this.projectionMatrix, viewMatrix, this.modelViewProjectionMatrix);
-		return this.modelViewProjectionMatrix;
-	}
-
-	async loadTex1(texPaths, device) {
-		return new Promise(async (resolve) => {
-			const response = await fetch(texPaths[0]);
-			const imageBitmap = await createImageBitmap(await response.blob());
-
-			this.moonTexture = device.createTexture({
-				size: [imageBitmap.width, imageBitmap.height, 1],
-				format: 'rgba8unorm',
-				usage:
-					GPUTextureUsage.TEXTURE_BINDING |
-					GPUTextureUsage.COPY_DST |
-					GPUTextureUsage.RENDER_ATTACHMENT,
-			});
-			var moonTexture = this.moonTexture
-			device.queue.copyExternalImageToTexture(
-				{source: imageBitmap},
-				{texture: moonTexture},
-				[imageBitmap.width, imageBitmap.height]
-			);
-			resolve()
-		})
-	}
-
-	async loadTex0(paths, device) {
-		return new Promise(async (resolve) => {
-			const response = await fetch(paths[0]);
-			const imageBitmap = await createImageBitmap(await response.blob());
-			console.log('loadTex0 WHAT IS THIS -> ', this)
-			this.texture0 = device.createTexture({
-				size: [imageBitmap.width, imageBitmap.height, 1],
-				format: 'rgba8unorm',
-				usage:
-					GPUTextureUsage.TEXTURE_BINDING |
-					GPUTextureUsage.COPY_DST |
-					GPUTextureUsage.RENDER_ATTACHMENT,
-			});
-			var texture0 = this.texture0
-			device.queue.copyExternalImageToTexture(
-				{source: imageBitmap},
-				{texture: texture0},
-				[imageBitmap.width, imageBitmap.height]
-			);
-			resolve()
-		})
-
-	}
-
-	createSphereMesh(radius, widthSegments = 3, heightSegments = 3, randomness = 0) {
-		const vertices = [];
-		const indices = [];
-
-		widthSegments = Math.max(3, Math.floor(widthSegments));
-		heightSegments = Math.max(2, Math.floor(heightSegments));
-
-		const firstVertex = vec3.create();
-		const vertex = vec3.create();
-		const normal = vec3.create();
-
-		let index = 0;
-		const grid = [];
-
-		// generate vertices, normals and uvs
-		for(let iy = 0;iy <= heightSegments;iy++) {
-			const verticesRow = [];
-			const v = iy / heightSegments;
-			// special case for the poles
-			let uOffset = 0;
-			if(iy === 0) {
-				uOffset = 0.5 / widthSegments;
-			} else if(iy === heightSegments) {
-				uOffset = -0.5 / widthSegments;
-			}
-
-			for(let ix = 0;ix <= widthSegments;ix++) {
-				const u = ix / widthSegments;
-				// Poles should just use the same position all the way around.
-				if(ix == widthSegments) {
-					vec3.copy(firstVertex, vertex);
-				} else if(ix == 0 || (iy != 0 && iy !== heightSegments)) {
-					const rr = radius + (Math.random() - 0.5) * 2 * randomness * radius;
-					// vertex
-					vertex[0] = -rr * Math.cos(u * Math.PI * 2) * Math.sin(v * Math.PI);
-					vertex[1] = rr * Math.cos(v * Math.PI);
-					vertex[2] = rr * Math.sin(u * Math.PI * 2) * Math.sin(v * Math.PI);
-					if(ix == 0) {
-						vec3.copy(vertex, firstVertex);
-					}
-				}
-				vertices.push(...vertex);
-
-				// normal
-				vec3.copy(vertex, normal);
-				vec3.normalize(normal, normal);
-				vertices.push(...normal);
-				// uv
-				vertices.push(u + uOffset, 1 - v);
-				verticesRow.push(index++);
-			}
-			grid.push(verticesRow);
-		}
-		// indices
-		for(let iy = 0;iy < heightSegments;iy++) {
-			for(let ix = 0;ix < widthSegments;ix++) {
-				const a = grid[iy][ix + 1];
-				const b = grid[iy][ix];
-				const c = grid[iy + 1][ix];
-				const d = grid[iy + 1][ix + 1];
-
-				if(iy !== 0) indices.push(a, b, d);
-				if(iy !== heightSegments - 1) indices.push(b, c, d);
-			}
-		}
-
-		return {
-			vertices: new Float32Array(vertices),
-			indices: new Uint16Array(indices),
-		};
-	}
-
-	// Render bundles function as partial, limited render passes, so we can use the
-	// same code both to render the scene normally and to build the render bundle.
-	renderScene(passEncoder) {
-		if(typeof this.renderables === 'undefined') return;
-		passEncoder.setPipeline(this.pipeline);
-		passEncoder.setBindGroup(0, this.frameBindGroup);
-		// Loop through every renderable object and draw them individually.
-		// (Because many of these meshes are repeated, with only the transforms
-		// differing, instancing would be highly effective here. This sample
-		// intentionally avoids using instancing in order to emulate a more complex
-		// scene, which helps demonstrate the potential time savings a render bundle
-		// can provide.)
-		let count = 0;
-		for(const renderable of this.renderables) {
-			passEncoder.setBindGroup(1, renderable.bindGroup);
-			passEncoder.setVertexBuffer(0, renderable.vertices);
-			passEncoder.setIndexBuffer(renderable.indices, 'uint16');
-			passEncoder.drawIndexed(renderable.indexCount);
-
-			if(++count > this.settings.asteroidCount) {
-				break;
-			}
-		}
-	}
-
-	draw = () => {
-		if(this.moonTexture == null) {
-			// console.log('not ready')
-			return;
-		}
-		const transformationMatrix = this.getTransformationMatrix(this.position);
-		this.device.queue.writeBuffer(
-			this.uniformBuffer,
-			0,
-			transformationMatrix.buffer,
-			transformationMatrix.byteOffset,
-			transformationMatrix.byteLength
-		);
-		this.renderPassDescriptor.colorAttachments[0].view = this.context
-			.getCurrentTexture()
-			.createView();
-	}
-}