matrix-engine-wgpu 1.0.5 → 1.1.0

package/src/engine/mesh.js

@@ -0,0 +1,476 @@
+import {mat4, vec3} from 'wgpu-matrix';
+import {Position, Rotation} from "./matrix-class";
+import {createInputHandler} from "./engine";
+import {vertexShadowWGSL} from '../shaders/vertexShadow.wgsl';
+import {fragmentWGSL} from '../shaders/fragment.wgsl';
+import {vertexWGSL} from '../shaders/vertex.wgsl';
+import {downloadMeshes} from './loader-obj';
+
+export default class MEMesh {
+
+  constructor(canvas, device, context, o) {
+
+    this.done = false;
+    this.device = device;
+    this.context = context;
+    this.entityArgPass = o.entityArgPass;
+
+    this.mesh = o.mesh;
+    this.inputHandler = createInputHandler(window, canvas);
+    this.cameras = o.cameras;
+    this.mainCameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    }
+    this.lastFrameMS = 0;
+    this.texturesPaths = [];
+    o.texturesPaths.forEach((t) => {this.texturesPaths.push(t)})
+    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    this.position = new Position(o.position.x, o.position.y, o.position.z);
+    // console.log('cube added on pos : ', this.position)
+    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.scale = o.scale;
+
+    // new
+    this.runProgram = () => {
+      return new Promise(async (resolve) => {
+        this.shadowDepthTextureSize = 1024;
+        const aspect = canvas.width / canvas.height;
+        this.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);
+        this.modelViewProjectionMatrix = mat4.create();
+
+        this.loadTex0(this.texturesPaths, device).then(() => {
+          resolve()
+          console.log('load tex for mesh', this.texture0)
+        })
+      })
+    }
+
+    this.runProgram().then(() => {
+      const aspect = canvas.width / canvas.height;
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+      this.context.configure({
+        device: this.device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+
+      // Create the model vertex buffer.
+      this.vertexBuffer = this.device.createBuffer({
+        size: this.mesh.positions.length * 3 * 2 * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true,
+      });
+      {
+        const mapping = new Float32Array(this.vertexBuffer.getMappedRange());
+        for(let i = 0;i < this.mesh.positions.length;++i) {
+          mapping.set(this.mesh.positions[i], 6 * i);
+          mapping.set(this.mesh.normals[i], 6 * i + 3);
+        }
+        this.vertexBuffer.unmap();
+      }
+
+      // Create the model index buffer.
+      this.indexCount = this.mesh.triangles.length * 3;
+      this.indexBuffer = this.device.createBuffer({
+        size: this.indexCount * Uint16Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.INDEX,
+        mappedAtCreation: true,
+      });
+      {
+        const mapping = new Uint16Array(this.indexBuffer.getMappedRange());
+        for(let i = 0;i < this.mesh.triangles.length;++i) {
+          mapping.set(this.mesh.triangles[i], 3 * i);
+        }
+        this.indexBuffer.unmap();
+      }
+
+      // Create the depth texture for rendering/sampling the shadow map.
+      this.shadowDepthTexture = this.device.createTexture({
+        size: [this.shadowDepthTextureSize, this.shadowDepthTextureSize, 1],
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        format: 'depth32float',
+      });
+      this.shadowDepthTextureView = this.shadowDepthTexture.createView();
+
+      // Create some common descriptors used for both the shadow pipeline
+      // and the color rendering pipeline.
+      this.vertexBuffers = [
+        {
+          arrayStride: Float32Array.BYTES_PER_ELEMENT * 6,
+          attributes: [
+            {
+              // position
+              shaderLocation: 0,
+              offset: 0,
+              format: 'float32x3',
+            },
+            {
+              // normal
+              shaderLocation: 1,
+              offset: Float32Array.BYTES_PER_ELEMENT * 3,
+              format: 'float32x3',
+            },
+          ],
+        },
+      ];
+
+      const primitive = {
+        topology: 'triangle-list',
+        cullMode: 'back',
+      };
+
+      this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
+        entries: [
+          {
+            binding: 0,
+            visibility: GPUShaderStage.VERTEX,
+            buffer: {
+              type: 'uniform',
+            },
+          },
+        ],
+      });
+
+      this.shadowPipeline = this.device.createRenderPipeline({
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [
+            this.uniformBufferBindGroupLayout,
+            this.uniformBufferBindGroupLayout,
+          ],
+        }),
+        vertex: {
+          module: this.device.createShaderModule({
+            code: vertexShadowWGSL,
+          }),
+          buffers: this.vertexBuffers,
+        },
+        depthStencil: {
+          depthWriteEnabled: true,
+          depthCompare: 'less',
+          format: 'depth32float',
+        },
+        primitive,
+      });
+
+      // Create a bind group layout which holds the scene uniforms and
+      // the texture+sampler for depth. We create it manually because the WebPU
+      // implementation doesn't infer this from the shader (yet).
+      this.bglForRender = this.device.createBindGroupLayout({
+        entries: [
+          {
+            binding: 0,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            buffer: {
+              type: 'uniform',
+            },
+          },
+          {
+            binding: 1,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            texture: {
+              sampleType: 'depth',
+            },
+          },
+          {
+            binding: 2,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            sampler: {
+              type: 'comparison',
+            },
+          },
+          {
+            binding: 3,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            texture: {
+              sampleType: 'float',
+            },
+          },
+          {
+            binding: 4,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            sampler: {
+              type: 'filtering',
+            },
+          }
+        ],
+      });
+
+      this.pipeline = this.device.createRenderPipeline({
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
+        }),
+        vertex: {
+          module: this.device.createShaderModule({
+            code: vertexWGSL,
+          }),
+          buffers: this.vertexBuffers,
+        },
+        fragment: {
+          module: this.device.createShaderModule({
+            code: fragmentWGSL,
+          }),
+          targets: [
+            {
+              format: presentationFormat,
+            },
+          ],
+          constants: {
+            shadowDepthTextureSize: this.shadowDepthTextureSize,
+          },
+        },
+        depthStencil: {
+          depthWriteEnabled: true,
+          depthCompare: 'less',
+          format: 'depth24plus-stencil8',
+        },
+        primitive,
+      });
+
+      const depthTexture = this.device.createTexture({
+        size: [canvas.width, canvas.height],
+        format: 'depth24plus-stencil8',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+
+      this.renderPassDescriptor = {
+        colorAttachments: [
+          {
+            // view is acquired and set in render loop.
+            view: undefined,
+
+            clearValue: {r: 0.5, g: 0.5, b: 0.5, a: 1.0},
+            loadOp: 'load',
+            storeOp: 'store',
+          },
+        ],
+        depthStencilAttachment: {
+          view: depthTexture.createView(),
+
+          depthClearValue: 1.0,
+          depthLoadOp: 'clear',
+          depthStoreOp: 'store',
+          stencilClearValue: 0,
+          stencilLoadOp: 'clear',
+          stencilStoreOp: 'store',
+        },
+      };
+
+      this.modelUniformBuffer = this.device.createBuffer({
+        size: 4 * 16, // 4x4 matrix
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      });
+
+      this.sceneUniformBuffer = this.device.createBuffer({
+        // Two 4x4 viewProj matrices,
+        // one for the camera and one for the light.
+        // Then a vec3 for the light position.
+        // Rounded to the nearest multiple of 16.
+        size: 2 * 4 * 16 + 4 * 4,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      });
+
+      this.sceneBindGroupForShadow = this.device.createBindGroup({
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [
+          {
+            binding: 0,
+            resource: {
+              buffer: this.sceneUniformBuffer,
+            },
+          },
+        ],
+      });
+
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [
+          {
+            binding: 0,
+            resource: {
+              buffer: this.sceneUniformBuffer,
+            },
+          },
+          {
+            binding: 1,
+            resource: this.shadowDepthTextureView,
+          },
+          {
+            binding: 2,
+            resource: this.device.createSampler({
+              compare: 'less',
+            }),
+          },
+          {
+            binding: 3,
+            resource: this.texture0.createView(),
+          },
+          {
+            binding: 4,
+            resource: this.sampler,
+          },
+        ],
+      });
+
+      this.modelBindGroup = this.device.createBindGroup({
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [
+          {
+            binding: 0,
+            resource: {
+              buffer: this.modelUniformBuffer,
+            },
+          },
+        ],
+      });
+
+      // Rotates the camera around the origin based on time.
+      this.getTransformationMatrix = (pos) => {
+        const now = Date.now();
+        const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
+        this.lastFrameMS = now;
+
+        const camera = this.cameras[this.mainCameraParams.type];
+        this.viewMatrix = camera.update(deltaTime, this.inputHandler());
+
+        mat4.translate(this.viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), this.viewMatrix);
+        mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(), this.viewMatrix);
+        mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(), this.viewMatrix);
+        mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
+        mat4.multiply(this.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
+
+        return this.modelViewProjectionMatrix;
+      }
+
+      this.upVector = vec3.fromValues(0, 1, 0);
+      this.origin = vec3.fromValues(0, 0, 0);
+
+      const lightPosition = vec3.fromValues(50, 100, -100);
+      const lightViewMatrix = mat4.lookAt(lightPosition, this.origin, this.upVector);
+      const lightProjectionMatrix = mat4.create();
+      {
+        const left = -80;
+        const right = 80;
+        const bottom = -80;
+        const top = 80;
+        const near = -200;
+        const far = 300;
+        mat4.ortho(left, right, bottom, top, near, far, lightProjectionMatrix);
+      }
+
+      const lightViewProjMatrix = mat4.multiply(
+        lightProjectionMatrix,
+        lightViewMatrix
+      );
+
+      // looks like affect on transformations for now const 0
+      const modelMatrix = mat4.translation([0, 0, 0]);
+      // The camera/light aren't moving, so write them into buffers now.
+      {
+        const lightMatrixData = lightViewProjMatrix; // as Float32Array;
+        this.device.queue.writeBuffer(
+          this.sceneUniformBuffer,
+          0,
+          lightMatrixData.buffer,
+          lightMatrixData.byteOffset,
+          lightMatrixData.byteLength
+        );
+
+        const lightData = lightPosition;
+        this.device.queue.writeBuffer(
+          this.sceneUniformBuffer,
+          128,
+          lightData.buffer,
+          lightData.byteOffset,
+          lightData.byteLength
+        );
+
+        const modelData = modelMatrix;
+        this.device.queue.writeBuffer(
+          this.modelUniformBuffer,
+          0,
+          modelData.buffer,
+          modelData.byteOffset,
+          modelData.byteLength
+        );
+      }
+
+      this.shadowPassDescriptor = {
+        colorAttachments: [],
+        depthStencilAttachment: {
+          view: this.shadowDepthTextureView,
+          depthClearValue: 1.0,
+          depthLoadOp: 'clear',
+          depthStoreOp: 'store',
+        },
+      };
+
+      this.done = true;
+    })
+  }
+
+  async loadTex0(texturesPaths, device) {
+    this.sampler = 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 = device.createTexture({
+        size: [imageBitmap.width, imageBitmap.height, 1],
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+
+      device.queue.copyExternalImageToTexture(
+        {source: imageBitmap},
+        {texture: this.texture0},
+        [imageBitmap.width, imageBitmap.height]
+      );
+      resolve()
+    })
+  }
+
+  draw = (commandEncoder) => {
+    if(this.done == false) return;
+    const transformationMatrix = this.getTransformationMatrix(this.position);
+    this.device.queue.writeBuffer(
+      this.sceneUniformBuffer,
+      64,
+      transformationMatrix.buffer,
+      transformationMatrix.byteOffset,
+      transformationMatrix.byteLength
+    );
+    this.renderPassDescriptor.colorAttachments[0].view = this.context
+      .getCurrentTexture()
+      .createView();
+    {
+      const shadowPass = commandEncoder.beginRenderPass(this.shadowPassDescriptor);
+      shadowPass.setPipeline(this.shadowPipeline);
+      shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
+      shadowPass.setBindGroup(1, this.modelBindGroup);
+      shadowPass.setVertexBuffer(0, this.vertexBuffer);
+      shadowPass.setIndexBuffer(this.indexBuffer, 'uint16');
+      shadowPass.drawIndexed(this.indexCount);
+      shadowPass.end();
+    }
+    {
+      const renderPass = commandEncoder.beginRenderPass(this.renderPassDescriptor);
+      renderPass.setPipeline(this.pipeline);
+      renderPass.setBindGroup(0, this.sceneBindGroupForRender);
+      renderPass.setBindGroup(1, this.modelBindGroup);
+      renderPass.setVertexBuffer(0, this.vertexBuffer);
+      renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
+      renderPass.drawIndexed(this.indexCount);
+      renderPass.end();
+    }
+  }
+}

package/src/engine/raycast-test.js

@@ -0,0 +1,93 @@
+/**
+ * @author Nikola Lukic
+ * @email zlatnaspirala@gmail.com
+ * @site https://maximumroulette.com
+ * @Licence GPL v3
+ * @credits chatgpt used for this script adaptation.
+ * @Note matrix-engine-wgpu adaptation test
+ * default for now:
+ * app.cameras['WASD']
+ * Only tested for WASD type of camera.
+ * app is global - will be fixed in future
+ */
+import {mat4, vec3, vec4} from "wgpu-matrix";
+
+let rayHitEvent;
+
+export let touchCoordinate = {
+	enabled: false,
+	x: 0,
+	y: 0,
+	stopOnFirstDetectedHit: false
+};
+
+function multiplyMatrixVector(matrix, vector) {
+	return vec4.transformMat4(vector, matrix);
+}
+
+export function getRayFromMouse(event, canvas, camera) {
+	const rect = canvas.getBoundingClientRect();
+	let x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+	let y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+	// simple invert
+	x = -x;
+	const fov = Math.PI / 4;
+	const aspect = canvas.width / canvas.height;
+	const near = 0.1;
+	const far = 100;
+	camera.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 1000.0);
+	const invProjection = mat4.inverse(camera.projectionMatrix);
+	const correctedView = mat4.clone(camera.view_);
+	correctedView[2] *= -1;
+	correctedView[6] *= -1;
+	correctedView[10] *= -1;
+	const invView = mat4.inverse(correctedView);
+	const ndc = [x, y, 1, 1];
+	let worldPos = multiplyMatrixVector(invProjection, ndc);
+	worldPos = multiplyMatrixVector(invView, worldPos);
+	let world;
+	if (worldPos[3] !== 0) {
+		world = [
+			worldPos[0] / worldPos[3],
+			worldPos[2] / worldPos[3],
+			worldPos[1] / worldPos[3]
+		];
+	} else {
+		console.log("[raycaster]special case 0.")
+		world = [
+			worldPos[0],
+			worldPos[1],
+			worldPos[2]
+		];
+	}
+	const rayOrigin = [camera.position[0], camera.position[1], camera.position[2]];
+	const rayDirection = vec3.normalize(vec3.subtract(world, rayOrigin));
+	return {rayOrigin, rayDirection};
+}
+
+export function rayIntersectsSphere(rayOrigin, rayDirection, sphereCenter, sphereRadius) {
+	const pos = [sphereCenter.x, sphereCenter.y, sphereCenter.z];
+	const oc = vec3.subtract(rayOrigin, pos);
+	const a = vec3.dot(rayDirection, rayDirection);
+	const b = 2.0 * vec3.dot(oc, rayDirection);
+	const c = vec3.dot(oc, oc) - sphereRadius * sphereRadius;
+	const discriminant = b * b - 4 * a * c;
+	return discriminant > 0;
+}
+
+export function addRaycastListener () {
+	window.addEventListener('click', (event) => {
+		let canvas = document.getElementsByTagName('canvas')[0];
+		let camera = app.cameras.WASD;
+		const { rayOrigin, rayDirection } = getRayFromMouse(event, canvas, camera);
+		for (const object of app.mainRenderBundle) {
+			if (rayIntersectsSphere(rayOrigin, rayDirection, object.position, 2)) {
+				console.log('Object clicked:', object.name);
+				// Just like in matrix-engine webGL version "ray.hit.event"
+				dispatchEvent(new CustomEvent('ray.hit.event', {detail: {
+					hitObject: object
+				}}))
+			}
+		}
+	});
+}