webglmusti 0.0.0

package/src/WebGL/Shaders/Fragment/Source/sprite_sheet.frag

@@ -0,0 +1,17 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform sampler2D u_texture_id;
+uniform float u_width;
+uniform float u_height;
+uniform float u_x;
+uniform float u_y;
+
+void main(){
+    float px = (u_x+v_relative.x)/u_width;
+	float py = (u_y+v_relative.y)/u_height;
+
+    gl_FragColor = texture2D(u_texture_id, vec2(px, py));
+}

package/src/WebGL/Shaders/Fragment/Source/sprite_sheet_colour.frag

@@ -0,0 +1,19 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+
+uniform sampler2D u_texture_id;
+uniform float u_width;
+uniform float u_height;
+uniform float u_x;
+uniform float u_y;
+uniform vec3 u_colour; //colour
+
+void main(){
+    float px = (u_x+v_relative.x)/u_width;
+	float py = (u_y+v_relative.y)/u_height;
+    
+    gl_FragColor = texture2D(u_texture_id, vec2(px, py)).a*vec4(u_colour, 1.0);
+}

package/src/WebGL/Shaders/Fragment/Source/texture.frag

@@ -0,0 +1,11 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+
+uniform sampler2D u_texture_id;
+
+void main(){
+    gl_FragColor = texture2D(u_texture_id, v_relative);
+}

package/src/WebGL/Shaders/Fragment/fragment.ts

@@ -0,0 +1,43 @@
+import * as Shader from './../shader';
+import * as Circle from './Program/circle';
+import * as CircleOnly from './Program/circle_only'
+import * as CircleOutline from './Program/circle_outline';
+import * as Colour from './Program/colour';
+import * as ColourAlpha from './Program/colour_alpha';
+import * as Line from './Program/line';
+import * as PathCentreCircle from './Program/path_centre_circle';
+import * as MultiColourPath from './Program/multi_colour_path';
+import * as RectOutline from './Program/rect_outline';
+import * as SolidPath from './Program/solid_path';
+import * as SpriteSheet from './Program/sprite_sheet';
+import * as Texture from './Program/texture';
+import * as MultiColourCentreCirclePath from './Program/multi_colour_centre_circle_path'
+import * as SpriteSheetColour from './Program/sprite_sheet_colour'
+
+export function loadFragmentShaders(){
+  Circle.CircleFragmentShader.load();
+  CircleOutline.CircleOutlineFragmentShader.load();
+  //Colour.ColourFragmentShader.load();
+  Line.LineFragmentShader.load();
+  MultiColourPath.MultiColourPathFragmentShader.load();
+  PathCentreCircle.PathCentreCircleFragmentShader.load();
+  RectOutline.RectOutlineFragmentShader.load();
+  SolidPath.SolidPathFragmentShader.load();
+  SpriteSheet.SpriteSheetFragmentShader.load();
+  Texture.TextureFragmentShader.load();
+  MultiColourCentreCirclePath.MultiColourCentreCirclePathFragmentShader.load();
+}
+export const CircleMixin = Circle.CircleShaderProgramMix;
+export const CircleOnlyMixin = CircleOnly.CircleOnlyShaderProgramMix;
+export const CircleOutlineMixin = CircleOutline.CircleOutlineShaderProgramMix;
+export const ColourMixin = Colour.ColourShaderProgramMix;
+export const ColourAlphaMixin = ColourAlpha.ColourAlphaShaderProgramMix;
+export const LineMixin = Line.LineShaderProgramMix;
+export const MultiColourPathMixin = MultiColourPath.MultiColourPathShaderProgramMix;
+export const PathCentreCircleMixin = PathCentreCircle.PathCentreCircleShaderProgramMix;
+export const RectOutlineMixin = RectOutline.RectOutlineShaderProgramMix;
+export const SolidPathMixin = SolidPath.SolidPathShaderProgramMix;
+export const SpriteSheetMixin = SpriteSheet.SpriteSheetShaderProgramMix;
+export const TextureMixin = Texture.TextureShaderProgramMix;
+export const MultiColourCentreCirclePathMixin = MultiColourCentreCirclePath.MultiColourCentreCirclePathShaderProgramMix;
+export const SpriteSheetColourMixin = SpriteSheetColour.SpriteSheetColourShaderProgramMix;

package/src/WebGL/Shaders/Fragment/fragment_old.ts

@@ -0,0 +1,261 @@
+import * as Shader from '../shader';
+import * as FragmentSource from './Source/fragment_source';
+
+
+import * as SolidPath from './Program/solid_path'
+
+export function loadFragmentShaders(){
+  SimpleFragmentShader.load();
+  ColourFragmentShader.load();
+  CircleFragmentShader.load();
+  OutlineCircleFragmentShader.load();
+  OutlineRectFragmentShader.load();
+  SolidLineFragmentShader.load();
+  SolidPathFragmentShader.load();
+}
+
+export class SimpleFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.simple)){
+        console.log("Simple: fragment source not added");
+      }
+    }
+  }
+}
+
+export class ColourFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.colour)){
+        console.log("Colour: fragment source not added");
+      }
+    }
+  }
+}
+
+export class CircleFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.circle)){
+        console.log("Circle: fragment source not added");
+      }
+    }
+  }
+}
+
+export class OutlineCircleFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.circle_outline)){
+        console.log("Circle outline: source not added");
+      }
+    }
+  }
+}
+
+export class OutlineRectFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.rect_outline)){
+        console.log("Rect outline: source not added");
+      }
+    }
+  }
+}
+
+export class SolidLineFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.solid_line)){
+        console.log("SolidLine: source not added");
+      }
+    }
+  }
+}
+
+export class SolidPathFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(!this.shader){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(FragmentSource.solid_path)){
+        console.log("SolidPath: source not added");
+      }
+    }
+  }
+}
+
+export function ColourShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Colour extends Base{
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = "ColourShader";
+      if(ColourFragmentShader.shader){
+        this.program.addFragment(ColourFragmentShader.shader);
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void {
+      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 function CircleShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Circle extends Base{
+    private declare radius_uniform_location: WebGLUniformLocation | null;
+    private declare centre_uniform_location: WebGLUniformLocation | null;
+    private declare circle_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = "CircleShader";
+      if(CircleFragmentShader.shader){
+        this.program.addFragment(CircleFragmentShader.shader);
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.radius_uniform_location = this.program.getUniformLocation("u_radius");
+      this.centre_uniform_location = this.program.getUniformLocation("u_centre");
+      this.circle_colour_uniform_location = this.program.getUniformLocation("u_circle_colour");
+    }
+    setRadius(r: GLfloat){
+      this.program.setFloat(this.radius_uniform_location!, r);
+    }
+    setCentre(x: GLfloat, y: GLfloat){
+      this.program.setFloat2(this.centre_uniform_location!, x, y);
+    }
+    setCircleColour(r: GLfloat, g: GLfloat, b: GLfloat){
+      this.program.setFloat3(this.circle_colour_uniform_location!, r, g, b);
+    }
+  }
+}
+
+export function CircleOutlineShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class CircleOutline extends Base{
+    private declare radius_uniform_location: WebGLUniformLocation | null;
+    private declare centre_uniform_location: WebGLUniformLocation | null;
+    private declare outline_radius_uniform_location: WebGLUniformLocation | null;
+    private declare outline_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = "CircleOutlineShader";
+      if(OutlineCircleFragmentShader.shader){
+        this.program.addFragment(OutlineCircleFragmentShader.shader);
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.radius_uniform_location = this.program.getUniformLocation("u_radius");
+      this.centre_uniform_location = this.program.getUniformLocation("u_centre");
+      this.outline_radius_uniform_location = this.program.getUniformLocation("u_outline_radius");
+      this.outline_colour_uniform_location = this.program.getUniformLocation("u_outline_colour");
+    }
+    setRadius(r: GLfloat){
+      this.program.setFloat(this.radius_uniform_location!, r);
+    }
+    setCentre(x: GLfloat, y: GLfloat){
+      this.program.setFloat2(this.centre_uniform_location!, x, y);
+    }
+    setOutlineRadius(r: GLfloat){
+      this.program.setFloat(this.outline_radius_uniform_location!, r);
+    }
+    setOutlineColour(r: GLfloat, g: GLfloat, b: GLfloat, a: GLfloat=1.0){
+      this.program.setFloat4(this.outline_colour_uniform_location!, r, g, b, a);
+    }
+  }
+}
+
+export function RectOutlineShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class RectOutline extends Base{
+    private declare outline_colour_uniform_location: WebGLUniformLocation | null;
+    private declare outline_ratio_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = "RectOutlineShader";
+      if(OutlineRectFragmentShader.shader){
+        this.program.addFragment(OutlineRectFragmentShader.shader);
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.outline_colour_uniform_location = this.program.getUniformLocation("u_outline_colour");
+      this.outline_ratio_uniform_location = this.program.getUniformLocation("u_outline_ratio");
+    }
+    setOutlineRatio(r: GLfloat){
+      this.program.setFloat(this.outline_ratio_uniform_location!, r);
+    }
+    setOutlineColour(r: GLfloat, g: GLfloat, b: GLfloat, a: GLfloat=1.0){
+      this.program.setFloat4(this.outline_colour_uniform_location!, r, g, b, a);
+    }
+  }
+}
+
+export function SolidLineShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class SolidLine extends Base{
+    private declare equation_uniform_location: WebGLUniformLocation | null;
+    private declare thickness_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = "SolidLineShader";
+      if(SolidLineFragmentShader.shader){
+        this.program.addFragment(SolidLineFragmentShader.shader);
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void {
+      this.equation_uniform_location = this.program.getUniformLocation("u_equation");
+      this.thickness_uniform_location = this.program.getUniformLocation("u_thickness");
+    }
+    setThickness(thickness:GLfloat){
+      this.program.setFloat(this.thickness_uniform_location!, thickness);
+    }
+    setEquation(a: number, b: number, c: number){
+      this.program.setFloat3(this.equation_uniform_location!, a, b, c);
+    }
+  };
+}
+
+export function SolidPathShaderProgramMixin<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class SolidPath extends Base{
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    private declare size_uniform_location: WebGLUniformLocation | null;
+    private declare left_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = "SolidPathShader";
+      if(SolidPathFragmentShader.shader){
+        this.program.addFragment(SolidPathFragmentShader.shader);
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void {
+      this.colour_uniform_location = this.program.getUniformLocation("u_colour");
+      this.size_uniform_location = this.program.getUniformLocation("u_size");
+      this.left_uniform_location = this.program.getUniformLocation("u_left");
+    }
+    setSize(thickness:GLfloat){
+      this.program.setFloat(this.size_uniform_location!, thickness);
+    }
+    setColour(r: number, g: number, b: number){
+      this.program.setFloat3(this.colour_uniform_location!, r, g, b);
+    }
+  };
+}

package/src/WebGL/Shaders/Vertex/Program/mvp2d.ts

@@ -0,0 +1,41 @@
+import Mvp2d from './../Source/mvp2d.vert?raw';
+import * as Matrix from './../../../Matrix/matrix';
+import * as Shader from './../../shader';
+
+export class Mvp2dVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(Mvp2d)){
+        console.log('Mvp2d: vertex source not added');
+      }
+    }
+  }
+}
+
+export function Mvp2dShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Mvp2d extends Base{
+    private declare position_attribute_location: GLint | null;
+    private declare relative_attribute_location: GLint | null;
+    private declare mvp_uniform_location: WebGLUniformLocation | null;
+    protected override setupVertex(){
+      this.vertex_name = 'Mvp2dShader';
+      if(Mvp2dVertexShader.shader){
+        this.program.addVertex(Mvp2dVertexShader.shader)
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    protected override addVertexAttributeLocations(): void{
+      this.position_attribute_location = this.program.getAttributeLocation('a_position');
+      this.relative_attribute_location = this.program.getAttributeLocation('a_relative');
+    }
+    protected override addVertexUniformLocations(): void{
+      this.mvp_uniform_location = this.program.getUniformLocation('u_mvp');
+    }
+    setMvp(mat: Matrix.Matrix3x3){
+      this.program.setMat3(this.mvp_uniform_location!, mat.matrix);
+    }
+  }
+}

package/src/WebGL/Shaders/Vertex/Program/transform2d.ts

@@ -0,0 +1,39 @@
+import Transform2d from './../Source/transform2d.vert?raw';
+import * as Matrix from './../../../Matrix/matrix';
+import * as Shader from './../../shader';
+
+export class Transform2dVertexShader{
+  static shader?: Shader.VertexShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.VertexShader();
+      if(!this.shader.addSource(Transform2d)){
+        console.log('Transform2d: vertex source not added');
+      }
+    }
+  }
+}
+
+export function Transform2dShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Transform2d extends Base{
+    private declare position_attribute_location: GLint | null;
+    private declare matrix_uniform_location: WebGLUniformLocation | null;
+    protected override setupVertex(){
+      this.vertex_name = 'Transform2dShader';
+      if(Transform2dVertexShader.shader){
+        this.program.addVertex(Transform2dVertexShader.shader)
+      }else{
+        throw new Error(`${this.vertex_name} not loaded`);
+      }
+    }
+    protected override addVertexAttributeLocations(): void{
+      this.position_attribute_location = this.program.getAttributeLocation('position');
+    }
+    protected override addVertexUniformLocations(): void{
+      this.matrix_uniform_location = this.program.getUniformLocation('u_matrix');
+    }
+    setMatrix(mat: Matrix.Matrix3x3){
+      this.program.setMat3(this.matrix_uniform_location!, mat.matrix);
+    }
+  }
+}

package/src/WebGL/Shaders/Vertex/Source/mvp2d.vert

@@ -0,0 +1,17 @@
+attribute vec2 a_position; // pos 0
+attribute vec2 a_relative; // pos 1
+
+uniform mat3 u_mvp;
+//uniform mat3 u_view;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+void main(){
+  vec2 position = (u_mvp*vec3(a_position, 1)).xy;
+
+  gl_Position = vec4(position, 1.0, 1.0);
+
+  v_position = position;
+  v_relative = a_relative;
+}

package/src/WebGL/Shaders/Vertex/Source/mvp_i_2d.vert

@@ -0,0 +1,18 @@
+attribute vec2 a_position; // pos 0
+attribute vec2 a_relative; // pos 1
+
+uniform mat3 u_model;
+uniform mat3 u_view;
+uniform mat3 u_perspective;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+void main(){
+  vec2 position = (u_perspective*u_view*u_model*vec3(a_position, 1)).xy;
+
+  gl_Position = vec4(position, 1.0, 1.0);
+
+  v_position = position;
+  v_relative = a_relative;
+}

package/src/WebGL/Shaders/Vertex/Source/simple.vert

@@ -0,0 +1,9 @@
+attribute vec2 position;
+
+varying vec2 v_position;
+
+void main(){
+  gl_Position = vec4(position.x, position.y, 1, 1);
+
+  v_position = position;
+}

package/src/WebGL/Shaders/Vertex/Source/transform2d.vert

@@ -0,0 +1,13 @@
+attribute vec2 position;
+
+uniform mat3 u_matrix;
+
+varying vec2 v_position;
+
+void main(){
+  vec2 position = (u_matrix*vec3(position, 1)).xy;
+
+  gl_Position = vec4(position, 1.0, 1.0);
+
+  v_position = position;
+}

package/src/WebGL/Shaders/Vertex/Source/transform2d_rel.vert

@@ -0,0 +1,16 @@
+attribute vec2 a_position; // pos 0
+attribute vec2 a_relative; // pos 1
+
+uniform mat3 u_matrix;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+void main(){
+  vec2 position = (u_matrix*vec3(a_position, 1)).xy;
+
+  gl_Position = vec4(position, 1.0, 1.0);
+
+  v_position = position;
+  v_relative = a_relative;
+}

package/src/WebGL/Shaders/Vertex/Source/translate2d.vert

@@ -0,0 +1,7 @@
+attribute vec2 position;
+
+uniform vec2 translate;
+
+void main(){
+  gl_Position = vec4(position.x+translate.x, position.y+translate.y, 1, 1);
+}

package/src/WebGL/Shaders/Vertex/Source/vertex_source.ts

@@ -0,0 +1,13 @@
+import Simple from "./simple.vert?raw";
+import Translate from "./translate2d.vert?raw"
+import Transform from "./transform2d.vert?raw"
+import TransformRelative from "./transform2d_rel.vert?raw"
+import MVPRel from "./mvp2d.vert?raw";
+import MVPIRel from "./mvp_i_2d.vert?raw"
+
+export const simple = Simple;
+export const translate = Translate;
+export const transform = Transform;
+export const transform_rel = TransformRelative;
+export const mvp_rel = MVPRel;
+export const mvp_i_rel = MVPIRel;

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

@@ -0,0 +1,10 @@
+import * as Shader from './../shader';
+import * as Mvp2d from './Program/mvp2d';
+import * as Transform2d from './Program/transform2d';
+
+export function loadVertexShaders(){
+  Mvp2d.Mvp2dVertexShader.load();
+  Transform2d.Transform2dVertexShader.load();
+}
+export const Mvp2dMixin = Mvp2d.Mvp2dShaderProgramMix(Shader.ShaderProgramMixin);
+export const Transform2dMixin = Transform2d.Transform2dShaderProgramMix(Shader.ShaderProgramMixin);