matrix-engine-wgpu 1.0.2 → 1.0.4

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,263 @@
+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 MEMeshObj from "./engine/mesh-obj.js";
+
+export default class MatrixEngineWGPU {
+
+  mainRenderBundle = [];
+  rbContainer = [];
+  frame = () => {};
+
+  entityHolder = [];
+
+  entityArgPass = {
+    loadOp: 'clear',
+    storeOp: 'store',
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  }
+
+  // The input handler
+  constructor(options, callback) {
+    // console.log('typeof options ', typeof options )
+    if(typeof options == 'undefined' || typeof options == "function") {
+      this.options = {
+        useSingleRenderPass: true,
+        canvasSize: 'fullscreen'
+      }
+      callback = options;
+    }
+
+    this.options = options;
+
+    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)
+
+    // The camera types
+    const initialCameraPosition = vec3.create(0, 0, 0);
+    this.mainCameraParams = {
+      type: 'WASD',
+      responseCoef: 2000
+    }
+
+    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.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 = {
+        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);
+  }
+
+  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);
+
+
+  }
+
+  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;
+    }
+    console.log('Mesh procedure', o)
+
+    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o)
+    this.mainRenderBundle.push(myMesh1);
+
+
+  }
+
+  run(callback) {
+    setTimeout(() => {requestAnimationFrame(this.frame)}, 500)
+    setTimeout(() => {callback()}, 20)
+  }
+
+  frameSinglePass = () => {
+
+    let passEncoder;
+    let commandEncoder = this.device.createCommandEncoder();
+    if(typeof this.mainRenderBundle != 'undefined') this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.position.update();
+      meItem.draw(commandEncoder);
+
+      // 
+      if(typeof meItem.done == 'undefined') {
+        this.rbContainer.push(meItem.renderBundle);
+        this.renderPassDescriptor.colorAttachments[0].view = this.context
+          .getCurrentTexture()
+          .createView();
+        //  console.log('prolazi ')
+        passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
+        passEncoder.executeBundles(this.rbContainer);
+        passEncoder.end();
+        // this.device.queue.submit([commandEncoder.finish()]);
+      }
+    })
+    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(commandEncoder);
+
+      if(meItem.renderBundle) {
+        this.rbContainer.push(meItem.renderBundle)
+        passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+        passEncoder.executeBundles(this.rbContainer);
+        passEncoder.end();
+      } else {
+        meItem.draw(commandEncoder)
+      }
+
+    })
+    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);
-  }
-}