matrix-engine-wgpu 1.3.19 → 1.4.0

package/readme.md

@@ -162,7 +162,7 @@ Features
 
 ✅ Supports multiple lights (attach as many as you want to the scene)
 
-✅ Shadow-ready (spotlight shadows implemented, extendable to others)
+✅ Shadow-ready (spotlight0 shadows implemented, extendable to others)
 
 
 ### Object Interaction (Raycasting)

package/src/engine/lights.js

@@ -30,11 +30,7 @@ export class SpotLight {
     inputHandler,
     position = vec3.create(0, 5, -10),
     target = vec3.create(0, 0, 0),
-    fov = 45,
-    aspect = 1.0,
-    near = 0.1,
-    far = 200
-  ) {
+    fov = 45, aspect = 1.0, near = 0.1, far = 200) {
     this.camera = camera;
     this.inputHandler = inputHandler;
 
@@ -42,6 +38,8 @@ export class SpotLight {
     this.target = target;
     this.up = vec3.create(0, 1, 0);
     this.direction = vec3.normalize(vec3.subtract(target, position));
+    this.intensity = 1.0;
+    this.color = vec3.create(1.0, 1.0, 1.0); // white
 
     this.viewMatrix = mat4.lookAt(position, target, this.up);
     this.projectionMatrix = mat4.perspective(
@@ -59,14 +57,12 @@ export class SpotLight {
 
     this.innerCutoff = Math.cos((Math.PI / 180) * 12.5);
     this.outerCutoff = Math.cos((Math.PI / 180) * 17.5);
+
+    this.ambientFactor = 0.5;
+    this.range = 200.0; // example max distance
   }
 
   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.target : ', this.target)
-    // Use the existing direction
     const target = vec3.add(this.position, this.direction);
     this.viewMatrix = mat4.lookAt(this.position, target, this.up);
     this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
@@ -92,29 +88,14 @@ export class SpotLight {
         camVP.byteLength
       );
     }
-    // const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
-    // const sceneData = new Float32Array(36); // 16 + 16 + 4
-    // sceneData.set(this.viewProjMatrix, 0);
-    // sceneData.set(camVP, 16);
-    // sceneData.set(this.position, 32);
-    // if(!this.device) {
-    //   console.warn("Device not set for SpotLight");
-    //   return;
-    // }
-    // this.device.queue.writeBuffer(
-    //   sceneUniformBuffer,
-    //   // this.spotlightUniformBuffer,
-    //   0,
-    //   sceneData.buffer,
-    //   sceneData.byteOffset,
-    //   sceneData.byteLength
-    // );
   }
 
+  // DEPLACED
   prepareBuffer(device) {
     if(!this.device) this.device = device;
     this.spotlightUniformBuffer = this.device.createBuffer({
-      size: 16 * 4, // 64 bytes
+      label: 'spotlightUniformBuffer',
+      size:  80,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     });
 
@@ -128,6 +109,7 @@ export class SpotLight {
     );
   }
 
+  // DEPLACED
   updateLightBuffer() {
     if(!this.device || !this.spotlightUniformBuffer) {return;}
     const spotlightData = this.getLightDataBuffer();
@@ -141,13 +123,18 @@ export class SpotLight {
   }
 
   getLightDataBuffer() {
-    return new Float32Array([
-      ...this.position, 0.0,
-      ...this.direction, 0.0,
-      this.innerCutoff,
-      this.outerCutoff,
-      0.0,
-      0.0,
-    ]);
+  return new Float32Array([
+    ...this.position, 0.0,
+    ...this.direction, 0.0,
+    this.innerCutoff,
+    this.outerCutoff,
+    this.intensity,
+    0.0,
+    ...this.color,
+    0.0,
+    this.range,
+    this.ambientFactor, // new
+    0.0, 0.0,           // padding
+  ]);
   }
 }

package/src/engine/materials.js

@@ -30,10 +30,10 @@ export default class Materials {
 
     // Dymmy buffer
     this.dummySpotlightUniformBuffer = this.device.createBuffer({
-      size: 64, // Must match size in shader
+      size: 80, // Must match size in shader
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     });
-    this.device.queue.writeBuffer(this.dummySpotlightUniformBuffer, 0, new Float32Array(16)); 
+    this.device.queue.writeBuffer(this.dummySpotlightUniformBuffer, 0, new Float32Array(16));
   }
 
   updatePostFXMode(mode) {
@@ -155,7 +155,7 @@ export default class Materials {
     // ✅ Now
     this.createLayoutForRender();
     this.setupPipeline();
-    setTimeout(() => this.createBindGroupForRender(), 1500);
+
   }
 
   updateVideoTexture() {
@@ -172,7 +172,6 @@ export default class Materials {
       console.warn("❗Missing res skipping...");
       return;
     }
-    // console.log('what is  this.lightContainer.length ',  this.lightContainer.length)
     if(this.isVideo == true) {
       this.sceneBindGroupForRender = this.device.createBindGroup({
         layout: this.bglForRender,
@@ -226,8 +225,8 @@ export default class Materials {
           },
           {
             binding: 5,
-            resource: {buffer: this.lightContainer.length == 0 ? this.dummySpotlightUniformBuffer : this.lightContainer[0].spotlightUniformBuffer},
-          },
+            resource: {buffer: !this.spotlightUniformBuffer ? this.dummySpotlightUniformBuffer : this.spotlightUniformBuffer},
+          }
         ],
       });
     }

package/src/engine/mesh-obj.js

@@ -10,16 +10,12 @@ import {fragmentVideoWGSL} from '../shaders/fragment.video.wgsl';
 export default class MEMeshObj extends Materials {
   constructor(canvas, device, context, o, sceneUniformBuffer) {
     super(device);
-    if(typeof o.name === 'undefined') o.name = genName(9);
+    if(typeof o.name === 'undefined') o.name = genName(3);
     if(typeof o.raycast === 'undefined') {
-      this.raycast = {
-        enabled: false,
-        radius: 2
-      };
+      this.raycast = {enabled: false, radius: 2};
     } else {
       this.raycast = o.raycast;
     }
-
     this.name = o.name;
     this.done = false;
     this.device = device;
@@ -45,7 +41,6 @@ export default class MEMeshObj extends Materials {
 
     this.inputHandler = null;
     this.cameras = o.cameras;
-
     this.mainCameraParams = {
       type: o.mainCameraParams.type,
       responseCoef: o.mainCameraParams.responseCoef
@@ -65,7 +60,6 @@ export default class MEMeshObj extends Materials {
     this.runProgram = () => {
       return new Promise(async (resolve) => {
         this.shadowDepthTextureSize = 1024;
-        // const aspect = canvas.width / canvas.height;
         this.modelViewProjectionMatrix = mat4.create();
         this.loadTex0(this.texturesPaths).then(() => {
           resolve()
@@ -74,7 +68,6 @@ export default class MEMeshObj extends Materials {
     }
 
     this.runProgram().then(() => {
-      // const aspect = canvas.width / canvas.height;
       this.context.configure({
         device: this.device,
         format: this.presentationFormat,
@@ -395,20 +388,21 @@ export default class MEMeshObj extends Materials {
   }
 
   setupPipeline = () => {
-    console.log('test >>>>>>>>>>>>>>>>>>>FORMAT>✅' + this.presentationFormat);
+    console.log('Set Pipeline✅');
     this.pipeline = this.device.createRenderPipeline({
+      label: 'Mesh Pipeline ✅',
       layout: this.device.createPipelineLayout({
         bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
       }),
       vertex: {
-        entryPoint: 'main', // ✅ Add this
+        entryPoint: 'main',
         module: this.device.createShaderModule({
           code: vertexWGSL,
         }),
         buffers: this.vertexBuffers,
       },
       fragment: {
-        entryPoint: 'main', // ✅ Add this
+        entryPoint: 'main',
         module: this.device.createShaderModule({
           code: (this.isVideo == true ? fragmentVideoWGSL : fragmentWGSL),
         }),
@@ -424,7 +418,6 @@ export default class MEMeshObj extends Materials {
       depthStencil: {
         depthWriteEnabled: true,
         depthCompare: 'less',
-        // format: 'depth24plus-stencil8',
         format: 'depth24plus',
       },
       primitive: this.primitive,
@@ -432,17 +425,7 @@ export default class MEMeshObj extends Materials {
   }
 
   draw = () => {
-    // This code -> light follow camera. can be used like options later!
-    // 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();
-
-    // test 
     if(this.done == false) return;
-
     // Per-object model matrix only
     const modelMatrix = this.getModelMatrix(this.position);
     this.device.queue.writeBuffer(
@@ -452,7 +435,6 @@ export default class MEMeshObj extends Materials {
       modelMatrix.byteOffset,
       modelMatrix.byteLength
     );
-
     // Acquire swapchain view for the pass
     this.renderPassDescriptor.colorAttachments[0].view =
       this.context.getCurrentTexture().createView();
@@ -516,7 +498,6 @@ export default class MEMeshObj extends Materials {
       });
       new Float32Array(mesh.vertexNormalsBuffer.getMappedRange()).set(mesh.vertexNormals);
       mesh.vertexNormalsBuffer.unmap();
-
       // UVs
       mesh.vertexTexCoordsBuffer = this.device.createBuffer({
         size: mesh.textures.length * Float32Array.BYTES_PER_ELEMENT,
@@ -525,7 +506,6 @@ export default class MEMeshObj extends Materials {
       });
       new Float32Array(mesh.vertexTexCoordsBuffer.getMappedRange()).set(mesh.textures);
       mesh.vertexTexCoordsBuffer.unmap();
-
       // Indices
       const indexCount = mesh.indices.length;
       const indexSize = Math.ceil(indexCount * Uint16Array.BYTES_PER_ELEMENT / 4) * 4;

package/src/physics/matrix-ammo.js

@@ -76,7 +76,6 @@ export default class MatrixAmmo {
     }
 
     let Ammo = this.Ammo;
-    console.log(pOptions.radius + "<<pOptions.radius")
     var colShape = new Ammo.btSphereShape(Array.isArray(pOptions.radius) ? pOptions.radius[0] : pOptions.radius),
       startTransform = new Ammo.btTransform();
     startTransform.setIdentity();
@@ -234,10 +233,8 @@ export default class MatrixAmmo {
     return;
     this.lastRoll = '';
     this.presentScore = '';
-
     let dispatcher = this.dynamicsWorld.getDispatcher();
     let numManifolds = dispatcher.getNumManifolds();
-
     for(let i = 0;i < numManifolds;i++) {
       let contactManifold = dispatcher.getManifoldByIndexInternal(i);
       // let numContacts = contactManifold.getNumContacts();
@@ -245,51 +242,12 @@ export default class MatrixAmmo {
       //   if(item.kB == contactManifold.getBody0().kB) {
       //     // console.log('Detected body0 =', item.name)
       //   }
-      //   if(item.kB == contactManifold.getBody1().kB) {
-      //     // console.log('Detected body1 =', item.name)
-      //   }
-      // })
-
       if(this.ground.kB == contactManifold.getBody0().kB &&
         this.getNameByBody(contactManifold.getBody1()) == 'CubePhysics1') {
         // console.log(this.ground ,'GROUND IS IN CONTACT WHO IS BODY1 ', contactManifold.getBody1())
         // console.log('GROUND IS IN CONTACT WHO IS BODY1 getNameByBody  ', this.getNameByBody(contactManifold.getBody1()))
         // CHECK ROTATION
         var testR = contactManifold.getBody1().getWorldTransform().getRotation();
-        if(Math.abs(testR.y()) < 0.00001) {
-          this.lastRoll += " 4 +";
-          this.presentScore += 4;
-          dispatchEvent(new CustomEvent('dice-1', {}));
-        }
-        if(Math.abs(testR.x()) < 0.00001) {
-          this.lastRoll += " 3 +";
-          this.presentScore += 3;
-          dispatchEvent(new CustomEvent('dice-4', {}));
-        }
-        if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
-          this.lastRoll += " 2 +";
-          this.presentScore += 2;
-          dispatchEvent(new CustomEvent('dice-6', {}));
-        }
-
-        if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
-          this.lastRoll += " 1 +";
-          this.presentScore += 1;
-          dispatchEvent(new CustomEvent('dice-2', {}));
-        }
-
-        if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
-          this.lastRoll += " 6 +";
-          this.presentScore += 6;
-          dispatchEvent(new CustomEvent('dice-5', {}));
-        }
-
-        if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
-          this.lastRoll += " 5 +";
-          this.presentScore += 5;
-          dispatchEvent(new CustomEvent('dice-3', {}));
-        }
-
         console.log('this.lastRoll = ', this.lastRoll, ' presentScore = ', this.presentScore)
       }
     }

package/src/shaders/fragment.wgsl.js

@@ -1,75 +1,107 @@
 export let fragmentWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
 
 struct Scene {
-  lightViewProjMatrix : mat4x4f,
-  cameraViewProjMatrix : mat4x4f,
-  lightPos : vec3f,
-  padding : f32, // Required for alignment
+    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,
-}
+    position    : vec3f,
+    _pad1       : f32,
+
+    direction   : vec3f,
+    _pad2       : f32,
+
+    innerCutoff : f32,
+    outerCutoff : f32,
+    intensity   : f32,
+    _pad3       : f32,
+
+    color       : vec3f,
+    _pad4       : f32,
+
+    range       : f32,
+    ambientFactor: f32, // new
+    _pad5       : vec2f, // padding to align to 16 bytes
+};
+
+const MAX_SPOTLIGHTS = 20u; // adjust as needed
 
 @group(0) @binding(0) var<uniform> scene : Scene;
 @group(0) @binding(1) var shadowMap: texture_depth_2d;
 @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;
+@group(0) @binding(5) var<uniform> spotlights: array<SpotLight, MAX_SPOTLIGHTS>;
+// @group(0) @binding(6) var<uniform> spotlight1: SpotLight;
 
 struct FragmentInput {
-  @location(0) shadowPos : vec3f,
-  @location(1) fragPos : vec3f,
-  @location(2) fragNorm : vec3f,
-  @location(3) uv : vec2f,
+    @location(0) shadowPos : vec3f,
+    @location(1) fragPos : vec3f,
+    @location(2) fragNorm : vec3f,
+    @location(3) uv : vec2f,
 }
 
 const albedo = vec3f(0.9);
-const ambientFactor = 0.7;
+// 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;
+    let L = normalize(light.position - fragPos);
+    let theta = dot(L, normalize(-light.direction));
+    let epsilon = light.innerCutoff - light.outerCutoff;
+    return clamp((theta - light.outerCutoff) / epsilon, 0.0, 1.0);
+}
+
+fn computeSpotLight(light: SpotLight, normal: vec3f, fragPos: vec3f, viewDir: vec3f) -> vec3f {
+    let L = light.position - fragPos;
+    let distance = length(L);
+    let lightDir = normalize(L);
+
+    let spotFactor = calculateSpotlightFactor(light, fragPos);
+    let atten = clamp(1.0 - (distance / light.range), 0.0, 1.0);
+
+    let diff = max(dot(normal, lightDir), 0.0);
+    let halfwayDir = normalize(lightDir + viewDir);
+    let spec = pow(max(dot(normal, halfwayDir), 0.0), 32.0);
+
+    let diffuse  = diff * light.color * light.intensity * atten;
+    let specular = spec * light.color * light.intensity * atten;
+
+    return (diffuse + specular) * spotFactor;
 }
 
 @fragment
 fn main(input : FragmentInput) -> @location(0) vec4f {
-  // Shadow PFC
-  var visibility = 0.0;
-  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)) * oneOverSize;
-      visibility += textureSampleCompare(
-        shadowMap, shadowSampler,
-        input.shadowPos.xy + offset, input.shadowPos.z - 0.007
-      );
+    // Shadow PCF
+    var visibility = 0.0;
+    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)) * oneOverSize;
+            visibility += textureSampleCompare(
+                shadowMap, shadowSampler,
+                input.shadowPos.xy + offset, input.shadowPos.z - 0.007
+            );
+        }
     }
-  }
-  visibility /= 9.0;
+    visibility /= 9.0;
+    let norm = normalize(input.fragNorm);
+    let viewDir = normalize(scene.cameraViewProjMatrix[3].xyz - input.fragPos);
 
-  // Lambert
-  let norm = normalize(input.fragNorm);
-  let lightDir = normalize(scene.lightPos - input.fragPos);
-  let lambert = max(dot(norm, lightDir), 0.0);
+    // Spotlight contribution (diffuse + specular + cone + distance)
+    var lightContribution = vec3f(0.0);
+    var ambient = vec3f(0.0);
 
-  // Spotlight effect
-  let spotlightFactor = calculateSpotlightFactor(spotlight, input.fragPos);
+    for (var i = 0u; i < MAX_SPOTLIGHTS; i++) {
+        lightContribution += computeSpotLight(spotlights[i], norm, input.fragPos, viewDir);
+        ambient += spotlights[i].ambientFactor * spotlights[i].color;
+    }
 
-  // Combine
-  let lightIntensity = ambientFactor + lambert * visibility * spotlightFactor;
-  let texColor = textureSample(meshTexture, meshSampler, input.uv);
+    let texColor = textureSample(meshTexture, meshSampler, input.uv);
+    let finalColor = texColor.rgb * (ambient + lightContribution * visibility) * albedo;
 
-  return vec4f(texColor.rgb * lightIntensity * albedo, 1.0);
+    return vec4f(finalColor, 1.0);
 }
 `