matrix-engine-wgpu 1.3.16 → 1.3.18

package/src/multilang/lang.js

@@ -0,0 +1,35 @@
+import {LOG_MATRIX} from "../engine/utils";
+
+export class MultiLang {
+
+  constructor() {
+    addEventListener('updateLang', () => {
+      console.log('Multilang updated.')
+      this.update();
+    })
+  }
+
+  update = function() {
+    var allTranDoms = document.querySelectorAll('[data-label]');
+    allTranDoms.forEach((i) => {
+      i.innerHTML = this.get[i.getAttribute('data-label')]
+    })
+  }
+
+  loadMultilang = async function(lang = 'en') {
+    lang = 'res/multilang/' + lang + '.json';
+    console.info(`%cMultilang: ${lang}` , LOG_MATRIX);
+    try {
+      const r = await fetch(lang, {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        }
+      });
+      return await r.json()
+    } catch(err) {
+      console.warn('Not possible to access multilang json asset! Err => ', err);
+      return {}
+    }
+  }
+}

package/src/physics/matrix-ammo.js

@@ -0,0 +1,363 @@
+import {LOG_FUNNY, degToRad, quaternion_rotation_matrix, radToDeg, scriptManager} from "../engine/utils";
+
+export default class MatrixAmmo {
+  constructor() {
+    // THIS PATH IS PATH FROM PUBLIC FINAL FOLDER
+    scriptManager.LOAD(
+      "https://maximumroulette.com/apps/megpu/ammo.js",
+      "ammojs",
+      undefined,
+      undefined,
+      this.init,
+    );
+    this.lastRoll = '';
+    this.presentScore = '';
+    this.speedUpSimulation = 1;
+  }
+
+  init = () => {
+    Ammo().then(Ammo => {
+      // Physics variables
+      this.dynamicsWorld = null;
+      this.rigidBodies = [];
+      this.Ammo = Ammo;
+      this.lastUpdate = 0
+      console.log("%c Ammo core loaded.", LOG_FUNNY);
+      this.initPhysics();
+      // simulate async
+      setTimeout(() => {
+        dispatchEvent(new CustomEvent('AmmoReady', {}))
+      } , 200)
+    });
+  };
+
+  initPhysics() {
+    let Ammo = this.Ammo;
+    // Physics configuration
+    var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(),
+      dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration),
+      overlappingPairCache = new Ammo.btDbvtBroadphase(),
+      solver = new Ammo.btSequentialImpulseConstraintSolver();
+
+    this.dynamicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
+    this.dynamicsWorld.setGravity(new Ammo.btVector3(0, -10, 0));
+
+    var groundShape = new Ammo.btBoxShape(new Ammo.btVector3(70, 1, 70)),
+      groundTransform = new Ammo.btTransform();
+    groundTransform.setIdentity();
+    groundTransform.setOrigin(new Ammo.btVector3(0, -4.45, 0));
+    var mass = 0,
+      isDynamic = (mass !== 0),
+      localInertia = new Ammo.btVector3(0, 0, 0);
+
+    if(isDynamic) groundShape.calculateLocalInertia(mass, localInertia);
+
+    var myMotionState = new Ammo.btDefaultMotionState(groundTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, groundShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+    body.name = 'ground';
+    this.ground = body;
+    this.dynamicsWorld.addRigidBody(body);
+    this.detectCollision()
+  }
+
+  addPhysics(MEObject, pOptions) {
+    if(pOptions.geometry == "Sphere") {
+      this.addPhysicsSphere(MEObject, pOptions)
+    } else if(pOptions.geometry == "Cube") {
+      this.addPhysicsBox(MEObject, pOptions)
+    }
+  }
+
+  addPhysicsSphere(MEObject, pOptions) {
+    const FLAGS = {
+      TEST_NIDZA: 3,
+      CF_KINEMATIC_OBJECT: 2
+    }
+
+    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();
+    var mass = 1;
+    var localInertia = new Ammo.btVector3(0, 0, 0);
+    colShape.calculateLocalInertia(mass, localInertia);
+    startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+
+    var myMotionState = new Ammo.btDefaultMotionState(startTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+
+    if(pOptions.mass == 0 && typeof pOptions.state == 'undefined' && typeof pOptions.collide == 'undefined') {
+      body.setActivationState(2)
+      body.setCollisionFlags(FLAGS.CF_KINEMATIC_OBJECT);
+      // console.log('what is pOptions.mass and state is 2 ....', pOptions.mass)
+    } else if(typeof pOptions.collide != 'undefined' && pOptions.collide == false) {
+      // idea not work for now - eliminate collide effect
+      body.setActivationState(4)
+      body.setCollisionFlags(FLAGS.TEST_NIDZA);
+    } else {
+      body.setActivationState(4)
+    }
+
+    body.name = pOptions.name;
+    MEObject.itIsPhysicsBody = true;
+    body.MEObject = MEObject;
+    this.dynamicsWorld.addRigidBody(body);
+    this.rigidBodies.push(body);
+    return body;
+  }
+
+  addPhysicsBox(MEObject, pOptions) {
+    const FLAGS = {
+      TEST_NIDZA: 3,
+      CF_KINEMATIC_OBJECT: 2
+    }
+
+    let Ammo = this.Ammo;
+    // improve this - scale by comp
+    var colShape = new Ammo.btBoxShape(new Ammo.btVector3(pOptions.scale[0], pOptions.scale[1], pOptions.scale[2])),
+      startTransform = new Ammo.btTransform();
+    startTransform.setIdentity();
+    var mass = pOptions.mass;
+    var localInertia = new Ammo.btVector3(0, 0, 0);
+    colShape.calculateLocalInertia(mass, localInertia);
+    startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+    // console.log('startTransform.setRotation', startTransform.setRotation)
+    var t = startTransform.getRotation()
+    t.setX(degToRad(pOptions.rotation.x))
+    t.setY(degToRad(pOptions.rotation.y))
+    t.setZ(degToRad(pOptions.rotation.z))
+    startTransform.setRotation(t)
+
+    var myMotionState = new Ammo.btDefaultMotionState(startTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+
+    if(pOptions.mass == 0 && typeof pOptions.state == 'undefined' && typeof pOptions.collide == 'undefined') {
+      body.setActivationState(2)
+      body.setCollisionFlags(FLAGS.CF_KINEMATIC_OBJECT);
+      // console.log('what is pOptions.mass and state is 2 ....', pOptions.mass)
+    } else if(typeof pOptions.collide != 'undefined' && pOptions.collide == false) {
+      // idea not work for now - eliminate collide effect
+      body.setActivationState(4)
+      body.setCollisionFlags(FLAGS.TEST_NIDZA);
+    } else {
+      body.setActivationState(4)
+    }
+    body.name = pOptions.name;
+    MEObject.itIsPhysicsBody = true;
+    body.MEObject = MEObject;
+    this.dynamicsWorld.addRigidBody(body);
+    this.rigidBodies.push(body);
+    return body;
+  }
+
+  setBodyVelocity(body, x, y, z) {
+    var tbv30 = new Ammo.btVector3();
+    tbv30.setValue(x, y, z);
+    body.setLinearVelocity(tbv30);
+  }
+
+  setKinematicTransform(body, x, y, z, rx, ry, rz) {
+    if(typeof rx == 'undefined') {var rx = 0;}
+    if(typeof ry == 'undefined') {var ry = 0;}
+    if(typeof rz == 'undefined') {var rz = 0;}
+    let pos = new Ammo.btVector3();
+    // let quat = new Ammo.btQuaternion();
+    pos = body.getWorldTransform().getOrigin();
+    let localRot = body.getWorldTransform().getRotation();
+    // console.log('pre pos x:', pos.x(), " y : ", pos.y(), " z:", pos.z())
+    pos.setX(pos.x() + x)
+    pos.setY(pos.y() + y)
+    pos.setZ(pos.z() + z)
+    localRot.setX(rx)
+    localRot.setY(ry)
+    localRot.setZ(rz)
+    let physicsBody = body;
+    let ms = physicsBody.getMotionState();
+    if(ms) {
+      var tmpTrans = new Ammo.btTransform();
+      tmpTrans.setIdentity();
+      tmpTrans.setOrigin(pos);
+      tmpTrans.setRotation(localRot);
+      ms.setWorldTransform(tmpTrans);
+    }
+  }
+
+  getBodyByName(name) {
+    var b = null;
+    this.rigidBodies.forEach((item, index, array) => {
+      if(item.name == name) {
+        b = array[index];
+      }
+    });
+    return b;
+  }
+
+  getNameByBody(body) {
+    var b = null;
+    this.rigidBodies.forEach((item, index, array) => {
+      if(item.kB == body.kB) {
+        b = array[index].name;
+      }
+    });
+    return b;
+  }
+
+  deactivatePhysics(body) {
+    const CF_KINEMATIC_OBJECT = 2;
+    const DISABLE_DEACTIVATION = 4;
+    // 1. Remove from world
+    this.dynamicsWorld.removeRigidBody(body);
+    // 2. Set body to kinematic
+    const flags = body.getCollisionFlags();
+    body.setCollisionFlags(flags | CF_KINEMATIC_OBJECT);
+    body.setActivationState(DISABLE_DEACTIVATION); // no auto-wakeup
+    // 3. Clear motion
+    const zero = new Ammo.btVector3(0, 0, 0);
+    body.setLinearVelocity(zero);
+    body.setAngularVelocity(zero);
+    // 4. Reset transform to current position (optional — preserves pose)
+    const currentTransform = body.getWorldTransform();
+    body.setWorldTransform(currentTransform);
+    body.getMotionState().setWorldTransform(currentTransform);
+    // 5. Add back to physics world
+    this.matrixAmmo.dynamicsWorld.addRigidBody(body);
+    // 6. Mark it manually (logic flag)
+    body.isKinematic = true;
+  }
+
+  detectCollision() {
+    // console.log('override this')
+    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();
+      // this.rigidBodies.forEach((item) => {
+      //   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)
+      }
+    }
+  }
+
+  updatePhysics() {
+    if(typeof Ammo === 'undefined') return;
+    const trans = new Ammo.btTransform();
+    const transform = new Ammo.btTransform();
+
+    this.rigidBodies.forEach(function(body) {
+      if(body.isKinematic) {
+        transform.setIdentity();
+        transform.setOrigin(new Ammo.btVector3(
+          body.MEObject.position.x,
+          body.MEObject.position.y,
+          body.MEObject.position.z
+        ));
+        const quat = new Ammo.btQuaternion();
+        quat.setRotation(
+          new Ammo.btVector3(
+            body.MEObject.rotation.axis.x,
+            body.MEObject.rotation.axis.y,
+            body.MEObject.rotation.axis.z
+          ),
+          degToRad(body.MEObject.rotation.angle)
+        );
+        transform.setRotation(quat);
+
+        body.setWorldTransform(transform);
+        const ms = body.getMotionState();
+        if(ms) ms.setWorldTransform(transform);
+      }
+    });
+
+    Ammo.destroy(transform);
+
+    // Step simulation AFTER setting kinematic transforms
+    const timeStep = 1 / 60;
+    const maxSubSteps = 10;
+
+    for(let i = 0;i < this.speedUpSimulation;i++) {
+      this.dynamicsWorld.stepSimulation(timeStep, maxSubSteps);
+    }
+
+    this.rigidBodies.forEach(function(body) {
+      if(!body.isKinematic && body.getMotionState()) {
+        body.getMotionState().getWorldTransform(trans);
+
+        const _x = +trans.getOrigin().x().toFixed(2);
+        const _y = +trans.getOrigin().y().toFixed(2);
+        const _z = +trans.getOrigin().z().toFixed(2);
+
+        body.MEObject.position.setPosition(_x, _y, _z);
+
+        const rot = trans.getRotation();
+        const rotAxis = rot.getAxis();
+        rot.normalize();
+
+        body.MEObject.rotation.axis.x = rotAxis.x();
+        body.MEObject.rotation.axis.y = rotAxis.y();
+        body.MEObject.rotation.axis.z = rotAxis.z();
+        body.MEObject.rotation.matrixRotation = quaternion_rotation_matrix(rot);
+        body.MEObject.rotation.angle = radToDeg(parseFloat(rot.getAngle().toFixed(2)));
+      }
+    });
+
+    Ammo.destroy(trans);
+    this.detectCollision();
+  }
+}

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

@@ -0,0 +1,83 @@
+export let fragmentVideoWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
+
+struct Scene {
+  lightViewProjMatrix : mat4x4f,
+  cameraViewProjMatrix : mat4x4f,
+  lightPos : vec3f,
+}
+
+@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_external;
+@group(0) @binding(4) var meshSampler: sampler;
+
+@group(0) @binding(5) var<uniform> postFXMode: u32;
+
+// ❌ No binding(4) here!
+
+struct FragmentInput {
+  @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;
+
+@fragment
+fn main(input : FragmentInput) -> @location(0) vec4f {
+  // Shadow filtering
+  var visibility = 0.0;
+  let oneOverShadowDepthTextureSize = 1.0 / shadowDepthTextureSize;
+  for (var y = -1; y <= 1; y++) {
+    for (var x = -1; x <= 1; x++) {
+      let offset = vec2f(vec2(x, y)) * oneOverShadowDepthTextureSize;
+      visibility += textureSampleCompare(
+        shadowMap, shadowSampler,
+        input.shadowPos.xy + offset, input.shadowPos.z - 0.007
+      );
+    }
+  }
+  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);
+
+  // ✅ 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 color;
+}
+`;

package/src/shaders/fragment.wgsl.js

@@ -0,0 +1,75 @@
+export let fragmentWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
+
+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;
+@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;
+
+struct FragmentInput {
+  @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;
+
+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 {
+  // 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
+      );
+    }
+  }
+  visibility /= 9.0;
+
+  // 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/shaders/shaders.js

@@ -0,0 +1,51 @@
+/**
+ * @description
+ * UNIT Texures -
+ * Good for performance
+ */
+export const UNLIT_SHADER = `struct Uniforms {
+  viewProjectionMatrix : mat4x4f
+}
+@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+
+@group(1) @binding(0) var<uniform> modelMatrix : mat4x4f;
+
+struct VertexInput {
+  @location(0) position : vec4f,
+  @location(1) normal : vec3f,
+  @location(2) uv : vec2f
+}
+
+struct VertexOutput {
+  @builtin(position) position : vec4f,
+  @location(0) normal: vec3f,
+  @location(1) uv : vec2f,
+}
+
+@vertex
+fn vertexMain(input: VertexInput) -> VertexOutput {
+  var output : VertexOutput;
+  output.position = uniforms.viewProjectionMatrix * modelMatrix * input.position;
+  output.normal = normalize((modelMatrix * vec4(input.normal, 0)).xyz);
+  output.uv = input.uv;
+  return output;
+}
+
+@group(1) @binding(1) var meshSampler: sampler;
+@group(1) @binding(2) var meshTexture: texture_2d<f32>;
+
+// Static directional lighting
+const lightDir = vec3f(0, 1, 0);
+const dirColor = vec3(1);
+const ambientColor = vec3f(0.05);
+
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+  let textureColor = textureSample(meshTexture, meshSampler, input.uv);
+
+  // Very simplified lighting algorithm.
+  let lightColor = saturate(ambientColor + max(dot(input.normal, lightDir), 0.0) * dirColor);
+
+  return vec4f(textureColor.rgb * lightColor, textureColor.a);
+}`;
+

package/src/shaders/standard-matrix-engine-shaders/standard-matrix-engine-fs.glsl

@@ -0,0 +1,56 @@
+#version 300 es
+precision mediump float;
+in vec2 vTextureCoord;
+in vec3 vLightWeighting;
+uniform sampler2D uSampler;
+uniform sampler2D uSampler1;
+uniform sampler2D uSampler2;
+uniform sampler2D uSampler3;
+uniform sampler2D uSampler4;
+uniform sampler2D uSampler5;
+// The CubeMap texture.
+uniform samplerCube u_texture;
+// cube map
+// in vec3 v_normal_cubemap;
+uniform float numberOfsamplers;
+
+// Spot
+// Passed in from the vertex shader.
+in vec3 v_normal;
+in vec3 v_surfaceToLight;
+in vec3 v_surfaceToView;
+uniform vec4 u_color;
+uniform float u_shininess;
+uniform vec3 u_lightDirection;
+uniform float u_innerLimit;
+uniform float u_outerLimit;
+
+out vec4 outColor;
+
+void main(void) {
+  // because v_normal is a varying it's interpolated
+  // so it will not be a unit vector. Normalizing it
+  // will make it a unit vector again
+  vec3 normal = normalize(v_normal);
+
+  vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
+  vec3 surfaceToViewDirection = normalize(v_surfaceToView);
+  vec3 halfVector = normalize(surfaceToLightDirection + surfaceToViewDirection);
+
+  float dotFromDirection = dot(surfaceToLightDirection, -u_lightDirection);
+  float limitRange = u_innerLimit - u_outerLimit;
+  float inLight = clamp((dotFromDirection - u_outerLimit) / limitRange, 0.0f, 1.0f);
+  float light = inLight * dot(normal, surfaceToLightDirection);
+  float specular = inLight * pow(dot(normal, halfVector), u_shininess);
+
+  // Directioin vs uAmbientColor
+  vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t));
+  vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s, vTextureCoord.t));
+  vec4 testUnused = texture2D(u_texture, vec2(vTextureCoord.s, vTextureCoord.t));
+
+  outColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
+  // Lets multiply just the color portion (not the alpha)
+  outColor.rgb *= light;
+  outColor.rgb += specular;
+}