webglmusti 0.0.0

package/src/WebGL/Shaders/Vertex/vertex_old.ts

@@ -0,0 +1,289 @@
+import WebGL from "../../globals";
+import * as Mixin from "../../mixin"
+import type { Matrix3x3, TransformationMatrix3x3 } from "../../Matrix/matrix";
+import * as Shader from "../shader";
+
+//import * as MVP from "./Program/mvp";
+import * as Transform from "./Program/transform2d";
+//export const MvpShaderProgramMix = MVP.MvpShaderProgramMix;
+export const Transform2dShaderProgramMix = Transform.Transform2dShaderProgramMix;
+
+import * as VertexSource from "./Source/vertex_source";
+
+export function loadVertexShaders(){
+  SimpleVertexShader.load();
+  TranslateVertexShader.load();
+  TransformVertexShader.load();
+  TransformRelativeVertexShader.load();
+  MVPRelativeVertexShader.load();
+  MVPIndividualRelativeVertexShader.load();
+}
+
+export class MVPRelativeVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(VertexSource.mvp_rel)){
+        console.log("MVPVertex: vertex source not added");
+      }
+    }
+  }
+}
+
+export class MVPIndividualRelativeVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(VertexSource.mvp_i_rel)){
+        console.log("MVPVertex: vertex source not added");
+      }
+    }
+  }
+}
+
+
+export class SimpleVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(VertexSource.simple)){
+        console.log("Simple: vertex source not added");
+      }
+    }
+  }
+}
+
+/*
+export class SimpleShaderProgram extends Shader.NewCustomShaderProgram{
+  constructor(){
+    super();
+    this.name = TranslateShaderProgram.name;
+    this.setupVertex();
+  }
+  setupVertex(){
+    if(TranslateVertexShader.shader){
+      this.program.addVertex(TranslateVertexShader.shader);
+    }else{
+      console.log(`${this.name} not loaded`);
+    }
+  }
+  add_vertex_attribute_locations(): void {};
+  add_vertex_uniform_locations(): void {};
+}*/
+
+export class TranslateVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(VertexSource.translate)){
+        console.log("Translate: vertex source not added");
+      }
+    }
+  }
+}
+
+export class TransformRelativeVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(VertexSource.transform_rel)){
+        console.log("TranslateRelative: vertex source not added");
+      }
+    }
+  }
+}
+
+export class TranslateShaderProgram extends Shader.CustomShaderProgram{
+  private translate_uniform_location: WebGLUniformLocation | null;
+  constructor(){
+    super();
+    this.translate_uniform_location = null;
+    this.name = TranslateShaderProgram.name;
+    this.setupVertex();
+  }
+  private setupVertex(){
+    if(TranslateVertexShader.shader){
+      this.program.addVertex(TranslateVertexShader.shader);
+    }else{
+      console.log(`${this.name} not loaded`);
+    }
+  }
+  addAttributeLocations(): void {
+    
+  }
+  addUniformLocations(): void {
+    this.translate_uniform_location = this.program.getUniformLocation("translate");
+  }
+  setTranslate(x: number, y:number){
+    this.program.setFloat2(this.translate_uniform_location!, x, y)
+  }
+}
+
+class TransformVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(VertexSource.transform)){
+        console.log("Transform: vertex source not added");
+      }
+    }
+  }
+}
+
+export class TransformShaderProgram extends Shader.CustomShaderProgram{
+  private declare transform_uniform_location: WebGLUniformLocation | null;
+  constructor(){
+    super();
+    this.transform_uniform_location = null;
+    this.name = TransformShaderProgram.name;
+    this.setupVertex();
+  }
+  setupVertex(){
+    if(TranslateVertexShader.shader){
+      this.program.addVertex(TranslateVertexShader.shader);
+    }else{
+      console.log(`${this.name} not loaded`);
+    }
+  }
+  addAttributeLocations(): void {
+    
+  }
+  addUniformLocations(): void {
+    this.transform_uniform_location = this.program.getUniformLocation("u_matrix");
+  }
+  setTransform(matrix: Matrix3x3){
+    this.program.setMat3(this.transform_uniform_location!, matrix.matrix);
+  }
+}
+
+export function TransformShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Transform extends Base{
+    private declare transform_uniform_location: WebGLUniformLocation | null;
+    protected override setupVertex(){
+      if(TransformVertexShader.shader){
+        this.program.addVertex(TransformVertexShader.shader);
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    override addVertexAttributeLocations(): void {
+      
+    }
+    override addVertexUniformLocations(): void {
+      this.transform_uniform_location = this.program.getUniformLocation("u_matrix");
+    }
+    setTransform(matrix: TransformationMatrix3x3){
+      this.program.setMat3(this.transform_uniform_location!, matrix.matrix);
+    }
+
+  }
+}
+
+export function TranslateShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Translate extends Base{
+    private declare translate_uniform_location: WebGLUniformLocation | null;
+    protected override setupVertex(){
+      this.vertex_name = "TranslateShader";
+      if(TranslateVertexShader.shader){
+        this.program.addVertex(TranslateVertexShader.shader);
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    protected override addVertexAttributeLocations(): void {
+      
+    }
+    protected override addVertexUniformLocations(): void {
+      this.translate_uniform_location = this.program.getUniformLocation("translate");
+    }
+    setTranslate(x: number, y:number){
+      this.program.setFloat2(this.translate_uniform_location!, x, y)
+    }
+  }
+}
+
+export function TransformRelativeShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class TransformRelative extends Base{
+    private declare transform_uniform_location: WebGLUniformLocation | null;
+    //private declare relative_attribute_location: GLint | null;
+    protected override setupVertex(){
+      this.vertex_name = "TransformRelativeShader";
+      if(TransformRelativeVertexShader.shader){
+        this.program.addVertex(TransformRelativeVertexShader.shader!);
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    protected override addVertexAttributeLocations(): void {
+      //this.relative_attribute_location = this.program.getAttributeLocation("a_relative");
+    }
+    protected override addVertexUniformLocations(): void {
+      this.transform_uniform_location = this.program.getUniformLocation("u_matrix");
+    }
+    setTransform(matrix: TransformationMatrix3x3){
+      this.program.setMat3(this.transform_uniform_location!, matrix.matrix);
+    }
+  }
+}
+
+export function MVPRelativeShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class MVPRelative extends Base{
+    private declare mvp_uniform_location: WebGLUniformLocation | null;
+    protected override setupVertex(){
+      this.vertex_name = "MVPRelativeShader";
+      if(MVPRelativeVertexShader.shader){
+        this.program.addVertex(MVPRelativeVertexShader.shader!);
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    protected override addVertexAttributeLocations(): void {
+      //this.relative_attribute_location = this.program.getAttributeLocation("a_relative");
+    }
+    protected override addVertexUniformLocations(): void {
+      this.mvp_uniform_location = this.program.getUniformLocation("u_mvp");
+    }
+    setMVP(matrix: TransformationMatrix3x3){
+      this.program.setMat3(this.mvp_uniform_location!, matrix.matrix);
+    }
+  }
+}
+
+export function MVPIndividualRelativeShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class MVPIndividualRelative extends Base{
+    private declare model_uniform_location: WebGLUniformLocation | null;
+    private declare view_uniform_location: WebGLUniformLocation | null;
+    private declare perspective_uniform_location: WebGLUniformLocation | null;
+    protected override setupVertex(){
+      this.vertex_name = "MVPIndividualRelativeShader";
+      if(MVPRelativeVertexShader.shader){
+        this.program.addVertex(MVPRelativeVertexShader.shader!);
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    protected override addVertexAttributeLocations(): void {
+      //this.relative_attribute_location = this.program.getAttributeLocation("a_relative");
+    }
+    protected override addVertexUniformLocations(): void {
+      this.model_uniform_location = this.program.getUniformLocation("u_model");
+      this.view_uniform_location = this.program.getUniformLocation("u_view");
+      this.perspective_uniform_location = this.program.getUniformLocation("u_perspective");
+    }
+    setModel(matrix: TransformationMatrix3x3){
+      this.program.setMat3(this.model_uniform_location!, matrix.matrix);
+    }
+    setView(matrix: TransformationMatrix3x3){
+      this.program.setMat3(this.view_uniform_location!, matrix.matrix);
+    }
+    setPerspective(matrix: TransformationMatrix3x3){
+      this.program.setMat3(this.perspective_uniform_location!, matrix.matrix);
+    }
+  }
+}

package/src/WebGL/Shaders/custom.ts

@@ -0,0 +1,129 @@
+
+import WebGL from '../globals';
+import * as Vertex from './Vertex/vertex';
+import * as Fragment from './Fragment/fragment';
+import * as Shader from './shader'
+
+//TODO add shader programs here
+
+
+//const MVPMixin = Vertex.MvpShaderProgramMix(Shader.ShaderProgramMixin);
+//const TransformMixin = Vertex.Transform2dShaderProgramMix(Shader.ShaderProgramMixin);
+
+export class MVPColourProgram extends Fragment.ColourMixin(Vertex.Mvp2dMixin){};
+export class MVPColourAlphaProgram extends Fragment.ColourAlphaMixin(Vertex.Mvp2dMixin){};
+export class TransformColourProgram extends Fragment.ColourMixin(Vertex.Transform2dMixin){};
+export class TransformCircleProgram extends Fragment.CircleMixin(Vertex.Transform2dMixin){};
+export class MVPCircleProgram extends Fragment.CircleMixin(Vertex.Mvp2dMixin){};
+export class MVPCircleOnlyProgram extends Fragment.CircleOnlyMixin(Vertex.Mvp2dMixin){};
+export class MVPOutlineCircleProgram extends Fragment.CircleOutlineMixin(Vertex.Mvp2dMixin){};
+export class MVPSolidPathProgram extends Fragment.SolidPathMixin(Vertex.Mvp2dMixin){};
+export class MVPOutlineRectProgram extends Fragment.RectOutlineMixin(Vertex.Mvp2dMixin){};
+export class MVPSolidLineProgram extends Fragment.LineMixin(Vertex.Mvp2dMixin){};
+export class MVPSpriteSheetProgram extends Fragment.SpriteSheetMixin(Vertex.Mvp2dMixin){};
+export class MVPPathCenterCircleProgram extends Fragment.PathCentreCircleMixin(Vertex.Mvp2dMixin){};
+export class MVPTextureProgram extends Fragment.TextureMixin(Vertex.Mvp2dMixin){};
+
+export class MVPMultiColourPathProgram extends Fragment.MultiColourPathMixin(Vertex.Mvp2dMixin){};
+export class MVPMultiColourCentreCirclePathProgram extends Fragment.MultiColourCentreCirclePathMixin(Vertex.Mvp2dMixin){};
+export class MVPSpriteSheetColourProgram extends Fragment.SpriteSheetColourMixin(Vertex.Mvp2dMixin){};
+/*
+interface Colour{
+  setColour(r: GLfloat, g: GLfloat, b: GLfloat): void;
+}*/
+
+/*
+export class TestSimple extends Vertex.SimpleShaderProgram{
+  constructor(){
+    super();
+    this.setup();
+    this.link();
+  }
+  setupFragment(){
+    console.log("loading proper simple");
+    if(Fragment.SimpleFragmentShader.shader){
+      this.program.addFragment(Fragment.SimpleFragmentShader.shader);
+    }else{
+      console.log("SimpleFragmentShader not loaded");
+    }
+  }
+}*/
+/*
+export class TestTranslate extends Vertex.TranslateShaderProgram{
+  constructor(){
+    super();
+    this.setupFragment();
+    this.link();
+  }
+  private setupFragment(){
+    if(Fragment.SimpleFragmentShader.shader){
+      this.program.addFragment(Fragment.SimpleFragmentShader.shader);
+    }else{
+      console.log("SimpleFragmentShader not loaded");
+    }
+  }
+}
+
+export class TestColourTranslate extends Vertex.TranslateShaderProgram implements Colour {
+  private declare colour_uniform_location: WebGLUniformLocation | null;
+  constructor(){
+    super();
+    this.setupFragment();
+  }
+  private setupFragment(){
+    if(Fragment.ColourFragmentShader.shader){
+      this.program.addFragment(Fragment.ColourFragmentShader.shader);
+    }else{
+      console.log("ColourFragmentShader not loaded");
+    }
+  }
+  addUniformLocations(): void {
+    super.addUniformLocations();
+    this.colour_uniform_location =  this.program.getUniformLocation("colour");
+  };
+  setColour(r: GLfloat, g: GLfloat, b: GLfloat){
+    this.program.setFloat3(this.colour_uniform_location!, r, g, b);
+  }
+}
+
+export class TestColourTransform extends Vertex.TransformShaderProgram implements Colour{
+  private declare colour_uniform_location: WebGLUniformLocation | null;
+  constructor(){
+    super();
+    this.setupFragment();
+  }
+  private setupFragment(){
+    if(Fragment.ColourFragmentShader.shader){
+      this.program.addFragment(Fragment.ColourFragmentShader.shader);
+    }else{
+      console.log("ColourFragmentShader not loaded");
+    }
+  }
+  addUniformLocations(): void {
+    super.addUniformLocations();
+    this.colour_uniform_location =  this.program.getUniformLocation("colour");
+  };
+  setColour(r: GLfloat, g: GLfloat, b: GLfloat){
+    this.program.setFloat3(this.colour_uniform_location!, r, g, b);
+  }
+}
+
+const TransformMixin = Vertex.TransformShaderProgramMixin(Shader.ShaderProgramMixin);
+const TranslateMixin = Vertex.TranslateShaderProgramMixin(Shader.ShaderProgramMixin);
+const TransformRelativeMixin = Vertex.TransformRelativeShaderProgramMixin(Shader.ShaderProgramMixin);
+const MVPRelativeMixin = Vertex.MVPRelativeShaderProgramMixin(Shader.ShaderProgramMixin);
+//export class TransformColourMixin = Fragment.ColourShaderProgramMixin(TransformMixin);
+
+//export const TransformColourMixinT = Fragment.ColourShaderProgramMixin(TransformMixin);
+
+export class TransformColourProgram extends Fragment.ColourShaderProgramMixin(TransformMixin){};
+export class TranslateColourProgram extends Fragment.ColourShaderProgramMixin(TranslateMixin){};
+
+export class TransformCircleProgram extends Fragment.CircleShaderProgramMixin(TransformRelativeMixin){};
+
+export class MVPColourProgram extends Fragment.ColourShaderProgramMixin(MVPRelativeMixin){};
+export class MVPOutlineCircleProgram extends Fragment.CircleOutlineShaderProgramMixin(MVPRelativeMixin){};
+export class MVPOutlineRectProgram extends Fragment.RectOutlineShaderProgramMixin(MVPRelativeMixin){};
+
+export class MVPSolidLineProgram extends Fragment.SolidLineShaderProgramMixin(MVPRelativeMixin){};
+*/

package/src/WebGL/Shaders/shader.ts

@@ -0,0 +1,197 @@
+import WebGL from '../globals';
+import { TransformationMatrix3x3 } from '../Matrix/matrix';
+import * as Mixin from '../mixin';
+
+class RawShader{
+  shader: WebGLShader;
+  has_source: boolean;
+  constructor(type: GLenum){
+    if(WebGL.gl){
+      this.shader = WebGL.gl.createShader(type)!;
+      this.has_source = false;
+    }else{
+      throw new Error("WebGL not initialised or null");
+    }
+  }
+  addSource(source: string): boolean{
+    if(this.has_source){
+      console.log("Shader already has source");
+      return false;
+    }
+    WebGL.gl!.shaderSource(this.shader, source);
+    WebGL.gl!.compileShader(this.shader);
+    const success = WebGL.gl!.getShaderParameter(this.shader, WebGL.gl!.COMPILE_STATUS);
+    if(success){
+      this.has_source = true;
+      return true;
+    }
+    console.log(WebGL.gl!.getShaderInfoLog(this.shader));
+    return false;
+  }
+}
+
+export class VertexShader extends RawShader{
+  constructor(){
+    super(WebGL.gl!.VERTEX_SHADER);
+  }
+}
+
+export class FragmentShader extends RawShader{
+  constructor(){
+    super(WebGL.gl!.FRAGMENT_SHADER);
+  }
+}
+
+export class ShaderProgram{
+  program: WebGLProgram;
+  is_linked: boolean;
+  has_vertex: boolean;
+  has_fragment: boolean;
+
+  constructor(){
+    if(WebGL.gl){
+      this.program = WebGL.gl.createProgram();
+      this.is_linked = false;
+      this.has_vertex = false;
+      this.has_fragment = false;
+    }else{
+      throw new Error("WebGL not initialised or null");
+    }
+  }
+  addVertex(vs: VertexShader){
+    if(this.has_vertex){
+      console.log("Already has vertex");
+      return;
+    }
+    WebGL.gl!.attachShader(this.program, vs.shader);
+    this.has_vertex = true;
+  }
+
+  addFragment(fs: FragmentShader){
+    if(this.has_fragment){
+        console.log("Already has fragment");
+        return;
+    }
+    WebGL.gl!.attachShader(this.program, fs.shader);
+    this.has_fragment = true;
+  }
+
+  use(){
+    WebGL.gl!.useProgram(this.program);
+  }
+  link(): boolean{
+    if(!this.is_linked){
+      WebGL.gl!.linkProgram(this.program);
+      const success = WebGL.gl!.getProgramParameter(this.program, WebGL.gl!.LINK_STATUS);
+      if (success) {
+        this.is_linked = true;
+        return true;
+      }
+      console.log(WebGL.gl!.getProgramInfoLog(this.program));
+    }
+    return false;
+  }
+
+  getAttributeLocation(attr: string): GLint{
+    return WebGL.gl!.getAttribLocation(this.program, attr);
+  }
+  getUniformLocation(uni_name: string): WebGLUniformLocation | null{
+    return WebGL.gl!.getUniformLocation(this.program, uni_name);
+  }
+  setFloat(uni_location: WebGLUniformLocation, value: GLfloat){
+    WebGL.gl!.uniform1f(uni_location, value);
+  }
+  setFloat2(uni_location: WebGLUniformLocation, f1: GLfloat, f2:GLfloat){
+    WebGL.gl!.uniform2f(uni_location, f1, f2);
+  }
+  setFloat3(uni_location: WebGLUniformLocation, f1: GLfloat, f2:GLfloat, f3: GLfloat){
+    WebGL.gl!.uniform3f(uni_location, f1, f2, f3);
+  }
+  setFloat4(uni_location: WebGLUniformLocation, f1: GLfloat, f2:GLfloat, f3: GLfloat, f4: GLfloat){
+    WebGL.gl!.uniform4f(uni_location, f1, f2, f3, f4);
+  }
+  setInt(uni_location: WebGLUniformLocation, value: GLint){
+    WebGL.gl!.uniform1i(uni_location, value);
+  }
+  setMat3(uni_location: WebGLUniformLocation, matrix: Float32Array){
+    WebGL.gl!.uniformMatrix3fv(uni_location, false, matrix);
+  }
+  setMat4(uni_location: WebGLUniformLocation, matrix: Float32Array){
+    WebGL.gl!.uniformMatrix4fv(uni_location, false, matrix);
+  }
+}
+
+// custom shader for inheritance
+export abstract class CustomShaderProgram{
+  protected program: ShaderProgram;
+  protected declare name: string;
+  constructor(){
+    this.program = new ShaderProgram();
+  }
+  use(){
+    if(this.program.is_linked){
+      this.program.use();
+    }else{
+      console.log(`Cannot use: ${this.name} is not linked`);
+    }
+  }
+
+  link(){
+    if(!this.program.is_linked){
+      this.program.link();
+    }
+    this.addAttributeLocations();
+    this.addUniformLocations();
+  }
+  abstract addAttributeLocations(): void;
+  abstract addUniformLocations(): void;
+}
+
+// custom shader for mixins
+export class ShaderProgramMixin{
+  protected program: ShaderProgram;
+  protected declare vertex_name: string;
+  protected declare fragment_name: string;
+  constructor(){
+    this.program = new ShaderProgram();
+    this.setup();
+    this.link();
+  }
+  private setup(){
+    this.setupVertex();
+    this.setupFragment();
+  }
+  use(){
+    if(this.program.is_linked){
+      this.program.use();
+    }else{
+      throw new Error(`Cannot use: ${this.vertex_name} or ${this.fragment_name} is not linked`);
+    }
+  }
+
+  private link(){
+    if(!this.program.is_linked){
+      this.program.link();
+      this.addVertexAttributeLocations();
+      this.addVertexUniformLocations();
+      this.addFragmentUniformLocations();
+    }
+  }
+  protected setupVertex(): void{
+    throw new Error("Setup vertex needs to be overridden");
+  }
+  protected setupFragment(): void{
+    throw new Error("Setup fragment needs to be overridden");
+  }
+  protected addVertexAttributeLocations(): void{
+    throw new Error("Vertex attributes need to be overridden");
+  };
+  protected addVertexUniformLocations(): void{
+    throw new Error("Vertex uniforms need to be overridden");
+  };
+  protected addFragmentUniformLocations(): void{
+    throw new Error("Fragment uniforms need to be overridden");
+  };
+}
+
+export type CustomShaderProgramable = Mixin.GConstructor<ShaderProgramMixin>

package/src/WebGL/Shapes/Line.ts

@@ -0,0 +1,29 @@
+
+type Float = number;
+export class Line{
+  x1: Float;
+  y1: Float;
+  x2: Float;
+  y2: Float;
+  constructor(x1: Float, y1: Float, x2: Float, y2: Float){
+    this.x1 = x1; this.y1 = y1;
+    this.x2 = x2; this.y2 = y2;
+  }
+  angleInRadians(flip_y:boolean=true): Float{
+    const dx = this.x2-this.x1;
+    const dy = this.y2-this.y1;
+    return Math.atan2(flip_y ? -dy : dy, dx);
+  }
+  length(){
+    const dx = this.x2-this.x1;
+    const dy = this.y2-this.y1;
+
+    return Math.sqrt(dx*dx + dy*dy);
+  }
+  midPoint(): {x: Float, y: Float}{
+    const dx = this.x2-this.x1;
+    const dy = this.y2-this.y1;
+
+    return {x: this.x1+dx/2, y: this.y1+dy/2};
+  }
+}