webglmusti 0.0.0

package/src/WebGL/Shapes/Shapes.ts

@@ -0,0 +1,189 @@
+import WebGL from '../globals';
+
+export class RightTriangle{
+  private static positions = new Float32Array([
+    0, 0,
+    0, 0.5,
+    0.5, 0
+  ]);
+  private static positionBuffer: WebGLBuffer | undefined;
+  //private static p = new 
+  static draw(){
+    if(!RightTriangle.positionBuffer) RightTriangle.setup();
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      gl.bindBuffer(gl.ARRAY_BUFFER, RightTriangle.positionBuffer!);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+  }
+
+  private static setup(){
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      RightTriangle.positionBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, RightTriangle.positionBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(RightTriangle.positions), gl.STATIC_DRAW);
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    }else{
+      throw new Error("WebGL globals not initialised");
+    }
+  }
+}
+
+export class Quad{
+  private static positions = new Float32Array([
+    0, 0,
+    1, 0,
+    0, 1,
+    1, 1
+  ]);
+  private static positionBuffer: WebGLBuffer | undefined;
+  private static indices = new Uint16Array([0,1,2, 2,1,3]);
+  private static indicesBuffer: WebGLBuffer | undefined;
+
+  private static positionsArray = new Float32Array([
+    0, 0,
+    1, 0,
+    0, 1,
+    0, 1,
+    1, 0,
+    1, 1
+  ]);
+  private static positionsArrayBuffer: WebGLBuffer | undefined;
+
+
+  //private static p = new 
+  static draw(){
+    if(!Quad.positionBuffer) Quad.setup();
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Quad.indicesBuffer!);
+      gl.bindBuffer(gl.ARRAY_BUFFER, Quad.positionBuffer!);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+    }
+  }
+
+  static drawArrays(){
+    if(!Quad.positionsArrayBuffer) Quad.setup();
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      gl.bindBuffer(gl.ARRAY_BUFFER, Quad.positionsArrayBuffer!);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+  }
+
+  static drawRelative(){
+    if(!Quad.positionBuffer) Quad.setup();
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Quad.indicesBuffer!);
+      gl.bindBuffer(gl.ARRAY_BUFFER, Quad.positionBuffer!);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.bindBuffer(gl.ARRAY_BUFFER, Quad.positionBuffer!);
+      gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+    }
+  }
+
+  private static setup(){
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      Quad.positionBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, Quad.positionBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, Quad.positions, gl.STATIC_DRAW);
+
+      Quad.indicesBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Quad.indicesBuffer);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, Quad.indices, gl.STATIC_DRAW);
+      
+      Quad.positionsArrayBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, Quad.positionsArrayBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, Quad.positionsArray, gl.DYNAMIC_DRAW);
+      
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+      gl.enableVertexAttribArray(1);
+      gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+    }else{
+      throw new Error("WebGL globals not initialised");
+    }
+  }
+}
+
+export class CenterQuad{
+  private static positions = new Float32Array([
+    0.5, 0.5,
+    -0.5, 0.5,
+    0.5, -0.5,
+    -0.5, -0.5,
+    /*0.5, 0.5,
+    -0.5, 0.5,
+    0.5, -0.5,
+    -0.5, -0.5*/
+  ]);
+  private static positionBuffer: WebGLBuffer | undefined;
+  private static relativePositions = new Float32Array([
+    0, 0,
+    1, 0,
+    0, 1,
+    1, 1
+    /*0.5, 0.5,
+    -0.5, 0.5,
+    0.5, -0.5,
+    -0.5, -0.5*/
+  ]);
+  private static relativeBuffer: WebGLBuffer | undefined;
+  private static indices = new Uint16Array([0,1,2,2,1,3]);
+  private static indicesBuffer: WebGLBuffer | undefined;
+
+  static draw(){
+    if(!CenterQuad.positionBuffer) CenterQuad.setup();
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, CenterQuad.indicesBuffer!);
+      gl.bindBuffer(gl.ARRAY_BUFFER, CenterQuad.positionBuffer!);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+    }
+  }
+
+  static drawRelative(){
+    if(!CenterQuad.relativeBuffer) CenterQuad.setup();
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, CenterQuad.indicesBuffer!);
+      gl.bindBuffer(gl.ARRAY_BUFFER, CenterQuad.positionBuffer!);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.bindBuffer(gl.ARRAY_BUFFER, CenterQuad.relativeBuffer!);
+      gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0); // changes the bind buffers
+      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+    }
+  }
+
+  private static setup(){
+    if(WebGL.gl){
+      const gl = WebGL.gl;
+      CenterQuad.positionBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, CenterQuad.positionBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, CenterQuad.positions, gl.STATIC_DRAW);
+
+      gl.enableVertexAttribArray(0);
+      gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+      CenterQuad.indicesBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, CenterQuad.indicesBuffer);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, CenterQuad.indices, gl.STATIC_DRAW);
+
+      CenterQuad.relativeBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, CenterQuad.relativeBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, CenterQuad.relativePositions, gl.STATIC_DRAW);
+
+      gl.enableVertexAttribArray(1);
+      //gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
+    }
+  }
+}

package/src/WebGL/Texture/texture.ts

@@ -0,0 +1,214 @@
+import WebGL from "./../globals";
+import * as File from "./../Util/file"
+import * as Shader from "./../Shaders/custom"
+
+type Int32 = number;
+type VoidFunction = () => void;
+type ErrorFunction = (e: any) => void;
+const EmptyErrorFunction = (e: any) => {};
+
+const EmptyFunction = () => {};
+
+export class Texture{
+
+    static textures_loaded: Int32 = 0;
+    static textures_requested: Int32 = 0;
+    static textures_failed: Set<string> = new Set();
+    static path = "/";
+
+
+    texture: WebGLTexture | undefined;
+    is_loaded: boolean;
+    url: string
+    constructor(fn: string){
+      //const gl = WebGL.gl;
+      this.url = Texture.path+fn;
+      this.is_loaded = false;
+    }
+    load(onLoad:VoidFunction=EmptyFunction, onError:ErrorFunction=EmptyErrorFunction){
+      console.log(this.url);
+      if(!this.is_loaded){
+        Texture.textures_requested++;
+        const gl = WebGL.gl;
+        if(gl != undefined){
+          const img = new Image();
+          img.src = this.url;
+          img.onload = () => {
+            console.log(`Loaded texture ${this.url}`);
+            this.texture = gl.createTexture();
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.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, img);
+            Texture.textures_loaded++;
+            this.is_loaded = true;
+            onLoad();
+          }
+          img.onerror = (e) => {
+            onError(e);
+          }
+        }
+      }else{
+        onLoad();
+      }
+    }
+    //static loadList
+    active(id: Int32){
+      const gl = WebGL.gl;
+      if(this.texture && this.is_loaded && gl != undefined){
+        gl.activeTexture(gl.TEXTURE0+id);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        return true;
+      }
+
+      return false;
+    }
+}
+
+export class TextureCollection{
+  textures: Map<string, Texture>;
+  loaded: Int32;
+  loading: boolean;
+  to_load: Texture[]; // active to loading for 
+  finished_loading: Int32;
+  constructor(){
+    this.textures = new Map();
+    this.loaded = 0;
+    this.loading = false;
+    this.to_load = [];
+    this.finished_loading = 0;
+  }
+  active(key: string, id: Int32): boolean{
+    if(this.textures.has(key)){
+      const tex = this.textures.get(key)!;
+      if(!tex.is_loaded) return false;
+      tex.active(id);
+      return true;
+    }
+    return false;
+  }
+  getTexture(key: string): Texture | undefined{
+    return this.textures.get(key);
+  }
+  addTexture(key: string, texture: Texture){
+    this.textures.set(key, texture);
+  }
+  load(onAllLoaded: VoidFunction=EmptyFunction){
+    function finishLoading(fl: TextureCollection){
+      if(fl.finished_loading == fl.to_load.length){
+        console.log("end loading texture collection");
+        onAllLoaded();
+        fl.loading = false;
+      }
+    }
+    if(!this.loading){
+      console.log("start loading textures");
+      this.loading = true;
+      this.to_load = [];
+      for(const [name, tex] of this.textures){
+        if(!tex.is_loaded) this.to_load.push(tex);
+      }
+
+      for(const tex of this.to_load){
+        tex.load(() => {
+          this.loaded++;
+          this.finished_loading++;
+          console.log(`finished ${tex.url}`);
+          finishLoading(this);
+        },
+        () => {
+          console.log(`error loading ${tex.url}`);
+          this.finished_loading++;
+          finishLoading(this);
+        });
+      }
+    }
+  }
+  addFromUrl(key: string, file: string){
+    const texture = new Texture(file);
+    this.textures.set(key, texture);
+  }
+}
+
+type SpriteSheetPosition = {
+  x: Int32;
+  y: Int32;
+}
+type Char = string;
+
+interface FontSheetShader{
+  setWidth: (w: Int32) => void;
+  setHeight: (h: Int32) => void;
+  setX: (x: Int32) => void;
+  setY: (y: Int32) => void;
+}
+
+export class CustomFont{
+  coord_to_sheet_position: Map<Char, SpriteSheetPosition>
+  font_sheet: Texture;
+  font_name: string;
+  loaded: boolean;
+  width: Int32;
+  height: Int32;
+  
+  //fn requires extension e.g. .png
+  constructor(font_sheet_fn: string){
+    this.font_sheet = new Texture(font_sheet_fn);
+    this.font_name = font_sheet_fn.split('.')[0];
+    this.loaded = false;
+    this.coord_to_sheet_position = new Map();
+    this.width = 0;
+    this.height = 0;
+    //test font settings
+    //this.coord_to_sheet_position.set("a", {x: 0, y: 0});
+    //this.coord_to_sheet_position.set("b", {x: 1, y: 0});
+    //this.coord_to_sheet_position.set("c", {x: 2, y: 0});
+  }
+  active(id: Int32){
+    this.font_sheet.active(id);
+  }
+  load(onLoaded:()=>void=()=>{}, onError?: (e: any) => void){
+    this.font_sheet.load(
+      () =>
+      File.fetchPublicFile(`${this.font_name}.txt`, (txt) => {
+        const sp = txt.split('\r\n');
+        const dims = sp[0].split(' ');
+        this.width = parseInt(dims[0]);
+        this.height = parseInt(dims[1]);
+        for(let i = 1; i < sp.length; i++){
+          const x = (i-1)%this.width;
+          const y = Math.floor((i-1)/this.width);
+          for(let j = 0; j < sp[i].length; j++){
+            this.coord_to_sheet_position.set(sp[i][j], {x, y});
+          }
+        }
+        console.log(`Font: loaded success, ${this.font_name}`);
+        onLoaded();
+        this.loaded = true;
+      },
+      (e) => {
+        console.log(`${this.font_name}.txt - error`);
+        if(onError) onError(e);
+      }), 
+      (e) => { 
+        if(onError) onError(e);
+      }
+    );
+  }
+
+  setChar(shader: FontSheetShader, char: Char){
+    shader.setWidth(this.width);
+    shader.setHeight(this.height);
+    const coord = this.coord_to_sheet_position.get(char);
+    if(coord != undefined){
+      shader.setX(coord.x);
+      shader.setY(coord.y);
+    }
+  }
+}
+
+
+//export class Texture

package/src/WebGL/Util/file.ts

@@ -0,0 +1,24 @@
+export function fetchPublicFile(fn: string, success:(text: string) => void, 
+error:(reason: any) => void=(e)=>{console.log(e)}){
+  fetch(`/${fn}`).then(async (res) => {
+    if(res.ok){
+      const text = await res.blob().then((b) => {
+        if(b.type == "text/plain"){
+          return b.text();
+        }
+        return undefined;
+      });
+
+      return text;
+    }
+    return res.text();
+  }).then((text) => {
+    if(text != undefined){
+      success(text);
+    }else{
+      error("public file is not a text file");
+    }
+  }).catch((e) => {
+    error(e);
+  });
+}

package/src/WebGL/app.ts

@@ -0,0 +1,150 @@
+import WebGL from "../WebGL/globals";
+import * as WebGLGlobals from "../WebGL/globals";
+
+type Int32 = number;
+type Float = number;
+
+type VoidFunction = () => void;
+const EmptyFunction: VoidFunction = () => {};
+type TimeTakenFunction = (t:Float) => void
+type OnFinishFunction = (onFinish: VoidFunction) => void;
+
+interface IEngine{
+  addEvents: () => void;
+  loadResources: () => void;
+  update: TimeTakenFunction;
+  resize: (w: Int32, h:Int32) => void
+}
+
+export class BaseEngine implements IEngine{
+  constructor(){};
+
+  //to override
+  loadResources(){};
+  
+  //to override
+  update(t: Float){};
+
+  addEvents(){
+    this.addKeyEvents();
+  }
+  private addKeyEvents(){
+    window.addEventListener("keydown", (ev) => this.handleKeyDown(ev));
+    window.addEventListener("keyup", (ev) => this.handleKeyUp(ev));
+    window.addEventListener("mousemove", (ev) => this.handleMouseMove(ev));
+    window.addEventListener("mousedown", (ev) => this.handleMouseDown(ev));
+    window.addEventListener("mouseup", (ev) => this.handleMouseUp(ev));
+  }
+  resize(w: Int32, h:Int32){
+
+  }
+
+  //to override
+  protected handleKeyDown(ev: KeyboardEvent){};
+  //to override
+  protected handleKeyUp(ev: KeyboardEvent){};
+  //to override
+  protected handleMouseMove(ev: MouseEvent){};
+  //to override
+  protected handleMouseDown(ev: MouseEvent){};
+  //to override
+  protected handleMouseUp(ev: MouseEvent){};
+  //to override
+  protected handleScrollWheel(){
+    
+  }
+
+}
+
+export interface IEngineRenderer<E extends IEngine>{
+  render?: (engine: E) => void;
+  renderUpdate?: (time: Int32, engine: E) => void;
+  loadTextures?: OnFinishFunction;
+  resize?: (w: Int32, h: Int32) => void;
+  //loadResources: () => void;
+}
+
+interface IRenderer{
+  render: () => void;
+  loadShaders?: () => void; // shaders usually already preloaded (added by raw file and compiled on shader class construction)
+  loadTextures?: () => void;
+}
+
+export class App<E extends IEngine>{
+  private engine: E;
+  private renderer: IEngineRenderer<E>;
+
+  constructor(engine: E, renderer: IEngineRenderer<E>){
+    this.engine = engine;
+    this.renderer = renderer;
+  }
+  addEvents(){
+    this.engine.addEvents();
+  }
+  getRenderer(): IEngineRenderer<E>{
+    return this.renderer;
+  }
+  resize(w: Int32, h: Int32, canvas: HTMLCanvasElement){
+    this.engine.resize(w, h);
+    if(this.renderer.resize) this.renderer.resize(w, h);
+    WebGL.resetViewport(canvas);
+  }
+
+  //to override?
+  loadResources(onLoaded:VoidFunction=()=>{}){
+    //this.engine.loadTextures();
+    if(this.renderer.loadTextures){
+      this.renderer.loadTextures(onLoaded);
+    }else{
+      onLoaded();
+    }
+  }
+  update(t: Float){
+    this.engine.update(t);
+  }
+  draw(){
+    //this.renderer.render(this.engine);
+  }
+  initApp(){
+    this.addEvents();
+    this.appCycle(0);
+  }
+  appCycle(t: Float){
+    this.update(t);
+    if(this.renderer.render) this.renderer.render(this.engine);
+    requestAnimationFrame((t) => this.appCycle(t));
+  }
+}
+
+
+//includes text
+export class SimpleAppRenderer<E extends BaseEngine> implements IEngineRenderer<E>{
+  fonts: WebGLGlobals.FontLoader;
+  text_drawer: WebGLGlobals.TextDrawer;
+  orthographic: WebGLGlobals.Matrix.TransformationMatrix3x3;
+  font_names: string[];
+  constructor(w: Int32, h: Int32){
+    this.fonts = new WebGLGlobals.FontLoader();
+    this.text_drawer = new WebGLGlobals.TextDrawer();
+    this.orthographic = WebGLGlobals.Matrix.TransformationMatrix3x3.orthographic(0, w, h, 0);
+    this.font_names = [];
+  }
+  loadTextures(onLoad: VoidFunction=EmptyFunction){
+    console.log("loading textures");
+    for(const fn of this.font_names){
+      this.fonts.addFont(fn);
+    }
+    this.fonts.loadFonts(() => {
+      if(this.font_names.length != 0){
+        this.text_drawer.setFont(this.fonts.getFont(this.font_names[0])!);
+      }
+      //this.text_drawer.loadFont(); //this does nothing
+      console.log("finished loading");
+      if(onLoad) onLoad();
+      
+    });
+  }
+  resize(w: Int32, h: Int32){
+    this.orthographic = WebGLGlobals.Matrix.TransformationMatrix3x3.orthographic(0, w, h, 0);
+  }
+}

package/src/WebGL/colour.ts

@@ -0,0 +1,71 @@
+
+type Float = number;
+type Int32 = number;
+export type ColourRGB = {
+  red: Float;
+  green: Float;
+  blue: Float;
+}
+
+export type ColourRGBA = ColourRGB & {
+  alpha: Float;
+}
+
+
+export class ColourUtils{
+  static mix(c1: ColourRGB, c2: ColourRGB): ColourRGB{
+    const red = (c1.red+c2.red)*0.5;
+    const green = (c1.green+c2.green)*0.5;
+    const blue = (c1.blue+c2.blue)*0.5;
+    return {red, green, blue};
+  }
+  static fromRGB(red: Float, green: Float, blue: Float): ColourRGB{
+    return {red, green, blue};
+  }
+  static toRGBA(colour: ColourRGB, alpha: Float): ColourRGBA{
+    return {...colour, alpha};
+  }
+  static black(): ColourRGB{
+    return this.fromRGB(0, 0, 0);
+  }
+  static white(): ColourRGB{
+    return this.fromRGB(1, 1, 1);
+  }
+  static red():ColourRGB{
+    return this.fromRGB(1, 0, 0);
+  }
+  static green():ColourRGB{
+    return this.fromRGB(0, 1, 0);
+  }
+  static blue():ColourRGB{
+    return this.fromRGB(0, 0, 1);
+  }
+  static yellow():ColourRGB{
+    return this.fromRGB(1, 1, 0);
+  }
+  static pink():ColourRGB{
+    return this.fromRGB(1, 0, 1);
+  }
+  static cyan():ColourRGB{
+    return this.fromRGB(0, 1, 1);
+  }
+  static grey(a: Float=0.5): ColourRGB{
+    return this.fromRGB(a, a, a);
+  }
+  static random(): ColourRGB{
+    return this.fromRGB(Math.random(), Math.random(), Math.random());
+  }
+  static linearTransitionColours(c1: ColourRGB, c2: ColourRGB, n: Int32): ColourRGB[]{
+    const colours: ColourRGB[] = [];
+    const step_r = (c2.red-c1.red)/(n+1);
+    const step_g = (c2.green-c1.green)/(n+1);
+    const step_b = (c2.blue-c1.blue)/(n+1);
+
+    for(let i = 1; i <= n; i++){
+      const col = ColourUtils.fromRGB(c1.red+step_r*i, c1.green+step_g*i, c1.blue+step_b*i);
+      colours.push(col);
+    }
+
+    return colours;
+  }
+}