matrix-engine-wgpu 1.0.2 → 1.0.5

package/src/shaders/shaders.js

@@ -1,130 +1,9 @@
-
 /**
  * @description
- * For microdraw pixel cube texture
+ * UNIT Texures -
+ * Good for performance
  */
-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 {
+export const UNLIT_SHADER = `struct Uniforms {
   viewProjectionMatrix : mat4x4f
 }
 @group(0) @binding(0) var<uniform> uniforms : Uniforms;
@@ -169,3 +48,4 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
 
   return vec4f(textureColor.rgb * lightColor, textureColor.a);
 }`;
+

package/src/shaders/vertex.wgsl.js

@@ -0,0 +1,49 @@
+export let vertexWGSL = `struct Scene {
+  lightViewProjMatrix: mat4x4f,
+  cameraViewProjMatrix: mat4x4f,
+  lightPos: vec3f,
+}
+
+struct Model {
+  modelMatrix: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(1) @binding(0) var<uniform> model : Model;
+
+struct VertexOutput {
+  @location(0) shadowPos: vec3f,
+  @location(1) fragPos: vec3f,
+  @location(2) fragNorm: vec3f,
+  @location(3) uv : vec2f,
+  
+  @builtin(position) Position: vec4f,
+}
+
+@vertex
+fn main(
+  @location(0) position: vec3f,
+  @location(1) normal: vec3f,
+  @location(2) uv : vec2f
+) -> VertexOutput {
+  var output : VertexOutput;
+
+  // XY is in (-1, 1) space, Z is in (0, 1) space
+  let posFromLight = scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+
+  // Convert XY to (0, 1)
+  // Y is flipped because texture coords are Y-down.
+  output.shadowPos = vec3(
+    posFromLight.xy * vec2(0.5, -0.5) + vec2(0.5),
+    posFromLight.z
+  );
+
+  output.Position = scene.cameraViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+  output.fragPos = output.Position.xyz;
+  output.fragNorm = normal;
+  // nidza
+  output.uv = uv;
+
+  return output;
+}
+`

package/src/shaders/vertexShadow.wgsl.js

@@ -0,0 +1,20 @@
+export let vertexShadowWGSL =  `struct Scene {
+  lightViewProjMatrix: mat4x4f,
+  cameraViewProjMatrix: mat4x4f,
+  lightPos: vec3f,
+}
+
+struct Model {
+  modelMatrix: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(1) @binding(0) var<uniform> model : Model;
+
+@vertex
+fn main(
+  @location(0) position: vec3f
+) -> @builtin(position) vec4f {
+  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+}
+`

package/src/world.js

@@ -0,0 +1,246 @@
+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 MEMeshObj from "./engine/mesh-obj.js";
+import MatrixAmmo from "./physics/matrix-ammo.js";
+// import {scriptManager} from "./engine/utils.js";
+
+export default class MatrixEngineWGPU {
+
+  mainRenderBundle = [];
+  rbContainer = [];
+  frame = () => {};
+
+  entityHolder = [];
+
+  entityArgPass = {
+    loadOp: 'clear',
+    storeOp: 'store',
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  }
+
+  matrixAmmo = new MatrixAmmo();
+
+  constructor(options, callback) {
+    // console.log('typeof options ', typeof options )
+    if(typeof options == 'undefined' || typeof options == "function") {
+      this.options = {
+        useSingleRenderPass: true,
+        canvasSize: 'fullscreen',
+        mainCameraParams: {
+          type: 'WASD',
+          responseCoef: 2000
+        }
+      }
+      callback = options;
+    }
+    if(typeof options.mainCameraParams === 'undefined') {
+      options.mainCameraParams = {
+        type: 'WASD',
+        responseCoef: 2000
+      }
+    }
+    this.options = options;
+
+    this.mainCameraParams = options.mainCameraParams;
+
+    var canvas = document.createElement('canvas')
+    if(this.options.canvasSize == 'fullscreen') {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    } else {
+      canvas.width = this.options.canvasSize.w;
+      canvas.height = this.options.canvasSize.h;
+    }
+    document.body.append(canvas)
+
+    const initialCameraPosition = vec3.create(0, 0, 0);
+    this.mainCameraParams = {
+      type: this.options.mainCameraParams.type,
+      responseCoef: this.options.mainCameraParams.responseCoef
+    }
+
+    this.cameras = {
+      arcball: new ArcballCamera({position: initialCameraPosition}),
+      WASD: new WASDCamera({position: initialCameraPosition}),
+    };
+
+    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',
+    });
+
+    if(this.options.useSingleRenderPass == true) {
+      this.makeDefaultRenderPassDescriptor()
+      this.frame = this.frameSinglePass;
+    } else {
+      // must be
+      this.frame = this.frameSinglePass;
+    }
+
+    this.run(callback)
+  };
+
+  makeDefaultRenderPassDescriptor = () => {
+
+    this.depthTexture = this.device.createTexture({
+      size: [this.canvas.width, this.canvas.height],
+      format: 'depth24plus',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    this.renderPassDescriptor = {
+      colorAttachments: [
+        {
+          view: undefined,
+          clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+      depthStencilAttachment: {
+        view: this.depthTexture.createView(),
+        depthClearValue: 1.0,
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store',
+      },
+    };
+  }
+
+  addCube = (o) => {
+    if(typeof o === 'undefined') {
+      var o = {
+        scale: 1,
+        position: {x: 0, y: 0, z: -4},
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        entityArgPass: this.entityArgPass,
+        cameras: this.cameras,
+        mainCameraParams: this.mainCameraParams
+      }
+    } else {
+      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.scale === 'undefined') {o.scale = 1;}
+      if(typeof o.mainCameraParams === 'undefined') {o.mainCameraParams = this.mainCameraParams}
+      o.entityArgPass = this.entityArgPass;
+      o.cameras = this.cameras;
+    }
+    let myCube1 = new MECube(this.canvas, this.device, this.context, o)
+    this.mainRenderBundle.push(myCube1);
+  }
+
+  addBall = (o) => {
+    if(typeof o === 'undefined') {
+      var o = {
+        scale: 1,
+        position: {x: 0, y: 0, z: -4},
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        entityArgPass: this.entityArgPass,
+        cameras: this.cameras,
+        mainCameraParams: this.mainCameraParams
+      }
+    } else {
+      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;
+    }
+    let myBall1 = new MEBall(this.canvas, this.device, this.context, o)
+    this.mainRenderBundle.push(myBall1);
+  }
+
+  addMeshObj = (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;
+    }
+    if(typeof o.physics === 'undefined') {
+      o.physics = {
+        enabled: false,
+        geometry: "Sphere"
+      }
+    }
+    if(typeof o.physics.enabled === 'undefined') {o.physics.enabled = false}
+    if(typeof o.physics.geometry === 'undefined') {o.physics.geometry = "Sphere"}
+    // console.log('Mesh procedure', o)
+    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o)
+    if(o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myMesh1, o.physics)
+    }
+    this.mainRenderBundle.push(myMesh1);
+  }
+
+  run(callback) {
+    setTimeout(() => {requestAnimationFrame(this.frame)}, 30)
+    setTimeout(() => {callback()}, 20)
+  }
+
+  frameSinglePass = () => {
+    if(typeof this.mainRenderBundle == 'undefined') return;
+    let shadowPass = null;
+    let renderPass;
+    let commandEncoder = this.device.createCommandEncoder();
+
+    this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.position.update();
+    })
+
+    this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.draw(commandEncoder);
+      shadowPass = commandEncoder.beginRenderPass(meItem.shadowPassDescriptor);
+      shadowPass.setPipeline(meItem.shadowPipeline);
+      meItem.drawShadows(shadowPass);
+      shadowPass.end();
+    })
+
+    this.mainRenderBundle.forEach((meItem, index) => {
+      if(index == 0) renderPass = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+      if(index == 1) renderPass.setPipeline(meItem.pipeline);
+    })
+
+    this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.drawElements(renderPass);
+    })
+
+    renderPass.end();
+
+    this.device.queue.submit([commandEncoder.finish()]);
+    requestAnimationFrame(this.frame);
+  }
+}

package/src/meWGPU.js

@@ -1,173 +0,0 @@
-import MEBall from "./engine/ball.js";
-import MECube from './engine/cube.js';
-
-export default class MatrixEngineWGPU {
-
-  mainRenderBundle = [];
-  rbContainer = [];
-  frame = () => {};
-
-  entityArgPass = {
-    loadOp: 'clear',
-    storeOp: 'store',
-    depthLoadOp: 'clear',
-    depthStoreOp: 'store'
-  }
-
-  constructor(options, callback) {
-    console.log('typeof options ', typeof options )
-    console.log('typeof options ',  options )
-    if (typeof options == 'undefined' || typeof options == "function") {
-      this.options = {
-        useSingleRenderPass: true
-      }
-      callback = options;
-    }
-
-    this.options = options;
-
-    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',
-    });
-
-    if(this.options.useSingleRenderPass == true) {
-      this.makeDefaultRenderPassDescriptor()
-      this.frame = this.frameSinglePass;
-    } else {
-      // must be
-      this.frame = this.framePassPerObject;
-    }
-
-    this.run(callback)
-  };
-
-  makeDefaultRenderPassDescriptor = () => {
-
-    this.depthTexture = this.device.createTexture({
-      size: [this.canvas.width, this.canvas.height],
-      format: 'depth24plus',
-      usage: GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-
-    this.renderPassDescriptor = {
-      colorAttachments: [
-        {
-          view: undefined,
-          clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
-          loadOp: 'clear',
-          storeOp: 'store',
-        },
-      ],
-      depthStencilAttachment: {
-        view: this.depthTexture.createView(),
-        depthClearValue: 1.0,
-        depthLoadOp: 'clear',
-        depthStoreOp: 'store',
-      },
-    };
-  }
-
-  addCube = (o) => {
-    if(typeof o === 'undefined') {
-      var o = {
-        position: {x: 0, y: 0, z: -4},
-        texturesPaths: ['./res/textures/default.png'],
-        rotation: {x: 0, y: 0, z: 0},
-        rotationSpeed: {x: 0, y: 0, z: 0},
-        entityArgPass: this.entityArgPass
-      }
-    } else {
-      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']}
-      o.entityArgPass = this.entityArgPass;
-    }
-    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'],
-        rotation: {x: 0, y: 0, z: 0},
-        rotationSpeed: {x: 0, y: 0, z: 0},
-        entityArgPass: this.entityArgPass
-      }
-    } else {
-      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']}
-      o.entityArgPass = this.entityArgPass;
-    }
-    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)
-  }
-
-  frameSinglePass = () => {
-    console.log('single')
-    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);
-    })
-
-    this.renderPassDescriptor.colorAttachments[0].view = this.context
-      .getCurrentTexture()
-      .createView();
-
-    passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
-    passEncoder.executeBundles(this.rbContainer);
-    passEncoder.end();
-    this.device.queue.submit([commandEncoder.finish()]);
-    requestAnimationFrame(this.frame);
-  }
-
-  framePassPerObject = () => {
-    console.log('framePassPerObject')
-    let commandEncoder = this.device.createCommandEncoder();
-    this.rbContainer = [];
-    let passEncoder;
-    this.mainRenderBundle.forEach((meItem, index) => {
-      meItem.draw();
-      this.rbContainer.push(meItem.renderBundle)
-      passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
-      passEncoder.executeBundles(this.rbContainer);
-      passEncoder.end();
-    })
-    this.device.queue.submit([commandEncoder.finish()]);
-    requestAnimationFrame(this.frame);
-  }
-}