webglmusti 0.0.0

package/src/WebGL/Shaders/Fragment/Program/multi_colour_path.ts

@@ -0,0 +1,69 @@
+import MultiColourPath from './../Source/multi_colour_path.frag?raw';
+import * as Shader from './../../shader';
+
+export class MultiColourPathFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(MultiColourPath)){
+        console.log('MultiColourPath: fragment source not added');
+      }
+    }
+  }
+}
+
+export function MultiColourPathShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class MultiColourPath extends Base{
+    private declare left_colour_uniform_location: WebGLUniformLocation | null;
+    private declare right_colour_uniform_location: WebGLUniformLocation | null;
+    private declare top_colour_uniform_location: WebGLUniformLocation | null;
+    private declare bot_colour_uniform_location: WebGLUniformLocation | null;
+    private declare mid_colour_uniform_location: WebGLUniformLocation | null;
+    private declare circle_radius_uniform_location: WebGLUniformLocation | null;
+    private declare size_uniform_location: WebGLUniformLocation | null;
+    private declare background_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'MultiColourPathShader';
+      if(MultiColourPathFragmentShader.shader){
+        this.program.addFragment(MultiColourPathFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.left_colour_uniform_location = this.program.getUniformLocation('u_left_colour');
+      this.right_colour_uniform_location = this.program.getUniformLocation('u_right_colour');
+      this.top_colour_uniform_location = this.program.getUniformLocation('u_top_colour');
+      this.bot_colour_uniform_location = this.program.getUniformLocation('u_bot_colour');
+      this.mid_colour_uniform_location = this.program.getUniformLocation('u_mid_colour');
+      this.circle_radius_uniform_location = this.program.getUniformLocation('u_circle_radius');
+      this.size_uniform_location = this.program.getUniformLocation('u_size');
+      this.background_colour_uniform_location = this.program.getUniformLocation('u_background_colour');
+    }
+    setLeftColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.left_colour_uniform_location!, a, b, c);
+    }
+    setRightColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.right_colour_uniform_location!, a, b, c);
+    }
+    setTopColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.top_colour_uniform_location!, a, b, c);
+    }
+    setBotColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.bot_colour_uniform_location!, a, b, c);
+    }
+    setMidColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.mid_colour_uniform_location!, a, b, c);
+    }
+    setCircleRadius(a: GLfloat){
+      this.program.setFloat(this.circle_radius_uniform_location!, a);
+    }
+    setSize(a: GLfloat){
+      this.program.setFloat(this.size_uniform_location!, a);
+    }
+    setBackgroundColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.background_colour_uniform_location!, a, b, c);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/path_centre_circle.ts

@@ -0,0 +1,69 @@
+import PathCentreCircle from './../Source/path_centre_circle.frag?raw';
+import * as Shader from './../../shader';
+
+export class PathCentreCircleFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(PathCentreCircle)){
+        console.log('PathCentreCircle: fragment source not added');
+      }
+    }
+  }
+}
+
+export function PathCentreCircleShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class PathCentreCircle extends Base{
+    private declare left_uniform_location: WebGLUniformLocation | null;
+    private declare right_uniform_location: WebGLUniformLocation | null;
+    private declare top_uniform_location: WebGLUniformLocation | null;
+    private declare bot_uniform_location: WebGLUniformLocation | null;
+    private declare circle_radius_uniform_location: WebGLUniformLocation | null;
+    private declare size_uniform_location: WebGLUniformLocation | null;
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    private declare background_colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'PathCentreCircleShader';
+      if(PathCentreCircleFragmentShader.shader){
+        this.program.addFragment(PathCentreCircleFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.left_uniform_location = this.program.getUniformLocation('u_left');
+      this.right_uniform_location = this.program.getUniformLocation('u_right');
+      this.top_uniform_location = this.program.getUniformLocation('u_top');
+      this.bot_uniform_location = this.program.getUniformLocation('u_bot');
+      this.circle_radius_uniform_location = this.program.getUniformLocation('u_circle_radius');
+      this.size_uniform_location = this.program.getUniformLocation('u_size');
+      this.colour_uniform_location = this.program.getUniformLocation('u_colour');
+      this.background_colour_uniform_location = this.program.getUniformLocation('u_background_colour');
+    }
+    setLeft(a: GLfloat){
+      this.program.setFloat(this.left_uniform_location!, a);
+    }
+    setRight(a: GLfloat){
+      this.program.setFloat(this.right_uniform_location!, a);
+    }
+    setTop(a: GLfloat){
+      this.program.setFloat(this.top_uniform_location!, a);
+    }
+    setBot(a: GLfloat){
+      this.program.setFloat(this.bot_uniform_location!, a);
+    }
+    setCircleRadius(a: GLfloat){
+      this.program.setFloat(this.circle_radius_uniform_location!, a);
+    }
+    setSize(a: GLfloat){
+      this.program.setFloat(this.size_uniform_location!, a);
+    }
+    setColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.colour_uniform_location!, a, b, c);
+    }
+    setBackgroundColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.background_colour_uniform_location!, a, b, c);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/rect_outline.ts

@@ -0,0 +1,39 @@
+import RectOutline from './../Source/rect_outline.frag?raw';
+import * as Shader from './../../shader';
+
+export class RectOutlineFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(RectOutline)){
+        console.log('RectOutline: fragment source not added');
+      }
+    }
+  }
+}
+
+export function RectOutlineShaderProgramMix<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(RectOutlineFragmentShader.shader){
+        this.program.addFragment(RectOutlineFragmentShader.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');
+    }
+    setOutline_colour(a: GLfloat, b: GLfloat, c: GLfloat, d: GLfloat){
+      this.program.setFloat4(this.outline_colour_uniform_location!, a, b, c, d);
+    }
+    setOutline_ratio(a: GLfloat){
+      this.program.setFloat(this.outline_ratio_uniform_location!, a);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/solid_path.ts

@@ -0,0 +1,64 @@
+import SolidPath from './../Source/solid_path.frag?raw';
+import * as Shader from './../../shader';
+
+export class SolidPathFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(SolidPath)){
+        console.log('SolidPath: fragment source not added');
+      }
+    }
+  }
+}
+
+export function SolidPathShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class SolidPath extends Base{
+    private declare left_uniform_location: WebGLUniformLocation | null;
+    private declare right_uniform_location: WebGLUniformLocation | null;
+    private declare top_uniform_location: WebGLUniformLocation | null;
+    private declare bot_uniform_location: WebGLUniformLocation | null;
+    private declare size_uniform_location: WebGLUniformLocation | null;
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    private declare background_colour_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.left_uniform_location = this.program.getUniformLocation('u_left');
+      this.right_uniform_location = this.program.getUniformLocation('u_right');
+      this.top_uniform_location = this.program.getUniformLocation('u_top');
+      this.bot_uniform_location = this.program.getUniformLocation('u_bot');
+      this.size_uniform_location = this.program.getUniformLocation('u_size');
+      this.colour_uniform_location = this.program.getUniformLocation('u_colour');
+      this.background_colour_uniform_location = this.program.getUniformLocation('u_background_colour');
+    }
+    setLeft(a: GLfloat){
+      this.program.setFloat(this.left_uniform_location!, a);
+    }
+    setRight(a: GLfloat){
+      this.program.setFloat(this.right_uniform_location!, a);
+    }
+    setTop(a: GLfloat){
+      this.program.setFloat(this.top_uniform_location!, a);
+    }
+    setBot(a: GLfloat){
+      this.program.setFloat(this.bot_uniform_location!, a);
+    }
+    setSize(a: GLfloat){
+      this.program.setFloat(this.size_uniform_location!, a);
+    }
+    setColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.colour_uniform_location!, a, b, c);
+    }
+    setBackgroundColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.background_colour_uniform_location!, a, b, c);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/sprite_sheet.ts

@@ -0,0 +1,54 @@
+import SpriteSheet from './../Source/sprite_sheet.frag?raw';
+import * as Shader from './../../shader';
+
+export class SpriteSheetFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(SpriteSheet)){
+        console.log('SpriteSheet: fragment source not added');
+      }
+    }
+  }
+}
+
+export function SpriteSheetShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class SpriteSheet extends Base{
+    private declare texture_id_uniform_location: WebGLUniformLocation | null;
+    private declare width_uniform_location: WebGLUniformLocation | null;
+    private declare height_uniform_location: WebGLUniformLocation | null;
+    private declare x_uniform_location: WebGLUniformLocation | null;
+    private declare y_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'SpriteSheetShader';
+      if(SpriteSheetFragmentShader.shader){
+        this.program.addFragment(SpriteSheetFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.texture_id_uniform_location = this.program.getUniformLocation('u_texture_id');
+      this.width_uniform_location = this.program.getUniformLocation('u_width');
+      this.height_uniform_location = this.program.getUniformLocation('u_height');
+      this.x_uniform_location = this.program.getUniformLocation('u_x');
+      this.y_uniform_location = this.program.getUniformLocation('u_y');
+    }
+    setTextureId(i: GLint){
+      this.program.setInt(this.texture_id_uniform_location!, i);
+    }
+    setWidth(a: GLfloat){
+      this.program.setFloat(this.width_uniform_location!, a);
+    }
+    setHeight(a: GLfloat){
+      this.program.setFloat(this.height_uniform_location!, a);
+    }
+    setX(a: GLfloat){
+      this.program.setFloat(this.x_uniform_location!, a);
+    }
+    setY(a: GLfloat){
+      this.program.setFloat(this.y_uniform_location!, a);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/sprite_sheet_colour.ts

@@ -0,0 +1,62 @@
+import SpriteSheetColour from './../Source/sprite_sheet_colour.frag?raw';
+import * as Shader from './../../shader';
+import * as WebGL from './../../../globals';
+
+export class SpriteSheetColourFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(SpriteSheetColour)){
+        console.log('SpriteSheetColour: fragment source not added');
+      }
+    }
+  }
+}
+
+export function SpriteSheetColourShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class SpriteSheetColour extends Base{
+    private declare texture_id_uniform_location: WebGLUniformLocation | null;
+    private declare width_uniform_location: WebGLUniformLocation | null;
+    private declare height_uniform_location: WebGLUniformLocation | null;
+    private declare x_uniform_location: WebGLUniformLocation | null;
+    private declare y_uniform_location: WebGLUniformLocation | null;
+    private declare colour_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'SpriteSheetColourShader';
+      if(!SpriteSheetColourFragmentShader.shader){
+        SpriteSheetColourFragmentShader.load();
+      }
+      this.program.addFragment(SpriteSheetColourFragmentShader.shader!);
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.texture_id_uniform_location = this.program.getUniformLocation('u_texture_id');
+      this.width_uniform_location = this.program.getUniformLocation('u_width');
+      this.height_uniform_location = this.program.getUniformLocation('u_height');
+      this.x_uniform_location = this.program.getUniformLocation('u_x');
+      this.y_uniform_location = this.program.getUniformLocation('u_y');
+      this.colour_uniform_location = this.program.getUniformLocation('u_colour');
+    }
+    setTextureId(i: GLint){
+      this.program.setInt(this.texture_id_uniform_location!, i);
+    }
+    setWidth(a: GLfloat){
+      this.program.setFloat(this.width_uniform_location!, a);
+    }
+    setHeight(a: GLfloat){
+      this.program.setFloat(this.height_uniform_location!, a);
+    }
+    setX(a: GLfloat){
+      this.program.setFloat(this.x_uniform_location!, a);
+    }
+    setY(a: GLfloat){
+      this.program.setFloat(this.y_uniform_location!, a);
+    }
+    setColour(a: GLfloat, b: GLfloat, c: GLfloat){
+      this.program.setFloat3(this.colour_uniform_location!, a, b, c);
+    }
+    setColourFromColourRGB(colour: WebGL.Colour.ColourRGB){
+      this.program.setFloat3(this.colour_uniform_location!, colour.red, colour.green, colour.blue);
+    }
+  }
+}

package/src/WebGL/Shaders/Fragment/Program/texture.ts

@@ -0,0 +1,34 @@
+import Texture from './../Source/texture.frag?raw';
+import * as Shader from './../../shader';
+
+export class TextureFragmentShader{
+  static shader?: Shader.FragmentShader;
+  static load(){
+    if(this.shader == undefined){
+      this.shader = new Shader.FragmentShader();
+      if(!this.shader.addSource(Texture)){
+        console.log('Texture: fragment source not added');
+      }
+    }
+  }
+}
+
+export function TextureShaderProgramMix<TBase extends Shader.CustomShaderProgramable>(Base: TBase){
+  return class Texture extends Base{
+    private declare texture_id_uniform_location: WebGLUniformLocation | null;
+    protected override setupFragment(){
+      this.fragment_name = 'TextureShader';
+      if(TextureFragmentShader.shader){
+        this.program.addFragment(TextureFragmentShader.shader)
+      }else{
+        throw new Error(`${this.fragment_name} not loaded`);
+      }
+    }
+    protected override addFragmentUniformLocations(): void{
+      this.texture_id_uniform_location = this.program.getUniformLocation('u_texture_id');
+    }
+    setTextureId(i: GLint){
+      this.program.setInt(this.texture_id_uniform_location!, i);
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform vec2 u_centre;
+uniform float u_radius;
+uniform vec3 u_circle_colour;
+uniform vec3 u_background_colour;
+
+void main(){
+  vec2 middle = vec2(u_centre);
+
+  float circle = step(u_radius, distance(middle, v_relative));
+
+  vec3 col = circle*u_background_colour + (1.0-circle)*u_circle_colour;
+  
+  gl_FragColor = vec4(col, 1.0);
+}

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

@@ -0,0 +1,15 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform vec2 u_centre;
+uniform float u_radius;
+uniform vec3 u_circle_colour; //colour
+
+void main(){
+  vec2 middle = vec2(u_centre);
+  float circle = step(u_radius, distance(middle, v_relative));
+  float in_circle = 1.0-circle;
+  gl_FragColor = vec4(u_circle_colour, in_circle);
+}

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

@@ -0,0 +1,23 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform vec2 u_centre;
+uniform float u_radius;
+uniform float u_outline_radius;
+
+uniform vec4 u_outline_colour;
+uniform vec4 u_background_colour;
+
+void main(){
+  vec2 middle = vec2(u_centre);
+  float d = distance(middle, v_relative);
+  float circle = step(d, u_radius);
+  float centre_circle = step(d, u_radius-u_outline_radius);
+
+  float in_outline = circle-centre_circle;
+
+  vec4 col = u_outline_colour*in_outline;
+  gl_FragColor = col;
+}

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

@@ -0,0 +1,9 @@
+precision mediump float;
+
+
+
+uniform vec3 colour;
+
+void main(){
+  gl_FragColor = vec4(colour, 1.0);
+}

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

@@ -0,0 +1,7 @@
+precision mediump float;
+
+uniform vec4 colour; //coloura
+
+void main(){
+  gl_FragColor = vec4(colour);
+}

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

@@ -0,0 +1,5 @@
+precision mediump float;
+
+void main(){
+  gl_FragColor = vec4(1, 0, 0.5, 1);
+}

package/src/WebGL/Shaders/Fragment/Source/fragment_source.ts

@@ -0,0 +1,15 @@
+import Colour from './colour.frag?raw';
+import Fragment from './fragment.frag?raw';
+import BasicCircle from './circle.frag?raw';
+import OutlineCircle from './circle_outline.frag?raw';
+import OutlineRect from './rect_outline.frag?raw';
+import SolidLine from './line.frag?raw';
+import SolidPath from './solid_path.frag?raw';
+
+export const colour = Colour;
+export const simple = Fragment;
+export const circle = BasicCircle;
+export const circle_outline = OutlineCircle;
+export const rect_outline = OutlineRect;
+export const solid_line = SolidLine;
+export const solid_path = SolidPath;

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

@@ -0,0 +1,12 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform float u_thickness;
+uniform vec3 u_equation;
+
+void main(){
+  float in_line = 1.0-step(u_thickness, abs(u_equation.x*v_relative.x + u_equation.y*v_relative.y + u_equation.z));
+  gl_FragColor = vec4(vec3(1.0), in_line);
+}

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

@@ -0,0 +1,36 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform vec3 u_left_colour;
+uniform vec3 u_right_colour;
+uniform vec3 u_top_colour;
+uniform vec3 u_bot_colour;
+uniform vec3 u_mid_colour;
+uniform float u_circle_radius;
+uniform float u_size; // between 0 and 0.5
+uniform vec3 u_background_colour;
+
+void main(){
+  vec2 uv = v_relative;
+  float sz = u_size/2.;
+
+  float vertical = step(abs(0.5-uv.x), sz);
+  float horizontal = step(abs(0.5-uv.y), sz);
+
+  vec2 middle = vec2(0.5, 0.5);
+  float not_inside_circle = step(u_circle_radius, distance(middle, uv));
+  float inside_circle = 1.0 - not_inside_circle;
+  
+  float top = not_inside_circle*vertical*step(0.5+sz, uv.y);
+  float bottom = not_inside_circle*vertical*step(uv.y, 0.5-sz);
+  float left = not_inside_circle*horizontal*step(uv.x, 0.5-sz);
+  float right = not_inside_circle*horizontal*step(0.5+sz, uv.x);
+
+  float background = 1.0-clamp(top+bottom+left+right+inside_circle, 0.0, 1.0);
+
+  vec3 colour = top*u_top_colour+bottom*u_bot_colour+left*u_left_colour+right*u_right_colour+inside_circle*u_mid_colour+background*u_background_colour;
+
+  gl_FragColor = vec4(colour, 1.0);
+}

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

@@ -0,0 +1,34 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform vec3 u_left_colour;
+uniform vec3 u_right_colour;
+uniform vec3 u_top_colour;
+uniform vec3 u_bot_colour;
+uniform vec3 u_mid_colour;
+uniform float u_circle_radius;
+uniform float u_size; // between 0 and 0.5
+uniform vec3 u_background_colour;
+
+void main(){
+  vec2 uv = v_relative;
+  float sz = u_size/2.;
+
+  float vertical = step(abs(0.5-uv.x), sz);
+  float horizontal = step(abs(0.5-uv.y), sz);
+  
+  float top = vertical*step(0.5+sz, uv.y);
+  float bottom = vertical*step(uv.y, 0.5-sz);
+  float left = horizontal*step(uv.x, 0.5-sz);
+  float right = horizontal*step(0.5+sz, uv.x);
+  
+  float mid = horizontal*vertical;
+
+  float background = 1.0-(top+bottom+left+right+mid);
+
+  vec3 colour = top*u_top_colour+bottom*u_bot_colour+left*u_left_colour+right*u_right_colour+mid*u_mid_colour+background*u_background_colour;
+
+  gl_FragColor = vec4(colour, 1.0);
+}

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

@@ -0,0 +1,29 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform float u_left;
+uniform float u_right;
+uniform float u_top;
+uniform float u_bot;
+uniform float u_circle_radius;
+uniform float u_size; // between 0 and 0.5
+uniform vec3 u_colour;
+uniform vec3 u_background_colour;
+
+void main(){
+  vec2 uv = v_relative;
+  float sz = u_size/2.;
+
+  float inside_top = step(abs(0.5-uv.x), sz)*step(0.5-sz, uv.y)*u_top;
+  float inside_bot = step(abs(0.5-uv.x), sz)*step(uv.y, 0.5+sz)*u_bot;
+  float inside_left = step(abs(0.5-uv.y), sz)*step(uv.x, 0.5-sz)*u_left;
+  float inside_right = step(abs(0.5-uv.y), sz)*step(0.5-sz, uv.x)*u_right;
+
+  vec2 middle = vec2(0.5, 0.5);
+  float inside_circle = 1.0-step(u_circle_radius, distance(middle, v_relative));
+  float inside = clamp(inside_top+inside_bot+inside_left+inside_right+inside_circle, 0.0, 1.0);
+
+  gl_FragColor = vec4(inside*u_colour+(1.0-inside)*u_background_colour, 1.0);
+}

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

@@ -0,0 +1,20 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform vec4 u_outline_colour;
+uniform float u_outline_ratio;
+
+void main(){
+  float in_x = 1.0-step(u_outline_ratio, v_relative.x)*step(v_relative.x, 1.0-u_outline_ratio);
+  float in_y = 1.0-step(u_outline_ratio, v_relative.y)*step(v_relative.y, 1.0-u_outline_ratio);
+  float inside = step(1.0, in_x+in_y);
+
+  
+  gl_FragColor = inside*u_outline_colour;
+
+  //gl_FragColor = vec4(v_relative.x,0.0,0.0,1.0);
+
+
+}

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

@@ -0,0 +1,24 @@
+precision mediump float;
+
+varying vec2 v_position;
+varying vec2 v_relative;
+
+uniform float u_left;
+uniform float u_right;
+uniform float u_top;
+uniform float u_bot;
+uniform float u_size; // between 0 and 0.5
+uniform vec3 u_colour;
+uniform vec3 u_background_colour;
+
+void main(){
+  vec2 uv = v_relative;
+  float sz = u_size/2.;
+  float inside_top = step(abs(0.5-uv.x), sz)*step(0.5-sz, uv.y)*u_top;
+  float inside_bot = step(abs(0.5-uv.x), sz)*step(uv.y, 0.5+sz)*u_bot;
+  float inside_left = step(abs(0.5-uv.y), sz)*step(uv.x, 0.5-sz)*u_left;
+  float inside_right = step(abs(0.5-uv.y), sz)*step(0.5-sz, uv.x)*u_right;
+  float inside = clamp(inside_top+inside_bot+inside_left+inside_right, 0.0, 1.0);
+
+  gl_FragColor = vec4(inside*u_colour+(1.0-inside)*u_background_colour, 1.0);
+}