webglmusti 0.0.0

package/src/WebGL/globals.ts

@@ -0,0 +1,353 @@
+import { loadVertexShaders } from "./Shaders/Vertex/vertex";
+import { loadFragmentShaders } from "./Shaders/Fragment/fragment";
+import type { ShaderProgram } from "./Shaders/shader";
+import * as Shader from "./Shaders/custom";
+
+import * as Shapes from "./Shapes/Shapes"
+import * as Matrix from "./Matrix/matrix";
+import * as Line from "./Shapes/Line";
+import * as Colour from "./colour";
+import * as Texture from "./Texture/texture"
+
+type Float = number;
+type Int32 = number;
+
+export * as Colour from "./colour";
+export * as Shapes from "./Shapes/Shapes";
+export * as Matrix from "./Matrix/matrix";
+export * as Texture from "./Texture/texture";
+export * as Line from "./Shapes/Line";
+export * as Shader from "./Shaders/custom";
+export * as App from "./app";
+
+type VoidFunction = () => void;
+
+interface MVPColourShader{
+  use: () => void;
+  setMvp:(mat: Matrix.TransformationMatrix3x3) => void;
+  setColourFromColourRGB: (colour: Colour.ColourRGB) => void;
+}
+
+export class WebGL{
+  static gl: WebGL2RenderingContext | null;
+  static active_shader_program: ShaderProgram | null;
+  private static initialised: boolean = false;
+  //static buffer: WebGLBuffer | null; for testing
+  static defaultError(){
+    throw new Error("WebGL not initialised or null");
+  }
+  static initialise(canvas: HTMLCanvasElement){
+    this.gl = canvas.getContext("webgl2", {alpha: false});
+    this.resetViewport(canvas);
+    if(this.gl && !this.initialised){
+      loadVertexShaders();
+      loadFragmentShaders();
+      this.initialised = true;
+      //this.buffer = this.gl.createBuffer();
+    }
+  }
+
+  static resetViewport(canvas: HTMLCanvasElement){
+    this.gl!.viewport(0, 0, canvas.width, canvas.height);
+  }
+
+  static rectangleModel(x: Float, y: Float, width: number, height: number): Matrix.TransformationMatrix3x3{
+    let model = Matrix.TransformationMatrix3x3.translate(x, y);
+    model.scale(width, height);
+    return model;
+  }
+  static lineModel(x1: Float, y1: Float, x2: Float, y2: Float, lt: Float){
+    const line = new Line.Line(x1, y1, x2, y2);
+
+    let model = Matrix.TransformationMatrix3x3.identity();
+    model.translate(x1, y1);
+    model.rotate(-line.angleInRadians());
+    model.scale(line.length(), lt);
+    model.translate(0, -0.5);
+    
+    return model;
+  }
+  static drawColourRect(vp: Matrix.TransformationMatrix3x3, 
+    shader: MVPColourShader, x: Int32, y: Int32, 
+    width: Int32, height: Int32, 
+    colour: Colour.ColourRGB=Colour.ColourUtils.black())
+  {
+    const model = WebGL.rectangleModel(x, y, width, height);
+    shader.use();
+    shader.setColourFromColourRGB(colour);
+    shader.setMvp(vp.multiplyCopy(model));
+    Shapes.Quad.draw();
+  }
+}
+
+
+//can only draw rects
+export class BasicModel{
+  static colour_shader: Shader.MVPColourProgram;
+
+  static init(){
+    this.colour_shader = new Shader.MVPColourProgram();
+  }
+
+  parts: BasicModelItem2D[];
+  constructor(){
+    this.parts = [];
+  }
+  addPart(part: BasicModelItem2D){
+    this.parts.push(part);
+  }
+  draw(p: Matrix.TransformationMatrix3x3){
+    const shader = BasicModel.colour_shader;
+    shader.use();
+    for(const model of this.parts){
+      shader.setMvp(p.multiplyCopy(model.transformation));
+      shader.setColour(model.colour.red, model.colour.green, model.colour.blue);
+      Shapes.Quad.drawRelative();
+    }
+  }
+  static drawItem(vp: Matrix.TransformationMatrix3x3, item: BasicModelItem2D){
+    const shader = BasicModel.colour_shader;
+    shader.use();
+    shader.setColour(item.colour.red, item.colour.green, item.colour.blue);
+    shader.setMvp(vp.multiplyCopy(item.transformation));
+    Shapes.Quad.draw();
+  }
+  static defaultItem(): BasicModelItem2D{
+    return {colour: Colour.ColourUtils.white(), transformation: Matrix.TransformationMatrix3x3.identity()};
+  }
+}
+
+export type BasicModelItem2D = {
+  colour: Colour.ColourRGB;
+  transformation: Matrix.TransformationMatrix3x3;
+}
+
+
+export function testBasicModel(){
+  const pers = Matrix.TransformationMatrix3x3.orthographic(0, 10, 10, 0);
+  const s1 = WebGL.rectangleModel(0, 0, 5, 5);
+  const s2 = WebGL.rectangleModel(5, 5, 5, 5);
+  const bm = new BasicModel();
+  BasicModel.init();
+
+  const white = {red: 1, green: 1, blue: 1};
+  const blue = {red: 0, green: 0, blue: 1};
+  bm.addPart({colour: white, transformation: s1});
+  bm.addPart({colour: white, transformation: s2});
+
+
+  const s3 = WebGL.rectangleModel(3, 5, 2, 2);
+  const s4 = WebGL.rectangleModel(5,3, 2, 2);
+  bm.addPart({colour: blue, transformation: s3});
+  bm.addPart({colour: blue, transformation: s4});
+
+
+  bm.draw(pers);
+  //Shapes.Quad.draw();
+}
+
+
+export function loadTextureTest(){
+  if(WebGL.gl){
+    const gl = WebGL.gl;
+
+    const texture_shader = new Shader.MVPTextureProgram();
+
+    const image = new Image();
+    image.src = "/base.png";
+    image.onload = () => {
+      console.log(`${image.src} loaded`);
+      const texture = gl.createTexture();
+      const tex_id = 1;
+      gl.activeTexture(gl.TEXTURE0+tex_id);
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+      texture_shader.use();
+      texture_shader.setTextureId(tex_id);
+      texture_shader.setTextureId(0);
+      //texture_shader.setTextureId(0);
+      const perspective = Matrix.TransformationMatrix3x3.orthographic(0, 1, 1, 0);
+
+      texture_shader.setMvp(perspective);
+      Shapes.Quad.drawRelative();
+    } 
+  }
+}
+
+export class FontLoader{
+  private fonts: Map<string, Texture.CustomFont>;
+  loaded: Int32;
+  loading: boolean; // prevention measure for loading while another load is active
+  to_load: Texture.CustomFont[];
+  finished_loading: Int32;
+  constructor(){
+    this.fonts = new Map();
+    this.loaded = 0;
+    this.loading = false;
+    this.to_load = [];
+    this.finished_loading = 0;
+  }
+  addFont(name: string): boolean{
+    if(this.loading) return false;
+    const font = new Texture.CustomFont(name);
+    this.fonts.set(name, font);
+    return true;
+  }
+  loadFonts(onAllLoaded: () => void) {
+    function finishLoading(fl: FontLoader){
+      if(fl.finished_loading == fl.to_load.length){
+        console.log("end loading");
+        onAllLoaded();
+        fl.loading = false;
+      }
+    }
+    if(!this.loading){
+      console.log("start loading fonts");
+      this.loading = true;
+      this.to_load = [];
+      for(const [name, font] of this.fonts){
+        this.to_load.push(font);
+      }
+      console.log(this.to_load);
+      if(this.to_load.length == 0){
+        finishLoading(this);
+      }
+
+      for(const font of this.to_load){
+        console.log(font);
+        font.load(() => {
+          this.loaded++;
+          this.finished_loading++;
+          console.log(`finished ${font.font_name}`);
+          finishLoading(this);
+        },
+        (e) => {
+          console.log(`error loading ${font.font_name} - ${e}`);
+          this.finished_loading++;
+          finishLoading(this);
+        });
+      }
+    }
+  }
+  getFont(name: string): Texture.CustomFont | undefined{
+    return this.fonts.get(name);
+  }
+}
+
+export class TextDrawer{
+  sprite_sheet_shader: Shader.MVPSpriteSheetProgram;
+  colour_sheet_shader: Shader.MVPSpriteSheetColourProgram;
+  font?: Texture.CustomFont;
+  constructor(){
+    this.sprite_sheet_shader = new Shader.MVPSpriteSheetProgram();
+    this.colour_sheet_shader = new Shader.MVPSpriteSheetColourProgram();
+  }
+  setFont(font: Texture.CustomFont){
+    this.font = font;
+  }
+  loadFont(onLoaded:()=>void=()=>{}){
+  }
+
+  drawTextModelColour(mat: Matrix.TransformationMatrix3x3, text: string, size: Float, colour: Colour.ColourRGB){
+    if(this.font){
+      this.colour_sheet_shader.use();
+      this.colour_sheet_shader.setColourFromColourRGB(colour);
+      this.font.active(0);
+      this.colour_sheet_shader.setTextureId(0);
+      const scale = Matrix.TransformationMatrix3x3.scale(size, size);
+      const gl = WebGL.gl!;
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      for(let i = 0; i < text.length; i++){
+        if(text[i] == ' ') continue;
+        const tr = Matrix.TransformationMatrix3x3.translate(size*i,0);
+        const matrix = mat.multiplyCopy(tr.multiplyCopy(scale));
+        this.colour_sheet_shader.setMvp(matrix);
+        this.font.setChar(this.colour_sheet_shader, text[i]);
+        Shapes.Quad.drawRelative();
+      }
+
+      gl.disable(gl.BLEND);
+    }
+
+  }
+  drawText(vp: Matrix.TransformationMatrix3x3, x: Float, y: Float, text: string, size: Float){
+    if(this.font){
+      //console.log(this.font);
+      const gl = WebGL.gl!;
+      this.sprite_sheet_shader.use();
+      this.font.active(1);
+      this.sprite_sheet_shader.setTextureId(1);
+      const scale = Matrix.TransformationMatrix3x3.scale(size, size);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      for(let i = 0; i < text.length; i++){
+        if(text[i] == ' ') continue;
+        const cx = x+i*size;
+        const tr = Matrix.TransformationMatrix3x3.translate(cx, y);
+        const model = tr.multiplyCopy(scale);
+        this.sprite_sheet_shader.setMvp(vp.multiplyCopy(model));
+        this.font.setChar(this.sprite_sheet_shader, text[i]);
+        Shapes.Quad.drawRelative();
+      }
+      gl.disable(gl.BLEND);
+    }else{
+      throw "TextDrawer: No font set";
+    }
+  }
+  drawTextModel(mat: Matrix.TransformationMatrix3x3, text: string, size: Float){
+    if(this.font){
+      const gl = WebGL.gl!;
+      this.sprite_sheet_shader.use();
+      this.font.active(1);
+      this.sprite_sheet_shader.setTextureId(1);
+      const scale = Matrix.TransformationMatrix3x3.scale(size, size);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      for(let i = 0; i < text.length; i++){
+        if(text[i] == ' ') continue;
+        const tr = Matrix.TransformationMatrix3x3.translate(size*i,0);
+        
+        const matrix = mat.multiplyCopy(tr.multiplyCopy(scale));
+        this.sprite_sheet_shader.setMvp(matrix);
+        this.font.setChar(this.sprite_sheet_shader, text[i]);
+        Shapes.Quad.drawRelative();
+      }
+      gl.disable(gl.BLEND);
+    }
+  }
+  drawTextColour(vp: Matrix.TransformationMatrix3x3, x: Float, y: Float, text: string, size: Float, colour: Colour.ColourRGB){
+    if(this.font){
+      const gl = WebGL.gl!;
+      this.colour_sheet_shader.use();
+      this.colour_sheet_shader.setColourFromColourRGB(colour);
+      this.font.active(1);
+      this.colour_sheet_shader.setTextureId(1);
+      const scale = Matrix.TransformationMatrix3x3.scale(size, size);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      for(let i = 0; i < text.length; i++){
+        if(text[i] == ' ') continue;
+        const cx = x+i*size;
+        const tr = Matrix.TransformationMatrix3x3.translate(cx, y);
+        const model = tr.multiplyCopy(scale);
+        this.colour_sheet_shader.setMvp(vp.multiplyCopy(model));
+        this.font.setChar(this.colour_sheet_shader, text[i]);
+        Shapes.Quad.drawRelative();
+      }
+      gl.disable(gl.BLEND);
+    }else{
+      throw "TextDrawer: No font set";
+    }
+  }
+  //expects that all characters are of same width
+  getTextWidth(text: string, size: Float): Float{
+    return text.length*size;
+  }
+}
+
+export default WebGL;

package/src/WebGL/index.ts

@@ -0,0 +1,3 @@
+import * as WebGL from "./globals";
+
+module.exports = WebGL;

package/src/WebGL/mixin.ts

@@ -0,0 +1,2 @@
+export type Constructor = new (...args: any[]) => {};
+export type GConstructor<T = {}> = new (...args: any[]) => T;

package/src/global.d.ts

@@ -0,0 +1,13 @@
+// src/global.d.ts
+declare module '*.txt' {
+  const content: string;
+  export default content;
+}
+declare module '*.frag' {
+  const content: string;
+  export default content;
+}
+declare module '*.vert' {
+  const content: string;
+  export default content;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import * as WebGL from "./WebGL/globals";
+
+
+module.exports = WebGL;

package/src/main.ts

@@ -0,0 +1,139 @@
+
+import WebGL from './WebGL/globals';
+import * as Shapes from './WebGL/Shapes/Shapes';
+import * as CustomShader from './WebGL/Shaders/custom';
+import * as Matrix from "./WebGL/Matrix/matrix";
+
+import * as Mixin from './utils/mixin';
+import * as App from './WebGL/app';
+import * as Grid from './App/ResourceSim/grid_app';
+import * as WebGLGlobals from './WebGL/globals';
+
+import { newPuzzleApp } from './App/puzzle_box/app';
+
+import * as Water from './App/water/water'
+import * as Card from "./App/card/card";
+//import * as CustomShaders from './shaders/custom';
+
+const canvas: HTMLCanvasElement = document.getElementById("app") as HTMLCanvasElement;
+
+const overlay: HTMLDivElement = document.getElementById("overlay") as HTMLDivElement;
+
+overlay.style.position = "absolute";
+overlay.style.left = "50%";
+overlay.style.top = "50%";
+overlay.style.transform = "translate(-50%, -50%)";
+overlay.style.color = "white";
+overlay.textContent = "Loading";
+
+canvas.width = window.innerWidth; // record this! TODO important for consistant resizing
+canvas.height = window.innerHeight;
+
+
+
+//console.log(txt.);
+//const gl: WebGL2RenderingContext = canvas.getContext("webgl2")!;
+WebGL.initialise(canvas);
+
+const gl = WebGL.gl;
+
+
+//const engine = new App.MyEngine();
+const engine = new Grid.WallEngine();
+engine.addOverlayElement(overlay);
+//const renderer = new App.MyRenderer();
+const renderer = new Grid.WallRenderer(canvas.width, canvas.height);
+renderer.addOverlayElement(overlay);
+
+
+const water_engine = new Water.WaterEngine();
+const water_renderer = new Water.WaterRenderer(canvas.width, canvas.height);
+
+const card_engine = new Card.CardEngine(canvas.width, canvas.height);
+const card_renderer = new Card.CardRenderer(canvas.width, canvas.height);
+
+//const app = new App.App(card_engine, card_renderer);
+//const app = new App.App(engine, renderer);
+const app = newPuzzleApp(canvas.width,canvas.height);
+
+app.loadResources(() => {
+  console.log("running app");
+  app.initApp();
+  engine.onFinishLoading();
+});
+
+window.addEventListener("resize", (e: Event) => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  app.resize(canvas.width, canvas.height, canvas);
+});
+
+
+if(gl){
+  //WebGLGlobals.loadTexture();
+  //app.addEvents();
+  //app.update();
+  //app.draw();
+
+  //water_engine.addEvents();
+  //water_renderer.render(water_engine);
+
+}else{
+
+}
+
+/*
+function draw2(){
+  //const transformColour = new CustomShader.TransformColourProgram();
+  //const translateColour = new CustomShader.TranslateColourMixin();
+
+  const t = Date.now();
+
+  const matrix = Matrix.TransformationMatrix3x3.identity();
+  //matrix.rotate(0.5);
+  //const rot = Matrix.TransformationMatrix3x3.rotate(t/360);
+  //matrix.multiply(rot);
+  //const sc = Matrix.TransformationMatrix3x3.scale(1.0, 1.0);
+  //matrix.multiply(sc);
+
+  transformColour.use();
+  transformColour.setTransform(matrix);
+  transformColour.setColour(0.5, 0.8, 0.5);
+
+  Shapes.RightTriangle.draw();
+  requestAnimationFrame(draw2);
+}
+
+function drawScene(){
+
+  gl?.clear(gl.COLOR_BUFFER_BIT);
+
+  const transformColour = new CustomShader.TransformColourProgram();
+  const translateColour = new CustomShader.TranslateColourProgram();
+
+  const t = Date.now();
+
+  const matrix = Matrix.TransformationMatrix3x3.translate(Math.sin(t/400)/1.5, Math.cos(t/600)/3);
+  //matrix.rotate(0.5);
+  const rot = Matrix.TransformationMatrix3x3.rotate(t/360);
+  matrix.multiply(rot);
+  const sc = Matrix.TransformationMatrix3x3.scale(1.0, 1.0);
+  matrix.multiply(sc);
+
+  transformColour.use();
+  transformColour.setTransform(matrix);
+  transformColour.setColour(0.5, 0.8, 0.5);
+
+  //Shapes.RightTriangle.draw();
+  Shapes.RightTriangle.draw();
+  //Shapes.Quad.draw();
+
+  //program.use();
+  //program.setTranslate(-0.8, -0.8);
+  translateColour.use();
+  translateColour.setColour(0.4, 0.2, 0.5);
+  translateColour.setTranslate(-0.4, -0.9);
+
+  requestAnimationFrame(drawScene);
+}
+*/

package/src/utils/array.ts

@@ -0,0 +1,154 @@
+type Equals = 0;
+type LessThan = -1;
+type GreaterThan = 1;
+
+type Comparator = LessThan | Equals | GreaterThan;
+
+type Int32 = number;
+type Float = number;
+
+export function flatten<T>(arr: T[][]): T[]{
+  const flat = [];
+  for(const a of arr){
+    for(const e of a){
+      flat.push(e);
+    }
+  }
+  return flat;
+}
+
+export function reverse<T>(arr: T[]){
+  const h = Math.floor(arr.length/2);
+  for(let i = 0; i < h; i++){
+    [arr[i], arr[arr.length-i-1]] = [arr[arr.length-i-1], arr[i]];
+  }
+  return arr;
+}
+
+export function binarySearch<T>(arr: T[], compare: (t:T) => Float): Int32{
+  let i = 0;
+  let j = arr.length-1;
+  while(i <= j){
+    const m = Math.trunc((i+j)/2);
+    const comp = compare(arr[m]);
+    if(comp == 0){
+      return m;
+    }else if(comp > 0){
+      i = m+1;
+    }else{ // less
+      j = m-1;
+    }
+  }
+  return -1;
+}
+
+
+
+export function binarySearchUpperBound<T>(arr: T[], compare: (t:T) => Float): Int32{
+  let i = 0;
+  let j = arr.length-1;
+  while(i <= j){
+    const m = Math.trunc((i+j)/2);
+    const comp = compare(arr[m]);
+    if(comp <= 0){
+      j = m - 1;
+    }else{
+      i = m + 1;
+    }
+  }
+  return i;
+}
+
+export function binarySearchLowerBound<T>(arr: T[], compare: (t:T) => Float): Int32{
+  let i = 0;
+  let j = arr.length-1;
+  while(i <= j){
+    const m = Math.trunc((i+j)/2);
+    const comp = compare(arr[m]);
+    if(comp >= 0){
+      i = m + 1;
+    }else{
+      j = m - 1;
+    }
+  }
+  return j;
+}
+
+export function random0ToN(size: Int32): Int32[]{
+  const arr = Array.from({length: size}, (_, i) => i);
+  for(let i = arr.length-1; i > 0; i--){
+    const j = Math.floor(Math.random()*(i+1));
+    //new_cards[n] = this.cards[j];
+
+    [arr[j], arr[i]] = [arr[i], arr[j]];
+  }
+  return arr;
+}
+
+function testBinarySearch(){
+
+}
+
+export class SortedArray<T>{
+  private array: T[];
+  private cmp: (a: T, b: T) => Int32;
+  constructor(arr: T[]=[], cmp: (a: T, b: T) => Int32){
+    this.array = [...arr];
+    this.array = this.array.sort(cmp);
+    this.cmp = cmp;
+  }
+  size(): Int32{
+    return this.array.length;
+  }
+  add(ele: T){
+    const index = this.lowerBound(ele);
+    this.array.splice(index, 0, ele);
+  }
+  remove(i: Int32){
+    if(i < this.array.length && i >= 0){
+      this.array.splice(i, 1);
+    }
+  }
+  getArray(): T[]{
+    return this.array;
+  }
+  get(i: Int32): T | undefined{
+    if(i < this.array.length && i >= 0){
+      return this.array[i];
+    }
+    return undefined;
+  }
+  lowerBound(ele: T): Int32{
+    let i = 0;
+    let j = this.array.length-1;
+    while(i <= j){
+      let m = Math.floor((i+j)*0.5);
+      const c = this.cmp(ele, this.array[m]);
+      if(c == 0){
+        return m;
+      }else if(c < 0){
+        j = m - 1;
+      }else{
+        i = m + 1;
+      }
+    }
+    return i;
+  }
+  //returns any element 
+  search(ele: T): Int32 | undefined{
+    let i = 0;
+    let j = this.array.length-1;
+    while(i <= j){
+      let m = Math.floor((i+j)*0.5);
+      const c = this.cmp(ele, this.array[m])
+      if(c == 0){
+        return m;
+      }else if(c < 0){
+        j = m - 1;
+      }else{
+        i = m + 1;
+      }
+    }
+    return undefined;
+  }
+}

package/src/utils/assert.ts

@@ -0,0 +1,8 @@
+const is_dev = process.env.NODE_ENV === "development";
+export function assertNotNull<T>(v: T): asserts v is NonNullable<T>{
+  if(is_dev){
+    if (v === null || v === undefined) {
+      throw Error("Not Null");
+    }
+  }
+}

package/src/utils/mixin.ts

@@ -0,0 +1,22 @@
+export type Constructor = new (...args: any[]) => {};
+export type GConstructor<T = {}> = new (...args: any[]) => T;
+
+class V{
+  protected val: number;
+  constructor(){
+    this.val = 0;
+  }
+  get v(){
+    return this.val;
+  }
+}
+
+type Vable = GConstructor<V>;
+
+function Add1<TBase extends Vable>(Base: TBase){
+  return class Add extends Base{
+    add1(){
+      this.val += 1;
+    }
+  }
+}