matrix-engine-wgpu 1.3.17 → 1.3.19

package/src/engine/ball.js

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