matrix-engine-wgpu 1.3.12 → 1.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "description": "obj sequence anim +HOTFIX raycast, webGPU powered pwa application. Crazy fast rendering with AmmoJS physics support. Simple raycaster hit object added.",
   "main": "index.js",
   "files": [

package/readme.md

@@ -338,6 +338,18 @@ TEST.loadVideoTexture({
 });
 ```
 
+For canvasinline attach this to arg (example for direct draw on canvas2d and passing intro webgpu pipeline):
+```js
+canvaInlineProgram: (ctx, canvas) => {
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = 'white';
+  ctx.font = '20px Orbitron';
+  ctx.fillText(`FPS: ${Math.round(performance.now() % 60)}`, 10, 30);
+}
+```
+
+
 <pre>
 | Scenario                       | Best Approach                      |
 | ------------------------------ | ---------------------------------- |

package/src/engine/engine.js

@@ -2,6 +2,7 @@
 // 'wgpu-matrix' library, so produces many temporary vectors and matrices.
 // This is intentional, as this sample prefers readability over performance.
 import { mat4, vec3 } from 'wgpu-matrix';
+import {LOG_INFO} from './utils';
 // import Input from './input';
 
 // // Common interface for camera implementations
@@ -47,6 +48,10 @@ class CameraBase {
     mat4.copy(mat, this.matrix_);
   }
 
+  setProjection(fov = (2 * Math.PI) / 5, aspect = 1, near = 1, far = 1000) {
+    this.projectionMatrix = mat4.perspective(fov, aspect, near, far);
+  }
+
   // Returns the camera view matrix
   get view() {
     return this.view_;
@@ -135,7 +140,9 @@ export class WASDCamera extends CameraBase {
       const forward = vec3.normalize(vec3.sub(target, position));
       this.recalculateAngles(forward);
       this.position = position;
-      // console.log(`%cCamera pos: ${position}`, LOG_INFO);
+
+      this.setProjection()
+      console.log(`%cCamera constructor : ${position}`, LOG_INFO);
     }
   }
 

package/src/engine/lights.js

@@ -0,0 +1,126 @@
+import {mat4, vec3} from 'wgpu-matrix';
+
+export class SpotLight {
+  position;
+  target;
+  up;
+  direction;
+
+  viewMatrix;
+  projectionMatrix;
+  viewProjMatrix;
+
+  fov;
+  aspect;
+  near;
+  far;
+
+  innerCutoff;
+  outerCutoff;
+
+  spotlightUniformBuffer;
+
+  constructor(
+    position = vec3.create(0, 5, 10),
+    target = vec3.create(0, 0, 0),
+    fov = 45,
+    aspect = 1.0,
+    near = 0.1,
+    far = 100
+  ) {
+    this.position = position;
+    this.target = target;
+    this.up = vec3.create(0, 1, 0);
+    this.direction = vec3.normalize(vec3.subtract(target, position));
+
+    this.viewMatrix = mat4.lookAt(position, target, this.up);
+    this.projectionMatrix = mat4.perspective(
+      (fov * Math.PI) / 180,
+      aspect,
+      near,
+      far
+    );
+    this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
+
+    this.fov = fov;
+    this.aspect = aspect;
+    this.near = near;
+    this.far = far;
+
+    this.innerCutoff = Math.cos((Math.PI / 180) * 12.5);
+    this.outerCutoff = Math.cos((Math.PI / 180) * 17.5);
+  }
+
+  update() {
+    this.direction = vec3.normalize(vec3.subtract(this.target, this.position));
+    this.viewMatrix = mat4.lookAt(this.position, this.target, this.up);
+    this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
+    console.log('test light update this.position : ', this.position)
+  }
+
+  updateSceneUniforms = (sceneUniformBuffer, camera, inputHandler) => {
+
+    console.log('test camera.view ', camera.view)
+    // Update spotlight matrices
+    this.update();
+
+    const now = Date.now();
+
+    // Get camera matrices
+    camera.update(now, inputHandler()); // Your camera class should also update view/projection
+    const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
+
+    // Prepare float data
+    const sceneData = new Float32Array(16 + 16 + 4); // 2 matrices + vec3
+
+    // Light view-proj matrix
+    sceneData.set(this.viewProjMatrix, 0);
+
+    // Camera view-proj matrix
+    sceneData.set(camVP, 16);
+
+    // Light position (vec3f + padding)
+    sceneData.set(this.position, 32);
+
+    // Write to GPU
+    this.device.queue.writeBuffer(
+      sceneUniformBuffer,
+      0,
+      sceneData.buffer,
+      sceneData.byteOffset,
+      sceneData.byteLength
+    );
+
+    console.log('light.viewProj[0..3]', this.viewProjMatrix.slice(0, 4));
+    console.log('camera.vp[0..3]', camVP.slice(0, 4));
+  }
+
+  prepareBuffer(device) {
+    this.device = device;
+    this.spotlightUniformBuffer = device.createBuffer({
+      size: 16 * 4, // 64 bytes
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    const spotlightData = this.getLightDataBuffer();
+
+    device.queue.writeBuffer(
+      this.spotlightUniformBuffer,
+      0,
+      spotlightData.buffer,
+      spotlightData.byteOffset,
+      spotlightData.byteLength
+    );
+  }
+
+  getLightDataBuffer() {
+    return new Float32Array([
+      ...this.position, 0.0,
+      ...this.direction, 0.0,
+      this.innerCutoff,
+      this.outerCutoff,
+      0.0,
+      0.0,
+    ]);
+  }
+}

package/src/engine/materials.js

@@ -22,6 +22,25 @@ export default class Materials {
       magFilter: 'linear',
       minFilter: 'linear',
     });
+
+    // FX effect
+    this.postFXModeBuffer = this.device.createBuffer({
+      size: 4, // u32 = 4 bytes
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    // Dymmy buffer
+    this.dummySpotlightUniformBuffer = this.device.createBuffer({
+      size: 64, // Must match size in shader
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    this.device.queue.writeBuffer(this.dummySpotlightUniformBuffer, 0, new Float32Array(16)); 
+
+  }
+
+  updatePostFXMode(mode) {
+    const arrayBuffer = new Uint32Array([mode]);
+    this.device.queue.writeBuffer(this.postFXModeBuffer, 0, arrayBuffer);
   }
 
   async loadTex0(texturesPaths) {
@@ -190,6 +209,7 @@ export default class Materials {
             binding: 4,
             resource: this.videoSampler,
           },
+          {binding: 5, resource: {buffer: this.postFXModeBuffer}}
         ],
       });
     } else {
@@ -216,6 +236,10 @@ export default class Materials {
             binding: 4,
             resource: this.imageSampler,
           },
+          {
+            binding: 5,
+            resource: {buffer: this.lightContainer.length == 0 ? this.dummySpotlightUniformBuffer : this.lightContainer[0].spotlightUniformBuffer},
+          },
         ],
       });
     }
@@ -251,6 +275,11 @@ export default class Materials {
               visibility: GPUShaderStage.FRAGMENT,
               sampler: {type: 'filtering'}, // for video sampling
             },
+            {
+              binding: 5,
+              visibility: GPUShaderStage.FRAGMENT,
+              buffer: {type: 'uniform'},
+            }
           ]
           : [ // IMAGE
             {
@@ -266,6 +295,11 @@ export default class Materials {
               visibility: GPUShaderStage.FRAGMENT,
               sampler: {type: 'filtering'},
             },
+            {
+              binding: 5,
+              visibility: GPUShaderStage.FRAGMENT,
+              buffer: {type: 'uniform'},
+            }
           ])
       ],
     });

package/src/engine/mesh-obj.js

@@ -1,15 +1,15 @@
 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 {degToRad, genName, LOG_FUNNY_SMALL} from './utils';
 import Materials from './materials';
 import {fragmentVideoWGSL} from '../shaders/fragment.video.wgsl';
+import {createInputHandler} from './engine';
 
 export default class MEMeshObj extends Materials {
-  constructor(canvas, device, context, o) {
+  constructor(canvas, device, context, o, sceneUniformBuffer) {
     super(device);
     if(typeof o.name === 'undefined') o.name = genName(9);
     if(typeof o.raycast === 'undefined') {
@@ -30,6 +30,9 @@ export default class MEMeshObj extends Materials {
     // comes from engine not from args
     this.clearColor = "red";
 
+
+    // this.lightTest = new SpotLight();
+    // this.lightTest.prepareBuffer(this.device);
     this.video = null;
 
     // Mesh stuff - for single mesh or t-posed (fiktive-first in loading order)
@@ -47,7 +50,7 @@ export default class MEMeshObj extends Materials {
       this.drawElements = this.drawElementsAnim;
     }
 
-    this.inputHandler = createInputHandler(window, canvas);
+    this.inputHandler = null;
     this.cameras = o.cameras;
 
     this.mainCameraParams = {
@@ -55,14 +58,10 @@ export default class MEMeshObj extends Materials {
       responseCoef: o.mainCameraParams.responseCoef
     }
 
-    // touchCoordinate.enabled = true;
-
     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);
     this.rotation = new Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
     this.rotation.rotationSpeed.x = o.rotationSpeed.x;
@@ -74,7 +73,7 @@ export default class MEMeshObj extends Materials {
       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.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);
         this.modelViewProjectionMatrix = mat4.create();
         // console.log('cube added texturesPaths: ', this.texturesPaths)
         this.loadTex0(this.texturesPaths).then(() => {
@@ -235,43 +234,13 @@ export default class MEMeshObj extends Materials {
       // 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.createLayoutForRender()
-
+      this.createLayoutForRender();
       this.setupPipeline();
-      // 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',
+        // format: 'depth24plus-stencil8',
+        format: 'depth24plus',
         usage: GPUTextureUsage.RENDER_ATTACHMENT,
       });
 
@@ -290,9 +259,9 @@ export default class MEMeshObj extends Materials {
           depthClearValue: 1.0,
           depthLoadOp: 'clear',
           depthStoreOp: 'store',
-          stencilClearValue: 0,
-          stencilLoadOp: 'clear',
-          stencilStoreOp: 'store',
+          // stencilClearValue: 0,
+          // stencilLoadOp: 'clear',
+          // stencilStoreOp: 'store',
         },
       };
 
@@ -309,6 +278,9 @@ export default class MEMeshObj extends Materials {
         size: 2 * 4 * 16 + 4 * 4,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
       });
+      // cant be global
+      // console.log('sceneUniformBuffer', sceneUniformBuffer)
+      // this.sceneUniformBuffer = sceneUniformBuffer;
 
       this.sceneBindGroupForShadow = this.device.createBindGroup({
         layout: this.uniformBufferBindGroupLayout,
@@ -322,7 +294,6 @@ export default class MEMeshObj extends Materials {
         ],
       });
 
-      // --------------------------
       this.createBindGroupForRender();
 
       this.modelBindGroup = this.device.createBindGroup({
@@ -364,7 +335,9 @@ export default class MEMeshObj extends Materials {
           mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
           // console.info('NOT PHYSICS angle: ', this.rotation.angle, ' axis ', this.rotation.axis.x, ' , ', this.rotation.axis.y, ' , ', this.rotation.axis.z)
         }
-        mat4.multiply(this.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
+
+        // console.info('NOT camera.projectionMatrix: ', camera.projectionMatrix )
+        mat4.multiply(camera.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
         return this.modelViewProjectionMatrix;
       }
 
@@ -387,62 +360,16 @@ export default class MEMeshObj extends Materials {
         return modelMatrix;
       };
 
-      this.upVector = vec3.fromValues(0, 1, 0);
-      this.origin = vec3.fromValues(0, 0, 0);
-
-      this.lightPosition = vec3.fromValues(0, 0, 0);
-      this.lightViewMatrix = mat4.lookAt(this.lightPosition, this.origin, this.upVector);
-      const lightProjectionMatrix = mat4.create();
-
-      var myLMargin = 100;
-      {
-        const left = -myLMargin;
-        const right = myLMargin;
-        const bottom = -myLMargin;
-        const top = myLMargin;
-        const near = -200;
-        const far = 300;
-        mat4.ortho(left, right, bottom, top, near, far, lightProjectionMatrix);
-        // test 
-        // mat4.ortho(right, left, top, bottom, near, far, lightProjectionMatrix);
-      }
-
-      this.lightViewProjMatrix = mat4.multiply(
-        lightProjectionMatrix,
-        this.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 = this.lightViewProjMatrix; // as Float32Array;
-        this.device.queue.writeBuffer(
-          this.sceneUniformBuffer,
-          0,
-          lightMatrixData.buffer,
-          lightMatrixData.byteOffset,
-          lightMatrixData.byteLength
-        );
-
-        const lightData = this.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
-        );
-      }
+      const modelData = modelMatrix;
+      this.device.queue.writeBuffer(
+        this.modelUniformBuffer,
+        0,
+        modelData.buffer,
+        modelData.byteOffset,
+        modelData.byteLength
+      );
 
       this.shadowPassDescriptor = {
         colorAttachments: [],
@@ -463,73 +390,8 @@ export default class MEMeshObj extends Materials {
     })
   }
 
-  updateLightsTest = (position) => {
-    console.log('Update light position.', position)
-    this.lightPosition = vec3.fromValues(position[0], position[1], position[2]);
-    this.lightViewMatrix = mat4.lookAt(this.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);
-    }
-
-    this.lightViewProjMatrix = mat4.multiply(
-      lightProjectionMatrix,
-      this.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 = this.lightViewProjMatrix; // as Float32Array;
-      this.device.queue.writeBuffer(
-        this.sceneUniformBuffer,
-        0, // 0 ori
-        lightMatrixData.buffer,
-        lightMatrixData.byteOffset,
-        lightMatrixData.byteLength
-      );
-
-      const lightData = this.lightPosition;
-      this.device.queue.writeBuffer(
-        this.sceneUniformBuffer,
-        256,
-        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, // ori 1.0
-        depthLoadOp: 'clear',
-        depthStoreOp: 'store',
-      },
-    };
-
-    ///////////////////////
-  }
-
   setupPipeline = () => {
+    console.log('test >>>>>>>>>>>>>>>>>>>FORMAT>✅' + this.presentationFormat);
     this.pipeline = this.device.createRenderPipeline({
       layout: this.device.createPipelineLayout({
         bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
@@ -558,7 +420,8 @@ export default class MEMeshObj extends Materials {
       depthStencil: {
         depthWriteEnabled: true,
         depthCompare: 'less',
-        format: 'depth24plus-stencil8',
+        // format: 'depth24plus-stencil8',
+        format: 'depth24plus',
       },
       primitive: this.primitive,
     });
@@ -586,7 +449,6 @@ export default class MEMeshObj extends Materials {
     renderPass.drawIndexed(this.indexCount);
   }
 
-  // test
   createGPUBuffer(dataArray, usage) {
     if(!dataArray || typeof dataArray.length !== 'number') {
       throw new Error('Invalid data array passed to createGPUBuffer');
@@ -613,7 +475,6 @@ export default class MEMeshObj extends Materials {
     return buffer;
   }
 
-
   updateMeshListBuffers() {
     for(const key in this.objAnim.meshList) {
       const mesh = this.objAnim.meshList[key];

package/src/shaders/fragment.video.wgsl.js

@@ -12,6 +12,8 @@ struct Scene {
 @group(0) @binding(3) var meshTexture: texture_external;
 @group(0) @binding(4) var meshSampler: sampler;
 
+@group(0) @binding(5) var<uniform> postFXMode: u32;
+
 // ❌ No binding(4) here!
 
 struct FragmentInput {
@@ -45,7 +47,37 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
 
   // ✅ Correct way to sample video texture
   let textureColor = textureSampleBaseClampToEdge(meshTexture, meshSampler, input.uv);
+  let color: vec4f = vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
+
+   switch (postFXMode) {
+    case 0: {
+      // Default
+      return color;
+    }
+    case 1: {
+      // Invert
+      return vec4f(1.0 - color.rgb, color.a);
+    }
+    case 2: {
+      // Grayscale
+      let gray = dot(color.rgb, vec3f(0.299, 0.587, 0.114));
+      return vec4f(vec3f(gray), color.a);
+    }
+    case 3: {
+      // Chroma Key
+      let keyColor = vec3f(0.0, 1.0, 0.0);
+      let threshold = 0.3;
+      let diff = distance(color.rgb, keyColor);
+      if (diff < threshold) {
+        return vec4f(0.0, 0.0, 0.0, 0.0);
+      }
+      return color;
+    }
+    default: {
+      return color;
+    }
+  }
 
-  return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
+  // return color;
 }
 `;

package/src/shaders/fragment.wgsl.js

@@ -4,6 +4,17 @@ struct Scene {
   lightViewProjMatrix : mat4x4f,
   cameraViewProjMatrix : mat4x4f,
   lightPos : vec3f,
+  padding : f32, // Required for alignment
+}
+
+struct SpotLight {
+  position: vec3f,
+  _pad1: f32,
+  direction: vec3f,
+  _pad2: f32,
+  innerCutoff: f32,
+  outerCutoff: f32,
+  _pad3: vec2f,
 }
 
 @group(0) @binding(0) var<uniform> scene : Scene;
@@ -11,6 +22,7 @@ struct Scene {
 @group(0) @binding(2) var shadowSampler: sampler_comparison;
 @group(0) @binding(3) var meshTexture: texture_2d<f32>;
 @group(0) @binding(4) var meshSampler: sampler;
+@group(0) @binding(5) var<uniform> spotlight: SpotLight;
 
 struct FragmentInput {
   @location(0) shadowPos : vec3f,
@@ -22,16 +34,22 @@ struct FragmentInput {
 const albedo = vec3f(0.9);
 const ambientFactor = 0.7;
 
+fn calculateSpotlightFactor(light: SpotLight, fragPos: vec3f) -> f32 {
+  let L = normalize(light.position - fragPos);
+  let theta = dot(L, normalize(-light.direction));
+  let epsilon = light.innerCutoff - light.outerCutoff;
+  let intensity = clamp((theta - light.outerCutoff) / epsilon, 0.0, 1.0);
+  return intensity;
+}
+
 @fragment
 fn main(input : FragmentInput) -> @location(0) vec4f {
-  // Percentage-closer filtering. Sample texels in the region
-  // to smooth the result.
+  // Shadow PFC
   var visibility = 0.0;
-  let oneOverShadowDepthTextureSize = 1.0 / shadowDepthTextureSize;
+  let oneOverSize = 1.0 / shadowDepthTextureSize;
   for (var y = -1; y <= 1; y++) {
     for (var x = -1; x <= 1; x++) {
-      let offset = vec2f(vec2(x, y)) * oneOverShadowDepthTextureSize;
-
+      let offset = vec2f(vec2(x, y)) * oneOverSize;
       visibility += textureSampleCompare(
         shadowMap, shadowSampler,
         input.shadowPos.xy + offset, input.shadowPos.z - 0.007
@@ -39,12 +57,19 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
     }
   }
   visibility /= 9.0;
-  let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), normalize(input.fragNorm)), 0.0);
-  let lightingFactor = min(ambientFactor + visibility * lambertFactor, 1.0);
-  let textureColor = textureSample(meshTexture, meshSampler, input.uv);
-
-  return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
-  // return vec4f(input.fragNorm * 0.5 + 0.5, 1)
-  // return vec4f(input.uv, 0, 1)
-  // return vec4(textureColor.rgb , 0.5);
-}`
+
+  // Lambert
+  let norm = normalize(input.fragNorm);
+  let lightDir = normalize(scene.lightPos - input.fragPos);
+  let lambert = max(dot(norm, lightDir), 0.0);
+
+  // Spotlight effect
+  let spotlightFactor = calculateSpotlightFactor(spotlight, input.fragPos);
+
+  // Combine
+  let lightIntensity = ambientFactor + lambert * visibility * spotlightFactor;
+  let texColor = textureSample(meshTexture, meshSampler, input.uv);
+
+  return vec4f(texColor.rgb * lightIntensity * albedo, 1.0);
+}
+`

package/src/world.js

@@ -2,18 +2,19 @@ import {vec3} from "wgpu-matrix";
 import MEBall from "./engine/ball.js";
 import MECube from './engine/cube.js';
 import {ArcballCamera, WASDCamera} from "./engine/engine.js";
-import MEMesh from "./engine/mesh.js";
+import {createInputHandler} from "./engine/engine.js";
 import MEMeshObj from "./engine/mesh-obj.js";
 import MatrixAmmo from "./physics/matrix-ammo.js";
 import {LOG_WARN, genName, mb, scriptManager, urlQuery} from "./engine/utils.js";
 import {MultiLang} from "./multilang/lang.js";
 import {MatrixSounds} from "./sounds/sounds.js";
 import {play} from "./engine/loader-obj.js";
+import {SpotLight} from "./engine/lights.js";
 
 export default class MatrixEngineWGPU {
 
   mainRenderBundle = [];
-  rbContainer = [];
+  lightContainer = [];
   frame = () => {};
 
   entityHolder = [];
@@ -131,11 +132,23 @@ export default class MatrixEngineWGPU {
       this.frame = this.framePassPerObject;
     }
 
+    // Global SCENE BUFFER
+    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.inputHandler = createInputHandler(window, canvas);
+
     this.run(callback)
   };
 
   getSceneObjectByName(name) {
-    return this.mainRenderBundle.find((sceneObject) => sceneObject.name === name )
+    return this.mainRenderBundle.find((sceneObject) => sceneObject.name === name)
   }
 
   // Not in use for now
@@ -238,27 +251,15 @@ export default class MatrixEngineWGPU {
     this.mainRenderBundle.push(myBall1);
   }
 
-  // Not in use for now
-  addMesh = (o) => {
-    if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
-    if(typeof o.rotation === 'undefined') {o.rotation = {x: 0, y: 0, z: 0}}
-    if(typeof o.rotationSpeed === 'undefined') {o.rotationSpeed = {x: 0, y: 0, z: 0}}
-    if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
-    if(typeof o.mainCameraParams === 'undefined') {o.mainCameraParams = this.mainCameraParams}
-    if(typeof o.scale === 'undefined') {o.scale = 1;}
-    o.entityArgPass = this.entityArgPass;
-    o.cameras = this.cameras;
-    if(typeof o.name === 'undefined') {o.name = 'random' + Math.random();}
-    if(typeof o.mesh === 'undefined') {
-      throw console.error('arg mesh is empty...');
-      return;
-    }
-    console.log('Mesh procedure', o)
-    let myMesh1 = new MEMesh(this.canvas, this.device, this.context, o)
-    this.mainRenderBundle.push(myMesh1);
+  addLight(o) {
+    // test light global; entity
+    let newLight = new SpotLight();
+    newLight.prepareBuffer(this.device);
+    this.lightContainer.push(newLight);
+    console.log('Add light : ', newLight);
   }
 
-  addMeshObj = (o , clearColor=this.options.clearColor) => {
+  addMeshObj = (o, clearColor = this.options.clearColor) => {
     if(typeof o.name === 'undefined') {o.name = genName(9)}
     if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
     if(typeof o.rotation === 'undefined') {o.rotation = {x: 0, y: 0, z: 0}}
@@ -311,7 +312,9 @@ export default class MatrixEngineWGPU {
         }
       }
     }
-    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o);
+    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o, this.sceneUniformBuffer);
+    myMesh1.lightContainer = this.lightContainer;
+    myMesh1.inputHandler = this.inputHandler;
     myMesh1.clearColor = clearColor;
     if(o.physics.enabled == true) {
       this.matrixAmmo.addPhysics(myMesh1, o.physics)
@@ -330,31 +333,56 @@ export default class MatrixEngineWGPU {
   }
 
   frameSinglePass = () => {
-    if(typeof this.mainRenderBundle == 'undefined') return;
+    if(typeof this.mainRenderBundle == 'undefined' || this.mainRenderBundle.length == 0) {
+      setTimeout(() => {requestAnimationFrame(this.frame)}, 200);
+      return;
+    }
     try {
       let shadowPass = null;
       let renderPass;
       let commandEncoder = this.device.createCommandEncoder();
 
-      this.mainRenderBundle.forEach((meItem, index) => {
-        meItem.position.update();
-      })
+      // 1️⃣ Update light data (position, direction, uniforms)
+      for(const light of this.lightContainer) {
+        // light.updateSceneUniforms(this.sceneUniformBuffer, this.cameras.WASD, this.inputHandler);
+      }
 
-      if (this.matrixAmmo) this.matrixAmmo.updatePhysics();
+      this.mainRenderBundle.forEach((meItem, index) => {meItem.position.update()})
+      if(this.matrixAmmo) this.matrixAmmo.updatePhysics();
+
+      // no cast WORKING
+      // this.mainRenderBundle.forEach((meItem, index) => {
+      //   meItem.draw(commandEncoder);
+
+      //   shadowPass = commandEncoder.beginRenderPass(meItem.shadowPassDescriptor);
+      //   shadowPass.setPipeline(meItem.shadowPipeline);
+      //   meItem.drawShadows(shadowPass);
+      //   shadowPass.end();
+      // })
+
+      // cast!
+      const firstItem = this.mainRenderBundle[0];
+      shadowPass = commandEncoder.beginRenderPass(firstItem.shadowPassDescriptor);
+      shadowPass.setPipeline(firstItem.shadowPipeline);
+      for(const meItem of this.mainRenderBundle) {
+        // meItem.draw(commandEncoder);
+        meItem.drawShadows(shadowPass); // Draw ALL objects
+      }
+      shadowPass.end();
 
       this.mainRenderBundle.forEach((meItem, index) => {
-        meItem.draw(commandEncoder);
+        if(index == 0) {
 
-        shadowPass = commandEncoder.beginRenderPass(meItem.shadowPassDescriptor);
-        shadowPass.setPipeline(meItem.shadowPipeline);
-        meItem.drawShadows(shadowPass);
-        shadowPass.end();
-      })
+          // meItem. updateSceneUniforms
+          meItem.draw(commandEncoder);
+
+          meItem.renderPassDescriptor.colorAttachments[0].view =
+            this.context.getCurrentTexture().createView();
 
-      this.mainRenderBundle.forEach((meItem, index) => {
-        if(index == 0) {
           renderPass = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
           renderPass.setPipeline(meItem.pipeline);
+        } else {
+          meItem.draw(commandEncoder);
         }
       })