matrix-engine-wgpu 1.0.1

package/src/engine/utils.js

@@ -0,0 +1,353 @@
+
+export const vec3 = {
+  cross(a, b, dst) {
+    dst = dst || new Float32Array(3);
+
+    const t0 = a[1] * b[2] - a[2] * b[1];
+    const t1 = a[2] * b[0] - a[0] * b[2];
+    const t2 = a[0] * b[1] - a[1] * b[0];
+
+    dst[0] = t0;
+    dst[1] = t1;
+    dst[2] = t2;
+
+    return dst;
+  },
+
+  subtract(a, b, dst) {
+    dst = dst || new Float32Array(3);
+
+    dst[0] = a[0] - b[0];
+    dst[1] = a[1] - b[1];
+    dst[2] = a[2] - b[2];
+
+    return dst;
+  },
+
+  normalize(v, dst) {
+    dst = dst || new Float32Array(3);
+
+    const length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    // make sure we don't divide by 0.
+    if (length > 0.00001) {
+      dst[0] = v[0] / length;
+      dst[1] = v[1] / length;
+      dst[2] = v[2] / length;
+    } else {
+      dst[0] = 0;
+      dst[1] = 0;
+      dst[2] = 0;
+    }
+
+    return dst;
+  },
+};
+
+export const mat4 = {
+  projection(width, height, depth, dst) {
+    // Note: This matrix flips the Y axis so that 0 is at the top.
+    return mat4.ortho(0, width, height, 0, depth, -depth, dst);
+  },
+
+  perspective(fieldOfViewYInRadians, aspect, zNear, zFar, dst) {
+    dst = dst || new Float32Array(16);
+
+    const f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewYInRadians);
+    const rangeInv = 1 / (zNear - zFar);
+
+    dst[0] = f / aspect;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+
+    dst[4] = 0;
+    dst[5] = f;
+    dst[6] = 0;
+    dst[7] = 0;
+
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = zFar * rangeInv;
+    dst[11] = -1;
+
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = zNear * zFar * rangeInv;
+    dst[15] = 0;
+
+    return dst;
+  },
+
+  ortho(left, right, bottom, top, near, far, dst) {
+    dst = dst || new Float32Array(16);
+
+    dst[0] = 2 / (right - left);
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+
+    dst[4] = 0;
+    dst[5] = 2 / (top - bottom);
+    dst[6] = 0;
+    dst[7] = 0;
+
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = 1 / (near - far);
+    dst[11] = 0;
+
+    dst[12] = (right + left) / (left - right);
+    dst[13] = (top + bottom) / (bottom - top);
+    dst[14] = near / (near - far);
+    dst[15] = 1;
+
+    return dst;
+  },
+
+  identity(dst) {
+    dst = dst || new Float32Array(16);
+    dst[ 0] = 1;  dst[ 1] = 0;  dst[ 2] = 0;   dst[ 3] = 0;
+    dst[ 4] = 0;  dst[ 5] = 1;  dst[ 6] = 0;   dst[ 7] = 0;
+    dst[ 8] = 0;  dst[ 9] = 0;  dst[10] = 1;   dst[11] = 0;
+    dst[12] = 0;  dst[13] = 0;  dst[14] = 0;   dst[15] = 1;
+    return dst;
+  },
+
+  multiply(a, b, dst) {
+    dst = dst || new Float32Array(16);
+    const b00 = b[0 * 4 + 0];
+    const b01 = b[0 * 4 + 1];
+    const b02 = b[0 * 4 + 2];
+    const b03 = b[0 * 4 + 3];
+    const b10 = b[1 * 4 + 0];
+    const b11 = b[1 * 4 + 1];
+    const b12 = b[1 * 4 + 2];
+    const b13 = b[1 * 4 + 3];
+    const b20 = b[2 * 4 + 0];
+    const b21 = b[2 * 4 + 1];
+    const b22 = b[2 * 4 + 2];
+    const b23 = b[2 * 4 + 3];
+    const b30 = b[3 * 4 + 0];
+    const b31 = b[3 * 4 + 1];
+    const b32 = b[3 * 4 + 2];
+    const b33 = b[3 * 4 + 3];
+    const a00 = a[0 * 4 + 0];
+    const a01 = a[0 * 4 + 1];
+    const a02 = a[0 * 4 + 2];
+    const a03 = a[0 * 4 + 3];
+    const a10 = a[1 * 4 + 0];
+    const a11 = a[1 * 4 + 1];
+    const a12 = a[1 * 4 + 2];
+    const a13 = a[1 * 4 + 3];
+    const a20 = a[2 * 4 + 0];
+    const a21 = a[2 * 4 + 1];
+    const a22 = a[2 * 4 + 2];
+    const a23 = a[2 * 4 + 3];
+    const a30 = a[3 * 4 + 0];
+    const a31 = a[3 * 4 + 1];
+    const a32 = a[3 * 4 + 2];
+    const a33 = a[3 * 4 + 3];
+
+    dst[0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30;
+    dst[1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31;
+    dst[2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32;
+    dst[3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33;
+
+    dst[4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30;
+    dst[5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31;
+    dst[6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32;
+    dst[7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33;
+
+    dst[8] = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30;
+    dst[9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31;
+    dst[10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32;
+    dst[11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33;
+
+    dst[12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30;
+    dst[13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31;
+    dst[14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32;
+    dst[15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33;
+
+    return dst;
+  },
+
+  cameraAim(eye, target, up, dst) {
+    dst = dst || new Float32Array(16);
+
+    const zAxis = vec3.normalize(vec3.subtract(eye, target));
+    const xAxis = vec3.normalize(vec3.cross(up, zAxis));
+    const yAxis = vec3.normalize(vec3.cross(zAxis, xAxis));
+
+    dst[ 0] = xAxis[0];  dst[ 1] = xAxis[1];  dst[ 2] = xAxis[2];  dst[ 3] = 0;
+    dst[ 4] = yAxis[0];  dst[ 5] = yAxis[1];  dst[ 6] = yAxis[2];  dst[ 7] = 0;
+    dst[ 8] = zAxis[0];  dst[ 9] = zAxis[1];  dst[10] = zAxis[2];  dst[11] = 0;
+    dst[12] = eye[0];    dst[13] = eye[1];    dst[14] = eye[2];    dst[15] = 1;
+
+    return dst;
+  },
+
+  inverse(m, dst) {
+    dst = dst || new Float32Array(16);
+
+    const m00 = m[0 * 4 + 0];
+    const m01 = m[0 * 4 + 1];
+    const m02 = m[0 * 4 + 2];
+    const m03 = m[0 * 4 + 3];
+    const m10 = m[1 * 4 + 0];
+    const m11 = m[1 * 4 + 1];
+    const m12 = m[1 * 4 + 2];
+    const m13 = m[1 * 4 + 3];
+    const m20 = m[2 * 4 + 0];
+    const m21 = m[2 * 4 + 1];
+    const m22 = m[2 * 4 + 2];
+    const m23 = m[2 * 4 + 3];
+    const m30 = m[3 * 4 + 0];
+    const m31 = m[3 * 4 + 1];
+    const m32 = m[3 * 4 + 2];
+    const m33 = m[3 * 4 + 3];
+
+    const tmp0 = m22 * m33;
+    const tmp1 = m32 * m23;
+    const tmp2 = m12 * m33;
+    const tmp3 = m32 * m13;
+    const tmp4 = m12 * m23;
+    const tmp5 = m22 * m13;
+    const tmp6 = m02 * m33;
+    const tmp7 = m32 * m03;
+    const tmp8 = m02 * m23;
+    const tmp9 = m22 * m03;
+    const tmp10 = m02 * m13;
+    const tmp11 = m12 * m03;
+    const tmp12 = m20 * m31;
+    const tmp13 = m30 * m21;
+    const tmp14 = m10 * m31;
+    const tmp15 = m30 * m11;
+    const tmp16 = m10 * m21;
+    const tmp17 = m20 * m11;
+    const tmp18 = m00 * m31;
+    const tmp19 = m30 * m01;
+    const tmp20 = m00 * m21;
+    const tmp21 = m20 * m01;
+    const tmp22 = m00 * m11;
+    const tmp23 = m10 * m01;
+
+    const t0 = (tmp0 * m11 + tmp3 * m21 + tmp4 * m31) -
+               (tmp1 * m11 + tmp2 * m21 + tmp5 * m31);
+    const t1 = (tmp1 * m01 + tmp6 * m21 + tmp9 * m31) -
+               (tmp0 * m01 + tmp7 * m21 + tmp8 * m31);
+    const t2 = (tmp2 * m01 + tmp7 * m11 + tmp10 * m31) -
+               (tmp3 * m01 + tmp6 * m11 + tmp11 * m31);
+    const t3 = (tmp5 * m01 + tmp8 * m11 + tmp11 * m21) -
+               (tmp4 * m01 + tmp9 * m11 + tmp10 * m21);
+
+    const d = 1 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3);
+
+    dst[0] = d * t0;
+    dst[1] = d * t1;
+    dst[2] = d * t2;
+    dst[3] = d * t3;
+
+    dst[4] = d * ((tmp1 * m10 + tmp2 * m20 + tmp5 * m30) -
+                  (tmp0 * m10 + tmp3 * m20 + tmp4 * m30));
+    dst[5] = d * ((tmp0 * m00 + tmp7 * m20 + tmp8 * m30) -
+                  (tmp1 * m00 + tmp6 * m20 + tmp9 * m30));
+    dst[6] = d * ((tmp3 * m00 + tmp6 * m10 + tmp11 * m30) -
+                  (tmp2 * m00 + tmp7 * m10 + tmp10 * m30));
+    dst[7] = d * ((tmp4 * m00 + tmp9 * m10 + tmp10 * m20) -
+                  (tmp5 * m00 + tmp8 * m10 + tmp11 * m20));
+
+    dst[8] = d * ((tmp12 * m13 + tmp15 * m23 + tmp16 * m33) -
+                  (tmp13 * m13 + tmp14 * m23 + tmp17 * m33));
+    dst[9] = d * ((tmp13 * m03 + tmp18 * m23 + tmp21 * m33) -
+                  (tmp12 * m03 + tmp19 * m23 + tmp20 * m33));
+    dst[10] = d * ((tmp14 * m03 + tmp19 * m13 + tmp22 * m33) -
+                   (tmp15 * m03 + tmp18 * m13 + tmp23 * m33));
+    dst[11] = d * ((tmp17 * m03 + tmp20 * m13 + tmp23 * m23) -
+                   (tmp16 * m03 + tmp21 * m13 + tmp22 * m23));
+
+    dst[12] = d * ((tmp14 * m22 + tmp17 * m32 + tmp13 * m12) -
+                   (tmp16 * m32 + tmp12 * m12 + tmp15 * m22));
+    dst[13] = d * ((tmp20 * m32 + tmp12 * m02 + tmp19 * m22) -
+                   (tmp18 * m22 + tmp21 * m32 + tmp13 * m02));
+    dst[14] = d * ((tmp18 * m12 + tmp23 * m32 + tmp15 * m02) -
+                   (tmp22 * m32 + tmp14 * m02 + tmp19 * m12));
+    dst[15] = d * ((tmp22 * m22 + tmp16 * m02 + tmp21 * m12) -
+                   (tmp20 * m12 + tmp23 * m22 + tmp17 * m02));
+    return dst;
+  },
+
+  lookAt(eye, target, up, dst) {
+    return mat4.inverse(mat4.cameraAim(eye, target, up, dst), dst);
+  },
+
+  translation([tx, ty, tz], dst) {
+    dst = dst || new Float32Array(16);
+    dst[ 0] = 1;   dst[ 1] = 0;   dst[ 2] = 0;   dst[ 3] = 0;
+    dst[ 4] = 0;   dst[ 5] = 1;   dst[ 6] = 0;   dst[ 7] = 0;
+    dst[ 8] = 0;   dst[ 9] = 0;   dst[10] = 1;   dst[11] = 0;
+    dst[12] = tx;  dst[13] = ty;  dst[14] = tz;  dst[15] = 1;
+    return dst;
+  },
+
+  rotationX(angleInRadians, dst) {
+    const c = Math.cos(angleInRadians);
+    const s = Math.sin(angleInRadians);
+    dst = dst || new Float32Array(16);
+    dst[ 0] = 1;  dst[ 1] = 0;   dst[ 2] = 0;  dst[ 3] = 0;
+    dst[ 4] = 0;  dst[ 5] = c;   dst[ 6] = s;  dst[ 7] = 0;
+    dst[ 8] = 0;  dst[ 9] = -s;  dst[10] = c;  dst[11] = 0;
+    dst[12] = 0;  dst[13] = 0;   dst[14] = 0;  dst[15] = 1;
+    return dst;
+  },
+
+  rotationY(angleInRadians, dst) {
+    const c = Math.cos(angleInRadians);
+    const s = Math.sin(angleInRadians);
+    dst = dst || new Float32Array(16);
+    dst[ 0] = c;  dst[ 1] = 0;  dst[ 2] = -s;  dst[ 3] = 0;
+    dst[ 4] = 0;  dst[ 5] = 1;  dst[ 6] = 0;   dst[ 7] = 0;
+    dst[ 8] = s;  dst[ 9] = 0;  dst[10] = c;   dst[11] = 0;
+    dst[12] = 0;  dst[13] = 0;  dst[14] = 0;   dst[15] = 1;
+    return dst;
+  },
+
+  rotationZ(angleInRadians, dst) {
+    const c = Math.cos(angleInRadians);
+    const s = Math.sin(angleInRadians);
+    dst = dst || new Float32Array(16);
+    dst[ 0] = c;   dst[ 1] = s;  dst[ 2] = 0;  dst[ 3] = 0;
+    dst[ 4] = -s;  dst[ 5] = c;  dst[ 6] = 0;  dst[ 7] = 0;
+    dst[ 8] = 0;   dst[ 9] = 0;  dst[10] = 1;  dst[11] = 0;
+    dst[12] = 0;   dst[13] = 0;  dst[14] = 0;  dst[15] = 1;
+    return dst;
+  },
+
+  scaling([sx, sy, sz], dst) {
+    dst = dst || new Float32Array(16);
+    dst[ 0] = sx;  dst[ 1] = 0;   dst[ 2] = 0;    dst[ 3] = 0;
+    dst[ 4] = 0;   dst[ 5] = sy;  dst[ 6] = 0;    dst[ 7] = 0;
+    dst[ 8] = 0;   dst[ 9] = 0;   dst[10] = sz;   dst[11] = 0;
+    dst[12] = 0;   dst[13] = 0;   dst[14] = 0;    dst[15] = 1;
+    return dst;
+  },
+
+  translate(m, translation, dst) {
+    return mat4.multiply(m, mat4.translation(translation), dst);
+  },
+
+  rotateX(m, angleInRadians, dst) {
+    return mat4.multiply(m, mat4.rotationX(angleInRadians), dst);
+  },
+
+  rotateY(m, angleInRadians, dst) {
+    return mat4.multiply(m, mat4.rotationY(angleInRadians), dst);
+  },
+
+  rotateZ(m, angleInRadians, dst) {
+    return mat4.multiply(m, mat4.rotationZ(angleInRadians), dst);
+  },
+
+  scale(m, scale, dst) {
+    return mat4.multiply(m, mat4.scaling(scale), dst);
+  },
+};

package/src/meWGPU.js

@@ -0,0 +1,92 @@
+import MEBall from "./engine/ball.js";
+import MECube from './engine/cube.js';
+// import { mat4, vec3 } from 'wgpu-matrix';
+// import { createSphereMesh, SphereLayout } from './src/engine/ballsBuffer.js';
+
+export default class MatrixEngineWGPU {
+
+  mainRenderBundle = [];
+  rbContainer = [];
+
+  constructor(callback) {
+    var canvas = document.createElement('canvas')
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    document.body.append(canvas)
+
+    this.init({canvas, callback})
+  }
+
+  init = async ({canvas, callback}) => {
+    this.canvas = canvas;
+    this.adapter = await navigator.gpu.requestAdapter();
+    this.device = await this.adapter.requestDevice();
+    this.context = canvas.getContext('webgpu');
+
+    const devicePixelRatio = window.devicePixelRatio;
+    canvas.width = canvas.clientWidth * devicePixelRatio;
+    canvas.height = canvas.clientHeight * devicePixelRatio;
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+    this.context.configure({
+      device: this.device,
+      format: presentationFormat,
+      alphaMode: 'premultiplied',
+    });
+
+    this.run(callback)
+  };
+
+  addCube = (o) => {
+    if(typeof o === 'undefined') {
+      var o = {
+        position: {x: 0, y: 0, z: -4},
+        texturesPaths: ['./res/textures/default.png']
+      }
+    } else {
+      if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
+      if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
+    }
+    let myCube1 = new MECube(this.canvas, this.device, this.context, o)
+    this.mainRenderBundle.push(myCube1);
+  }
+
+  addBall = (o) => {
+    if(typeof o === 'undefined') {
+      var o = {
+        position: {x: 0, y: 0, z: -4},
+        texturesPaths: ['./res/textures/default.png']
+      }
+    } else {
+      if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
+      if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
+    }
+    let myBall1 = new MEBall(this.canvas, this.device, this.context, o)
+    this.mainRenderBundle.push(myBall1);
+  }
+
+  run(callback) {
+    setTimeout(() => {requestAnimationFrame(this.frame)}, 1000)
+    setTimeout(() => {callback()}, 10)
+  }
+
+  frame = () => {
+    let commandEncoder = this.device.createCommandEncoder();
+    this.rbContainer = [];
+
+    let passEncoder;
+
+    this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.draw();
+      this.rbContainer.push(meItem.renderBundle)
+      if(index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+    })
+
+    // passEncoder.executeBundles([NIK.renderBundle, NIK2.renderBundle]);
+    passEncoder.executeBundles(this.rbContainer);
+    passEncoder.end();
+    this.device.queue.submit([commandEncoder.finish()]);
+
+    requestAnimationFrame(this.frame);
+  }
+}

package/src/shaders/shaders.js

@@ -0,0 +1,171 @@
+
+/**
+ * @description
+ * For microdraw pixel cube texture
+ */
+export const shaderSrc = `struct VSUniforms {
+  worldViewProjection: mat4x4f,
+  worldInverseTranspose: mat4x4f,
+};
+@group(0) @binding(0) var<uniform> vsUniforms: VSUniforms;
+
+struct MyVSInput {
+    @location(0) position: vec4f,
+    @location(1) normal: vec3f,
+    @location(2) texcoord: vec2f,
+};
+
+struct MyVSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) normal: vec3f,
+  @location(1) texcoord: vec2f,
+};
+
+@vertex
+fn myVSMain(v: MyVSInput) -> MyVSOutput {
+  var vsOut: MyVSOutput;
+  vsOut.position = vsUniforms.worldViewProjection * v.position;
+  vsOut.normal = (vsUniforms.worldInverseTranspose * vec4f(v.normal, 0.0)).xyz;
+  vsOut.texcoord = v.texcoord;
+  return vsOut;
+}
+
+struct FSUniforms {
+  lightDirection: vec3f,
+};
+
+@group(0) @binding(1) var<uniform> fsUniforms: FSUniforms;
+@group(0) @binding(2) var diffuseSampler: sampler;
+@group(0) @binding(3) var diffuseTexture: texture_2d<f32>;
+
+@fragment
+fn myFSMain(v: MyVSOutput) -> @location(0) vec4f {
+  var diffuseColor = textureSample(diffuseTexture, diffuseSampler, v.texcoord);
+  var a_normal = normalize(v.normal);
+  var l = dot(a_normal, fsUniforms.lightDirection) * 0.5 + 0.5;
+  return vec4f(diffuseColor.rgb * l, diffuseColor.a);
+}
+`;
+
+/**
+ * @description
+ * For Cube with images
+ */
+export const cubeTexShader = `struct Uniforms {
+      matrix: mat4x4f,
+    };
+
+    struct Vertex {
+      @location(0) position: vec4f,
+      @location(1) texcoord: vec2f,
+    };
+
+    struct VSOutput {
+      @builtin(position) position: vec4f,
+      @location(0) texcoord: vec2f,
+    };
+
+    @group(0) @binding(0) var<uniform> uni: Uniforms;
+    @group(0) @binding(1) var ourSampler: sampler;
+    @group(0) @binding(2) var ourTexture: texture_2d<f32>;
+
+    @vertex fn vs(vert: Vertex) -> VSOutput {
+      var vsOut: VSOutput;
+      vsOut.position = uni.matrix * vert.position;
+      vsOut.texcoord = vert.texcoord;
+      return vsOut;
+    }
+
+    @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
+      return textureSample(ourTexture, ourSampler, vsOut.texcoord);
+    }
+`;
+
+export const basicVertWGSL = `struct Uniforms {
+  modelViewProjectionMatrix : mat4x4<f32>,
+}
+@binding(0) @group(0) var<uniform> uniforms : Uniforms;
+
+struct VertexOutput {
+  @builtin(position) Position : vec4<f32>,
+  @location(0) fragUV : vec2<f32>,
+  @location(1) fragPosition: vec4<f32>,
+}
+
+@vertex
+fn main(
+  @location(0) position : vec4<f32>,
+  @location(1) uv : vec2<f32>
+) -> VertexOutput {
+  var output : VertexOutput;
+  output.Position = uniforms.modelViewProjectionMatrix * position;
+  output.fragUV = uv;
+  output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
+  return output;
+}
+`;
+
+export const basicFragWGSL = `@group(0) @binding(1) var mySampler: sampler;
+@group(0) @binding(2) var myTexture: texture_2d<f32>;
+
+@fragment
+fn main(
+  @location(0) fragUV: vec2<f32>,
+  @location(1) fragPosition: vec4<f32>
+) -> @location(0) vec4<f32> {
+  return textureSample(myTexture, mySampler, fragUV) * fragPosition;
+}
+`;
+export const vertexPositionColorWGSL = `@fragment
+fn main(
+  @location(0) fragUV: vec2<f32>,
+  @location(1) fragPosition: vec4<f32>
+) -> @location(0) vec4<f32> {
+  return fragPosition;
+}`
+
+export const BALL_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(1, 1, 1);
+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;
+}