matrix-engine-wgpu 1.0.1 → 1.0.4

package/src/engine/cube.js

@@ -1,6 +1,7 @@
-import {BALL_SHADER} from "../shaders/shaders";
+import {UNLIT_SHADER} from "../shaders/shaders";
 import {mat4, vec3} from 'wgpu-matrix';
-import {Position} from "./matrix-class";
+import {Position, Rotation} from "./matrix-class";
+import {createInputHandler} from "./engine";
 
 var SphereLayout = {
   vertexStride: 8 * 4,
@@ -14,9 +15,18 @@ export default class MECube {
   constructor(canvas, device, context, o) {
     this.device = device;
     this.context = context;
-
+    this.entityArgPass = o.entityArgPass;
+    this.inputHandler = createInputHandler(window, canvas);
+    this.cameras = o.cameras;
+    console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef)
+    this.cameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    } // |  WASD 'arcball' };
+
+    this.lastFrameMS = 0;
     this.shaderModule = device.createShaderModule({
-      code: BALL_SHADER,
+      code: UNLIT_SHADER,
     });
 
     this.texturesPaths = [];
@@ -26,7 +36,14 @@ export default class MECube {
     })
 
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    this.position = new Position(o.position.x, o.position.y, o.position.z)
+    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;
     this.pipeline = device.createRenderPipeline({
       layout: 'auto',
       vertex: {
@@ -100,37 +117,38 @@ export default class MECube {
         mat4.identity(this.transform);
 
         // Create one large central planet surrounded by a large ring of asteroids
-        this.planet = this.createSphereRenderable(1.0);
+        this.planet = this.createGeometry({
+          scale: this.scale,
+          useUVShema4x2: false
+        });
         this.planet.bindGroup = this.createSphereBindGroup(this.texture0, this.transform);
 
+        // can be used like instance draws
         var asteroids = [
-          this.createSphereRenderable(0.2, 8, 6, 0.15),
-          this.createSphereRenderable(0.13, 8, 6, 0.15)
+          // this.createGeometry(0.2, 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: 'clear',
-              storeOp: 'store',
+              loadOp: this.entityArgPass.loadOp,
+              storeOp: this.entityArgPass.storeOp,
             },
           ],
           depthStencilAttachment: {
             view: this.depthTexture.createView(),
             depthClearValue: 1.0,
-            depthLoadOp: 'clear',
-            depthStoreOp: 'store',
+            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.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 1000.0);
         this.modelViewProjectionMatrix = mat4.create();
 
         this.frameBindGroup = device.createBindGroup({
@@ -181,7 +199,7 @@ export default class MECube {
   }
 
   updateRenderBundle() {
-    console.log('sss')
+    console.log('[CUBE] updateRenderBundle')
     const renderBundleEncoder = this.device.createRenderBundleEncoder({
       colorFormats: [this.presentationFormat],
       depthStencilFormat: 'depth24plus',
@@ -190,30 +208,29 @@ export default class MECube {
     this.renderBundle = renderBundleEncoder.finish();
   }
 
-  createSphereRenderable(radius, widthSegments = 32, heightSegments = 16, randomness = 0) {
-
-    const sphereMesh = this.createCubeVertices();
+  createGeometry(options) {
+    const mesh = this.createCubeVertices(options);
     // Create a vertex buffer from the sphere data.
     const vertices = this.device.createBuffer({
-      size: sphereMesh.vertices.byteLength,
+      size: mesh.vertices.byteLength,
       usage: GPUBufferUsage.VERTEX,
       mappedAtCreation: true,
     });
-    new Float32Array(vertices.getMappedRange()).set(sphereMesh.vertices);
+    new Float32Array(vertices.getMappedRange()).set(mesh.vertices);
     vertices.unmap();
 
     const indices = this.device.createBuffer({
-      size: sphereMesh.indices.byteLength,
+      size: mesh.indices.byteLength,
       usage: GPUBufferUsage.INDEX,
       mappedAtCreation: true,
     });
-    new Uint16Array(indices.getMappedRange()).set(sphereMesh.indices);
+    new Uint16Array(indices.getMappedRange()).set(mesh.indices);
     indices.unmap();
 
     return {
       vertices,
       indices,
-      indexCount: sphereMesh.indices.length,
+      indexCount: mesh.indices.length,
     };
   }
 
@@ -252,13 +269,20 @@ export default class MECube {
   }
 
   getTransformationMatrix(pos) {
-    const viewMatrix = mat4.identity();
+    const now = Date.now();
+    const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+    this.lastFrameMS = now;
+
+    // const viewMatrix = mat4.identity(); ORI
+    const camera = this.cameras[this.cameraParams.type];
+    const viewMatrix = camera.update(deltaTime, this.inputHandler());
+
     mat4.translate(viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
-    const now = Date.now() / 1000;
-    mat4.rotateZ(viewMatrix, Math.PI * 0, viewMatrix);
-    mat4.rotateX(viewMatrix, Math.PI * 0, viewMatrix);
-    mat4.rotateY(viewMatrix,   -45, 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;
   }
 
@@ -343,80 +367,81 @@ export default class MECube {
         useUVShema4x2: false
       }
     }
+    if(typeof options.scale === 'undefined') options.scale = 1;
 
     let vertices;
     if(options.useUVShema4x2 == true) {
-      vertices = new Float32Array([
-      //  position   |  texture coordinate
-      //-------------+----------------------
-      // front face     select the top left image  1, 0.5,   
-      -1, 1, 1, 1, 0, 0, 0, 0,
-      -1, -1, 1, 1, 0, 0, 0, 0.5,
-      1, 1, 1, 1, 0, 0, 0.25, 0,
-      1, -1, 1, 1, 0, 0, 0.25, 0.5,
-      // right face     select the top middle image
-      1, 1, -1, 1, 0, 0, 0.25, 0,
-      1, 1, 1, 1, 0, 0, 0.5, 0,
-      1, -1, -1, 1, 0, 0, 0.25, 0.5,
-      1, -1, 1, 1, 0, 0, 0.5, 0.5,
-      // back face      select to top right image
-      1, 1, -1, 1, 0, 0, 0.5, 0,
-      1, -1, -1, 1, 0, 0, 0.5, 0.5,
-      -1, 1, -1, 1, 0, 0, 0.75, 0,
-      -1, -1, -1, 1, 0, 0, 0.75, 0.5,
-      // left face       select the bottom left image
-      -1, 1, 1, 1, 0, 0, 0, 0.5,
-      -1, 1, -1, 1, 0, 0, 0.25, 0.5,
-      -1, -1, 1, 1, 0, 0, 0, 1,
-      -1, -1, -1, 1, 0, 0, 0.25, 1,
-      // bottom face     select the bottom middle image
-      1, -1, 1, 1, 0, 0, 0.25, 0.5,
-      -1, -1, 1, 1, 0, 0, 0.5, 0.5,
-      1, -1, -1, 1, 0, 0, 0.25, 1,
-      -1, -1, -1, 1, 0, 0, 0.5, 1,
-      // top face        select the bottom right image
-      -1, 1, 1, 1, 0, 0, 0.5, 0.5,
-      1, 1, 1, 1, 0, 0, 0.75, 0.5,
-      -1, 1, -1, 1, 0, 0, 0.5, 1,
-      1, 1, -1, 1, 0, 0, 0.75, 1,
-    ]);
-    } else {
       vertices = new Float32Array([
         //  position   |  texture coordinate
         //-------------+----------------------
         // front face     select the top left image  1, 0.5,   
         -1, 1, 1, 1, 0, 0, 0, 0,
+        -1, -1, 1, 1, 0, 0, 0, 0.5,
+        1, 1, 1, 1, 0, 0, 0.25, 0,
+        1, -1, 1, 1, 0, 0, 0.25, 0.5,
+        // right face     select the top middle image
+        1, 1, -1, 1, 0, 0, 0.25, 0,
+        1, 1, 1, 1, 0, 0, 0.5, 0,
+        1, -1, -1, 1, 0, 0, 0.25, 0.5,
+        1, -1, 1, 1, 0, 0, 0.5, 0.5,
+        // back face      select to top right image
+        1, 1, -1, 1, 0, 0, 0.5, 0,
+        1, -1, -1, 1, 0, 0, 0.5, 0.5,
+        -1, 1, -1, 1, 0, 0, 0.75, 0,
+        -1, -1, -1, 1, 0, 0, 0.75, 0.5,
+        // left face       select the bottom left image
+        -1, 1, 1, 1, 0, 0, 0, 0.5,
+        -1, 1, -1, 1, 0, 0, 0.25, 0.5,
         -1, -1, 1, 1, 0, 0, 0, 1,
-        1, 1, 1, 1, 0, 0, 1, 0,
-        1, -1, 1, 1, 0, 0, 1, 1,
+        -1, -1, -1, 1, 0, 0, 0.25, 1,
+        // bottom face     select the bottom middle image
+        1, -1, 1, 1, 0, 0, 0.25, 0.5,
+        -1, -1, 1, 1, 0, 0, 0.5, 0.5,
+        1, -1, -1, 1, 0, 0, 0.25, 1,
+        -1, -1, -1, 1, 0, 0, 0.5, 1,
+        // top face        select the bottom right image
+        -1, 1, 1, 1, 0, 0, 0.5, 0.5,
+        1, 1, 1, 1, 0, 0, 0.75, 0.5,
+        -1, 1, -1, 1, 0, 0, 0.5, 1,
+        1, 1, -1, 1, 0, 0, 0.75, 1,
+      ]);
+    } else {
+      vertices = new Float32Array([
+        //  position                                                   |  texture coordinate
+        //-------------                                              +----------------------
+        // front face     select the top left image  1, 0.5,   
+        -1 * options.scale, 1 * options.scale, 1 * options.scale,       1, 0, 0, 0, 0,
+        -1 * options.scale, -1 * options.scale, 1 * options.scale,      1, 0, 0, 0, 1,
+        1 * options.scale, 1 * options.scale, 1 * options.scale,        1, 0, 0, 1, 0,
+        1 * options.scale, -1 * options.scale, 1 * options.scale,       1, 0, 0, 1, 1,
         // right face     select the top middle image
-        1, 1, -1, 1, 0, 0, 0, 0,
-        1, 1, 1, 1, 0, 0, 0, 1,
-        1, -1, -1, 1, 0, 0, 1, 0,
-        1, -1, 1, 1, 0, 0, 1, 1,
+        1 * options.scale, 1 * options.scale, -1 * options.scale,       1, 0, 0, 0, 0,
+        1 * options.scale, 1 * options.scale, 1 * options.scale,        1, 0, 0, 0, 1,
+        1 * options.scale, -1 * options.scale, -1 * options.scale,      1, 0, 0, 1, 0,
+        1 * options.scale, -1 * options.scale, 1 * options.scale,       1, 0, 0, 1, 1,
         // back face      select to top right image
-        1, 1, -1, 1, 0, 0, 0, 0,
-        1, -1, -1, 1, 0, 0, 0, 1,
-        -1, 1, -1, 1, 0, 0, 1, 0,
-        -1, -1, -1, 1, 0, 0, 1, 1,
+        1 * options.scale, 1 * options.scale, -1 * options.scale,       1, 0, 0, 0, 0,
+        1 * options.scale, -1 * options.scale, -1 * options.scale,      1, 0, 0, 0, 1,
+        -1 * options.scale, 1 * options.scale, -1 * options.scale,      1, 0, 0, 1, 0,
+        -1 * options.scale, -1 * options.scale, -1 * options.scale,     1, 0, 0, 1, 1,
         // left face       select the bottom left image
-        -1, 1, 1, 1, 0, 0, 0, 0,
-        -1, 1, -1, 1, 0, 0, 0, 1,
-        -1, -1, 1, 1, 0, 0, 1, 0,
-        -1, -1, -1, 1, 0, 0, 1, 1,
+        -1 * options.scale, 1 * options.scale, 1 * options.scale,       1, 0, 0, 0, 0,
+        -1 * options.scale, 1 * options.scale, -1 * options.scale,      1, 0, 0, 0, 1,
+        -1 * options.scale, -1 * options.scale, 1 * options.scale,      1, 0, 0, 1, 0,
+        -1 * options.scale, -1 * options.scale, -1 * options.scale,     1, 0, 0, 1, 1,
         // bottom face     select the bottom middle image
-        1, -1, 1, 1, 0, 0, 0, 0,
-        -1, -1, 1, 1, 0, 0, 0, 1,
-        1, -1, -1, 1, 0, 0, 1, 0,
-        -1, -1, -1, 1, 0, 0, 1, 1,
+        1 * options.scale, -1 * options.scale, 1 * options.scale,       1, 0, 0, 0, 0,
+        -1 * options.scale, -1 * options.scale, 1 * options.scale,      1, 0, 0, 0, 1,
+        1 * options.scale, -1 * options.scale, -1 * options.scale,      1, 0, 0, 1, 0,
+        -1 * options.scale, -1 * options.scale, -1 * options.scale,     1, 0, 0, 1, 1,
         // top face        select the bottom right image
-        -1, 1, 1, 1, 0, 0, 0, 0,
-        1, 1, 1, 1, 0, 0, 0, 1,
-        -1, 1, -1, 1, 0, 0, 1, 0,
-        1, 1, -1, 1, 0, 0, 1, 1,
+        -1 * options.scale, 1 * options.scale, 1 * options.scale,       1, 0, 0, 0, 0,
+        1 * options.scale, 1 * options.scale, 1 * options.scale,        1, 0, 0, 0, 1,
+        -1 * options.scale, 1 * options.scale, -1 * options.scale,      1, 0, 0, 1, 0,
+        1 * options.scale, 1 * options.scale, -1 * options.scale,       1, 0, 0, 1, 1,
       ])
     }
-  
+
 
     const indices = new Uint16Array([
       0, 1, 2, 2, 1, 3,  // front