matrix-engine-wgpu 1.0.2 → 1.0.5

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, Rotation} from "./matrix-class";
+import {createInputHandler} from "./engine";
 
 var SphereLayout = {
   vertexStride: 8 * 4,
@@ -14,12 +15,18 @@ export default class MECube {
   constructor(canvas, device, context, o) {
     this.device = device;
     this.context = context;
-
     this.entityArgPass = o.entityArgPass;
-
-    console.log('passed args', o.entityArgPass)
+    this.inputHandler = createInputHandler(window, canvas);
+    this.cameras = o.cameras;
+    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.shaderModule = device.createShaderModule({
-      code: BALL_SHADER,
+      code: UNLIT_SHADER,
     });
 
     this.texturesPaths = [];
@@ -30,10 +37,13 @@ export default class MECube {
 
     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;
     this.pipeline = device.createRenderPipeline({
       layout: 'auto',
       vertex: {
@@ -107,12 +117,15 @@ 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];
@@ -122,7 +135,7 @@ export default class MECube {
             {
               view: undefined,
               clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
-              loadOp:  this.entityArgPass.loadOp,
+              loadOp: this.entityArgPass.loadOp,
               storeOp: this.entityArgPass.storeOp,
             },
           ],
@@ -135,7 +148,7 @@ export default class MECube {
         };
 
         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({
@@ -195,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,
     };
   }
 
@@ -257,19 +269,21 @@ export default class MECube {
   }
 
   getTransformationMatrix(pos) {
-    // const now = Date.now() / 1000;
+    const now = Date.now();
+    const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
+    this.lastFrameMS = now;
 
-    const viewMatrix = mat4.identity();
+    // 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;
 
+    return this.modelViewProjectionMatrix;
   }
 
   async loadTex1(device) {
@@ -319,6 +333,10 @@ export default class MECube {
   }
 
 
+  draw = () => {}
+  drawElements = () => {}
+  drawShadows = () => {}
+
   // 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) {
@@ -353,80 +371,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