matrix-engine-wgpu 1.0.5 → 1.0.6

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/utils.js

@@ -543,17 +543,18 @@ export var QueryString = (function() {
 
 
 export function getAxisRot(q1) {
-  var x,y,z;
+  var x, y, z;
 
   // if w>1 acos and sqrt will produce errors, this cant happen if quaternion is normalised
-  if (q1.w > 1) q1.normalise(); 
+  if(q1.w > 1) q1.normalise();
   var angle = 2 * Math.acos(q1.w);
   // assuming quaternion normalised then w is less than 1, so term always positive.
-  var s = Math.sqrt(1-q1.w*q1.w); 
-   // test to avoid divide by zero, s is always positive due to sqrt
-  if (s < 0.001) {
+  var s = Math.sqrt(1 - q1.w * q1.w);
+  // test to avoid divide by zero, s is always positive due to sqrt
+  if(s < 0.001) {
     // if s close to zero then direction of axis not important
-     // if it is important that axis is normalised then replace with x=1; y=z=0;
+    // if it is important that axis is normalised then replace with x=1; y=z=0;
+
     x = q1.x;
     y = q1.y;
     z = q1.z;
@@ -562,12 +563,53 @@ export function getAxisRot(q1) {
     y = q1.y / s;
     z = q1.z / s;
   }
-  return [radToDeg(x),radToDeg(y), radToDeg(z)]
+  return [radToDeg(x), radToDeg(y), radToDeg(z)]
+}
+
+export function getAxisRot2(targetAxis, Q) {
+  Q.normalize(); // if w>1 acos and sqrt will produce errors, this cant happen if quaternion is normalised
+  var angle = 2 * Math.acos(Q.w());
+  var s = Math.sqrt(1 - Q.w() * Q.w()); // assuming quaternion normalised then w is less than 1, so term always positive.
+  if(s < 0.001) { // test to avoid divide by zero, s is always positive due to sqrt
+    // if s close to zero then direction of axis not important
+    // if it is important that axis is normalised then replace with x=1; y=z=0;
+    // targetAxis.x = 1;
+    // targetAxis.y = 0;
+    // targetAxis.z = 0;
+    targetAxis.x = Q.x();
+    targetAxis.y = Q.y();
+    targetAxis.z = Q.z();
+  } else {
+    targetAxis.x = Q.x() / s; // normalise axis
+    targetAxis.y = Q.y() / s;
+    targetAxis.z = Q.z() / s;
+  }
+  return [targetAxis, angle];
+}
+
+export function getAxisRot3(Q) {
+
+  var angle = Math.acos(Q.w) * 2;
+  var axis = {};
+
+  if(Math.sin(Math.acos(angle)) > 0) {
+
+    axis.x = Q.x / Math.sin(Math.acos(angle / 2));
+    axis.y = Q.y / Math.sin(Math.acos(angle / 2));
+    axis.z = Q.z / Math.sin(Math.acos(angle / 2));
+
+  } else {
+    axis.x = 0;
+    axis.y = 0;
+    axis.z = 0;
+  }
+
+  return axis;
 }
 
 // NTO TESTED
 export function quaternion_rotation_matrix(Q) {
-    
+
   // Covert a quaternion into a full three-dimensional rotation matrix.
 
   // Input
@@ -583,26 +625,32 @@ export function quaternion_rotation_matrix(Q) {
   var q1 = Q[1]
   var q2 = Q[2]
   var q3 = Q[3]
-   
+
   // # First row of the rotation matrix
   var r00 = 2 * (q0 * q0 + q1 * q1) - 1
   var r01 = 2 * (q1 * q2 - q0 * q3)
   var r02 = 2 * (q1 * q3 + q0 * q2)
-   
+
   // # Second row of the rotation matrix
   var r10 = 2 * (q1 * q2 + q0 * q3)
   var r11 = 2 * (q0 * q0 + q2 * q2) - 1
   var r12 = 2 * (q2 * q3 - q0 * q1)
-   
+
   // # Third row of the rotation matrix
   var r20 = 2 * (q1 * q3 - q0 * q2)
   var r21 = 2 * (q2 * q3 + q0 * q1)
   var r22 = 2 * (q0 * q0 + q3 * q3) - 1
-   
+
   // # 3x3 rotation matrix
   var rot_matrix = [[r00, r01, r02],
-                         [r10, r11, r12],
-                         [r20, r21, r22]]
+  [r10, r11, r12],
+  [r20, r21, r22]]
 
   return rot_matrix;
-}
+}
+
+// copnsole log graphics
+export const LOG_WARN = 'background: gray; color: yellow; font-size:10px';
+export const LOG_INFO = 'background: green; color: white; font-size:11px';
+export const LOG_MATRIX = "font-family: verdana;color: #lime; font-size:11px;text-shadow: 2px 2px 4px orangered;background: black;";
+export const LOG_FUNNY = "font-family: stormfaze;color: #f1f033; font-size:14px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 2px 2px 4px #c160a6, 6px 2px 0px #123de3;background: black;";