excalibur 0.25.1 → 0.25.2

package/build/dist/Graphics/Context/ExcaliburGraphicsContext.d.ts

@@ -1,5 +1,8 @@
 import { Vector } from '../../Math/vector';
+import { Matrix } from '../../Math/matrix';
 import { Color } from '../../Color';
+import { ScreenDimension } from '../../Screen';
+import { PostProcessor } from '../PostProcessor/PostProcessor';
 export declare type HTMLImageSource = HTMLImageElement | HTMLCanvasElement;
 export interface ExcaliburGraphicsContextOptions {
     canvasElement: HTMLCanvasElement;
@@ -55,7 +58,7 @@ export interface ExcaliburGraphicsContext {
     width: number;
     height: number;
     /**
-     * Snaps all drawings to the nearest pixel trucated down, by default false
+     * Snaps all drawings to the nearest pixel truncated down, by default false
      */
     snapToPixel: boolean;
     /**
@@ -74,10 +77,19 @@ export interface ExcaliburGraphicsContext {
      * Resets the current transform to the identity matrix
      */
     resetTransform(): void;
+    /**
+     * Gets the current transform
+     */
+    getTransform(): Matrix;
+    /**
+     * Multiplies the current transform by a matrix
+     * @param m
+     */
+    multiply(m: Matrix): void;
     /**
      * Update the context with the current viewport dimensions (used in resizing)
      */
-    updateViewport(): void;
+    updateViewport(resolution: ScreenDimension): void;
     /**
      * Access the debug drawing api
      */
@@ -112,14 +124,16 @@ export interface ExcaliburGraphicsContext {
      * @param height
      * @param color
      */
-    drawRectangle(pos: Vector, width: number, height: number, color: Color): void;
+    drawRectangle(pos: Vector, width: number, height: number, color: Color, stroke?: Color, strokeThickness?: number): void;
     /**
-     * Draw a solid circle to the Excalibur Graphics context
+     * Draw a circle to the Excalibur Graphics context
      * @param pos
      * @param radius
      * @param color
+     * @param stroke Optionally specify the stroke color
+     * @param thickness
      */
-    drawCircle(pos: Vector, radius: number, color: Color): void;
+    drawCircle(pos: Vector, radius: number, color: Color, stroke?: Color, thickness?: number): void;
     /**
      * Save the current state of the canvas to the stack (transforms and opacity)
      */
@@ -144,6 +158,22 @@ export interface ExcaliburGraphicsContext {
      * @param y
      */
     scale(x: number, y: number): void;
+    /**
+     * Add a post processor to the graphics context
+     *
+     * Post processors are run in the order they were added.
+     * @param postprocessor
+     */
+    addPostProcessor(postprocessor: PostProcessor): void;
+    /**
+     * Remove a specific post processor from the graphics context
+     * @param postprocessor
+     */
+    removePostProcessor(postprocessor: PostProcessor): void;
+    /**
+     * Remove all post processors from the graphics context
+     */
+    clearPostProcessors(): void;
     /**
      * Clears the screen with the current background color
      */
@@ -152,4 +182,6 @@ export interface ExcaliburGraphicsContext {
      * Flushes the batched draw calls to the screen
      */
     flush(): void;
+    beginDrawLifecycle(): void;
+    endDrawLifecycle(): void;
 }

package/build/dist/Graphics/Context/ExcaliburGraphicsContext2DCanvas.d.ts

@@ -1,6 +1,9 @@
 import { ExcaliburGraphicsContext, LineGraphicsOptions, PointGraphicsOptions, ExcaliburGraphicsContextOptions, DebugDraw, HTMLImageSource } from './ExcaliburGraphicsContext';
 import { Vector } from '../../Math/vector';
 import { Color } from '../../Color';
+import { Matrix } from '../../Math/matrix';
+import { ScreenDimension } from '../../Screen';
+import { PostProcessor } from '../PostProcessor/PostProcessor';
 declare class ExcaliburGraphicsContext2DCanvasDebug implements DebugDraw {
     private _ex;
     private _debugText;
@@ -34,7 +37,7 @@ export declare class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphi
     set smoothing(value: boolean);
     constructor(options: ExcaliburGraphicsContextOptions);
     resetTransform(): void;
-    updateViewport(): void;
+    updateViewport(_resolution: ScreenDimension): void;
     /**
      * Draw an image to the Excalibur Graphics context at an x and y coordinate using the images width and height
      */
@@ -52,7 +55,7 @@ export declare class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphi
     drawImage(image: HTMLImageSource, sx: number, sy: number, swidth?: number, sheight?: number, dx?: number, dy?: number, dwidth?: number, dheight?: number): void;
     drawLine(start: Vector, end: Vector, color: Color, thickness?: number): void;
     drawRectangle(pos: Vector, width: number, height: number, color: Color): void;
-    drawCircle(pos: Vector, radius: number, color: Color): void;
+    drawCircle(pos: Vector, radius: number, color: Color, stroke?: Color, thickness?: number): void;
     debug: ExcaliburGraphicsContext2DCanvasDebug;
     /**
      * Save the current state of the canvas to the stack (transforms and opacity)
@@ -78,6 +81,13 @@ export declare class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphi
      * @param y
      */
     scale(x: number, y: number): void;
+    getTransform(): Matrix;
+    multiply(_m: Matrix): void;
+    addPostProcessor(_postprocessor: PostProcessor): void;
+    removePostProcessor(_postprocessor: PostProcessor): void;
+    clearPostProcessors(): void;
+    beginDrawLifecycle(): void;
+    endDrawLifecycle(): void;
     clear(): void;
     /**
      * Flushes the batched draw calls to the screen

package/build/dist/Graphics/Context/ExcaliburGraphicsContextWebGL.d.ts

@@ -4,10 +4,10 @@ import { TransformStack } from './transform-stack';
 import { Vector } from '../../Math/vector';
 import { Color } from '../../Color';
 import { StateStack } from './state-stack';
-import { LineRenderer } from './line-renderer';
-import { ImageRenderer } from './image-renderer';
-import { PointRenderer } from './point-renderer';
 import { ScreenDimension } from '../../Screen';
+import { PostProcessor } from '../PostProcessor/PostProcessor';
+import { RendererPlugin } from './renderer';
+import { LineRenderer } from './line-renderer/line-renderer';
 declare class ExcaliburGraphicsContextWebGLDebug implements DebugDraw {
     private _webglCtx;
     private _debugText;
@@ -38,9 +38,17 @@ declare class ExcaliburGraphicsContextWebGLDebug implements DebugDraw {
 export interface WebGLGraphicsContextInfo {
     transform: TransformStack;
     state: StateStack;
-    matrix: Matrix;
+    ortho: Matrix;
+    context: ExcaliburGraphicsContextWebGL;
 }
 export declare class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
+    private _logger;
+    private _renderers;
+    private _isDrawLifecycle;
+    private _renderTarget;
+    private _postProcessTargets;
+    private _screenRenderer;
+    private _postprocessors;
     /**
      * Meant for internal use only. Access the internal context at your own risk and no guarantees this will exist in the future.
      * @internal
@@ -58,11 +66,6 @@ export declare class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsC
     private _transform;
     private _state;
     private _ortho;
-    /**
-     * Meant for internal use only. Access the internal context at your own risk and no guarantees this will exist in the future.
-     * @internal
-     */
-    __pointRenderer: PointRenderer;
     /**
      * Meant for internal use only. Access the internal context at your own risk and no guarantees this will exist in the future.
      * @internal
@@ -72,7 +75,6 @@ export declare class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsC
      * Meant for internal use only. Access the internal context at your own risk and no guarantees this will exist in the future.
      * @internal
      */
-    __imageRenderer: ImageRenderer;
     snapToPixel: boolean;
     smoothing: boolean;
     backgroundColor: Color;
@@ -80,6 +82,7 @@ export declare class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsC
     set opacity(value: number);
     get width(): number;
     get height(): number;
+    get ortho(): Matrix;
     /**
      * Checks the underlying webgl implementation if the requested internal resolution is supported
      * @param dim
@@ -87,14 +90,22 @@ export declare class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsC
     checkIfResolutionSupported(dim: ScreenDimension): boolean;
     constructor(options: ExcaliburGraphicsContextOptions);
     private _init;
+    register<T extends RendererPlugin>(renderer: T): void;
+    get(rendererName: string): RendererPlugin;
+    private _currentRenderer;
+    private _isCurrentRenderer;
+    beginDrawLifecycle(): void;
+    endDrawLifecycle(): void;
+    private _alreadyWarnedDrawLifecycle;
+    draw<TRenderer extends RendererPlugin>(rendererName: TRenderer['type'], ...args: Parameters<TRenderer['draw']>): void;
     resetTransform(): void;
-    updateViewport(): void;
+    updateViewport(resolution: ScreenDimension): void;
     drawImage(image: HTMLImageSource, x: number, y: number): void;
     drawImage(image: HTMLImageSource, x: number, y: number, width: number, height: number): void;
     drawImage(image: HTMLImageSource, sx: number, sy: number, swidth?: number, sheight?: number, dx?: number, dy?: number, dwidth?: number, dheight?: number): void;
     drawLine(start: Vector, end: Vector, color: Color, thickness?: number): void;
-    drawRectangle(pos: Vector, width: number, height: number, color: Color): void;
-    drawCircle(pos: Vector, radius: number, color: Color): void;
+    drawRectangle(pos: Vector, width: number, height: number, color: Color, stroke?: Color, strokeThickness?: number): void;
+    drawCircle(pos: Vector, radius: number, color: Color, stroke?: Color, thickness?: number): void;
     debug: ExcaliburGraphicsContextWebGLDebug;
     save(): void;
     restore(): void;
@@ -102,6 +113,11 @@ export declare class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsC
     rotate(angle: number): void;
     scale(x: number, y: number): void;
     transform(matrix: Matrix): void;
+    getTransform(): Matrix;
+    multiply(m: Matrix): void;
+    addPostProcessor(postprocessor: PostProcessor): void;
+    removePostProcessor(postprocessor: PostProcessor): void;
+    clearPostProcessors(): void;
     clear(): void;
     /**
      * Flushes all batched rendering to the screen

package/build/dist/Graphics/Context/circle-renderer/circle-renderer.d.ts

@@ -0,0 +1,22 @@
+import { Color } from '../../../Color';
+import { Vector } from '../../../Math/vector';
+import { ExcaliburGraphicsContextWebGL } from '../ExcaliburGraphicsContextWebGL';
+import { RendererPlugin } from '../renderer';
+export declare class CircleRenderer implements RendererPlugin {
+    readonly type = "ex.circle";
+    priority: number;
+    private _maxCircles;
+    private _shader;
+    private _context;
+    private _gl;
+    private _buffer;
+    private _layout;
+    private _quads;
+    private _circleCount;
+    private _vertexIndex;
+    initialize(gl: WebGLRenderingContext, context: ExcaliburGraphicsContextWebGL): void;
+    private _isFull;
+    draw(pos: Vector, radius: number, color: Color, stroke?: Color, strokeThickness?: number): void;
+    hasPendingDraws(): boolean;
+    flush(): void;
+}

package/build/dist/Graphics/Context/circle-renderer/circle-renderer.frag.glsl

@@ -0,0 +1,53 @@
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives : enable
+#endif
+precision highp float;
+
+// UV coord
+varying vec2 v_uv;
+
+// Color coord to blend with image
+varying lowp vec4 v_color;
+
+// Stroke color if used
+varying lowp vec4 v_strokeColor;
+
+// Stroke thickness if used
+varying lowp float v_strokeThickness;
+
+// Opacity
+varying float v_opacity;
+
+void main() {
+  // make (0, 0) the center the uv 
+  vec2 uv = v_uv * 2.0 - 1.0;
+
+  vec4 color = v_color;
+  vec4 strokeColor = v_strokeColor;
+
+  // circle border is at radius 1.0 
+  // dist is > 0 when inside the circle 
+  float d = length(uv);
+  float dist = 1.0 - length(uv);
+
+  // Fade based on fwidth
+  float fade = fwidth(dot(uv, uv));
+
+  // if dist is greater than 0 step to 1;
+  // when we cross this 0 threshold add a smooth fade
+  float fill = smoothstep(-fade/2.0, fade/2.0, dist);
+
+  // if dist is greater than the stroke thickness step to 1
+  float stroke = 1.0 - smoothstep(v_strokeThickness, v_strokeThickness + fade, dist);
+
+  strokeColor.a *= fill * stroke;
+  strokeColor.rgb *= strokeColor.a;
+
+  color.a *= fill * (1.0 - stroke);
+  color.rgb *= color.a;
+
+  vec4 finalColor = mix(vec4(0.0), (color + strokeColor), fill);
+  finalColor.rgb = finalColor.rgb * v_opacity;
+  finalColor.a = finalColor.a * v_opacity;
+  gl_FragColor = finalColor;
+}

package/build/dist/Graphics/Context/circle-renderer/circle-renderer.vert.glsl

@@ -0,0 +1,37 @@
+attribute vec2 a_position;
+
+// UV coordinate
+attribute vec2 a_uv;
+varying vec2 v_uv;
+
+// Opacity 
+attribute float a_opacity;
+varying float v_opacity;
+
+attribute vec4 a_color;
+varying vec4 v_color;
+
+attribute vec4 a_strokeColor;
+varying vec4 v_strokeColor;
+
+attribute float a_strokeThickness;
+varying float v_strokeThickness;
+
+uniform mat4 u_matrix;
+
+
+void main() {
+   // Set the vertex position using the ortho transform matrix
+   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
+
+   // Pass through UV coords
+   v_uv = a_uv;
+   // Pass through the Opacity to the fragment shader
+   v_opacity = a_opacity;
+   // Pass through the color to the fragment shader
+   v_color = a_color;
+   // Pass through the stroke color to the fragment shader
+   v_strokeColor = a_strokeColor;
+   // Pass through the stroke thickenss to the fragment shader
+   v_strokeThickness = a_strokeThickness;
+}

package/build/dist/Graphics/Context/image-renderer/image-renderer.d.ts

@@ -0,0 +1,27 @@
+import { HTMLImageSource } from '../ExcaliburGraphicsContext';
+import { ExcaliburGraphicsContextWebGL } from '../ExcaliburGraphicsContextWebGL';
+import { RendererPlugin } from '../renderer';
+export declare class ImageRenderer implements RendererPlugin {
+    readonly type = "ex.image";
+    priority: number;
+    private _maxImages;
+    private _maxTextures;
+    private _context;
+    private _gl;
+    private _shader;
+    private _buffer;
+    private _layout;
+    private _quads;
+    private _imageCount;
+    private _textures;
+    private _vertexIndex;
+    initialize(gl: WebGLRenderingContext, context: ExcaliburGraphicsContextWebGL): void;
+    private _transformFragmentSource;
+    private _addImageAsTexture;
+    private _bindTextures;
+    private _getTextureIdForImage;
+    private _isFull;
+    draw(image: HTMLImageSource, sx: number, sy: number, swidth?: number, sheight?: number, dx?: number, dy?: number, dwidth?: number, dheight?: number): void;
+    hasPendingDraws(): boolean;
+    flush(): void;
+}

package/build/dist/Graphics/Context/image-renderer/image-renderer.frag.glsl

@@ -0,0 +1,28 @@
+precision mediump float;
+
+// UV coord
+varying vec2 v_texcoord;
+
+// Texture index
+varying lowp float v_textureIndex;
+
+// Textures in the current draw
+uniform sampler2D u_textures[%%count%%];
+
+// Opacity
+varying float v_opacity;
+
+void main() {
+   // In order to support the most efficient sprite batching, we have multiple
+   // textures loaded into the gpu (usually 8) this picker logic skips over textures
+   // that do not apply to a particular sprite.
+
+   vec4 color = vec4(1.0, 0, 0, 1.0);
+
+   // GLSL is templated out to pick the right texture and set the vec4 color
+   %%texture_picker%%
+
+   color.rgb = color.rgb * v_opacity;
+   color.a = color.a * v_opacity;
+   gl_FragColor = color;
+}

package/build/dist/Graphics/Context/{shaders/image-vertex.glsl → image-renderer/image-renderer.vert.glsl}

@@ -1,12 +1,9 @@
-attribute vec4 a_position;
+attribute vec2 a_position;
 
 // Opacity 
 attribute float a_opacity;
 varying float v_opacity;
 
-attribute vec4 a_color;
-varying vec4 v_color;
-
 // UV coordinate
 attribute vec2 a_texcoord;
 varying vec2 v_texcoord;
@@ -20,7 +17,7 @@ uniform mat4 u_matrix;
 
 void main() {
    // Set the vertex position using the ortho transform matrix
-   gl_Position = u_matrix * a_position;
+   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
 
    // Pass through the Opacity to the fragment shader
    v_opacity = a_opacity;
@@ -28,6 +25,4 @@ void main() {
    v_texcoord = a_texcoord;
    // Pass through the texture number to the fragment shader
    v_textureIndex = a_textureIndex;
-   // Pass through the color to the fragment shader
-   v_color = a_color;
 }

package/build/dist/Graphics/Context/line-renderer/line-renderer.d.ts

@@ -0,0 +1,21 @@
+import { Vector } from '../../../Math/vector';
+import { Color } from '../../../Color';
+import { ExcaliburGraphicsContextWebGL } from '../ExcaliburGraphicsContextWebGL';
+import { RendererPlugin } from '../renderer';
+export declare class LineRenderer implements RendererPlugin {
+    readonly type = "ex.line";
+    priority: number;
+    private _context;
+    private _gl;
+    private _shader;
+    private _maxLines;
+    private _vertexBuffer;
+    private _layout;
+    private _vertexIndex;
+    private _lineCount;
+    initialize(gl: WebGLRenderingContext, context: ExcaliburGraphicsContextWebGL): void;
+    draw(start: Vector, end: Vector, color: Color): void;
+    private _isFull;
+    hasPendingDraws(): boolean;
+    flush(): void;
+}

package/build/dist/Graphics/Context/{shaders → line-renderer}/line-vertex.glsl

@@ -1,4 +1,4 @@
-attribute vec4 a_position;
+attribute vec2 a_position;
 attribute vec4 a_color;
 
 varying lowp vec4 v_color;
@@ -8,7 +8,7 @@ uniform mat4 u_matrix;
 
 void main() {
    // Set the vertex position using the ortho transform matrix
-   gl_Position = u_matrix * a_position;
+   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
 
    // Passthrough the color
    v_color = a_color;

package/build/dist/Graphics/Context/{shaders → point-renderer}/point-fragment.glsl

@@ -9,7 +9,7 @@ void main() {
   float r = 0.0, delta = 0.0, alpha = 1.0;
   vec2 cxy = 2.0 * gl_PointCoord - 1.0;
   r = dot(cxy, cxy);
-  
+
 #ifdef GL_OES_standard_derivatives
   delta = fwidth(r);
   alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
@@ -18,5 +18,9 @@ void main() {
     discard;
   }
 #endif
-  gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
+  // "premultiply" the color by alpha
+  vec4 color = v_color;
+  color.a = color.a * alpha;
+  color.rgb = color.rgb * color.a;
+  gl_FragColor = color;
 }

package/build/dist/Graphics/Context/point-renderer/point-renderer.d.ts

@@ -0,0 +1,21 @@
+import { Vector } from '../../../Math/vector';
+import { Color } from '../../../Color';
+import { ExcaliburGraphicsContextWebGL } from '../ExcaliburGraphicsContextWebGL';
+import { RendererPlugin } from '../renderer';
+export declare class PointRenderer implements RendererPlugin {
+    readonly type = "ex.point";
+    priority: number;
+    private _shader;
+    private _maxPoints;
+    private _buffer;
+    private _layout;
+    private _gl;
+    private _context;
+    private _pointCount;
+    private _vertexIndex;
+    initialize(gl: WebGLRenderingContext, context: ExcaliburGraphicsContextWebGL): void;
+    draw(point: Vector, color: Color, size: number): void;
+    private _isFull;
+    hasPendingDraws(): boolean;
+    flush(): void;
+}

package/build/dist/Graphics/Context/{shaders → point-renderer}/point-vertex.glsl

@@ -1,11 +1,11 @@
-attribute vec4 a_position;
+attribute vec2 a_position;
 attribute vec4 a_color;
 attribute float a_size;
 varying lowp vec4 v_color;
 uniform mat4 u_matrix;
 
 void main() {
-  gl_Position = u_matrix * a_position;
+  gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
   gl_PointSize = a_size * 2.0;
   v_color = a_color;
 }

package/build/dist/Graphics/Context/quad-index-buffer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Helper that defines and index buffer for quad geometry
+ *
+ * Index buffers allow you to save space in vertex buffers when you share vertices in geometry
+ * it is almost always worth it in terms of performance to use an index buffer.
+ */
+export declare class QuadIndexBuffer {
+    private _gl;
+    private _logger;
+    /**
+     * Access to the webgl buffer handle
+     */
+    buffer: WebGLBuffer;
+    /**
+     * Access to the raw data of the index buffer
+     */
+    bufferData: Uint16Array | Uint32Array;
+    /**
+     * Depending on the browser this is either gl.UNSIGNED_SHORT or gl.UNSIGNED_INT
+     */
+    bufferGlType: number;
+    /**
+     * @param numberOfQuads Specify the max number of quads you want to draw
+     * @param useUint16 Optionally force a uint16 buffer
+     */
+    constructor(numberOfQuads: number, useUint16?: boolean);
+    get size(): number;
+    /**
+     * Upload data to the GPU
+     */
+    upload(): void;
+    /**
+     * Bind this index buffer
+     */
+    bind(): void;
+}

package/build/dist/Graphics/Context/rectangle-renderer/rectangle-renderer.d.ts

@@ -0,0 +1,23 @@
+import { Color } from '../../../Color';
+import { Vector } from '../../../Math/vector';
+import { ExcaliburGraphicsContextWebGL } from '../ExcaliburGraphicsContextWebGL';
+import { RendererPlugin } from '../renderer';
+export declare class RectangleRenderer implements RendererPlugin {
+    readonly type = "ex.rectangle";
+    priority: number;
+    private _maxRectangles;
+    private _shader;
+    private _gl;
+    private _context;
+    private _buffer;
+    private _layout;
+    private _quads;
+    private _rectangleCount;
+    private _vertexIndex;
+    initialize(gl: WebGLRenderingContext, context: ExcaliburGraphicsContextWebGL): void;
+    private _isFull;
+    drawLine(start: Vector, end: Vector, color: Color, thickness?: number): void;
+    draw(pos: Vector, width: number, height: number, color: Color, stroke?: Color, strokeThickness?: number): void;
+    hasPendingDraws(): boolean;
+    flush(): void;
+}

package/build/dist/Graphics/Context/rectangle-renderer/rectangle-renderer.frag.glsl

@@ -0,0 +1,85 @@
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives : enable
+#endif
+precision mediump float;
+
+// UV coord
+varying vec2 v_uv;
+
+varying vec2 v_size; // in pixels
+
+// Color coord to blend with image
+varying lowp vec4 v_color;
+
+// Stroke color if used
+varying lowp vec4 v_strokeColor;
+
+// Stroke thickness if used
+varying lowp float v_strokeThickness; // in pixels
+
+// Opacity
+varying float v_opacity;
+
+void main() {
+    // modified from https://stackoverflow.com/questions/59197671/glsl-rounded-rectangle-with-variable-border
+    vec2 uv = v_uv;
+    vec2 fragCoord = uv * v_size;
+    float maxX = v_size.x - v_strokeThickness;
+    float minX = v_strokeThickness;
+    float maxY = v_size.y - v_strokeThickness;
+    float minY = v_strokeThickness;
+
+    if (fragCoord.x < maxX && fragCoord.x > minX &&
+        fragCoord.y < maxY && fragCoord.y > minY) {
+      gl_FragColor = v_color;
+    } else {
+      gl_FragColor = v_strokeColor;
+    }
+    gl_FragColor.a *= v_opacity;
+    gl_FragColor.rgb *= gl_FragColor.a;
+
+    // vec2 v2CenteredPos     = abs(fragCoord - v_size.xy / 2.0);
+    // vec2 v2HalfShapeSizePx = v_size.xy/2.0 - v_strokeThickness/2.0;
+
+    // float fHalfBorderDist      = 0.0;
+    // float fHalfBorderThickness = 0.0;
+
+    // if (fragCoord.x > max(v_radius, v_strokeThickness) && 
+    //     fragCoord.x < v_size.x - max(v_radius, v_strokeThickness))
+    // {
+    //     fHalfBorderDist      = v2CenteredPos.y - v2HalfShapeSizePx.y;
+    //     fHalfBorderThickness = v_strokeThickness / 2.0;
+    // }
+    // else if (fragCoord.y > max(v_radius, v_strokeThickness) && 
+    //          fragCoord.y < v_size.y - max(v_radius, v_strokeThickness))
+    // {
+    //     fHalfBorderDist      = v2CenteredPos.x - v2HalfShapeSizePx.x;
+    //     fHalfBorderThickness = v_strokeThickness / 2.0;
+    // }
+    // else
+    // {
+    //     vec2 edgeVec = max(vec2(0.0), v_radius - vec2(
+    //         uv.x > 0.5 ? v_size.x - fragCoord.x : fragCoord.x,
+    //         uv.y > 0.5 ? v_size.y - fragCoord.y : fragCoord.y));
+        
+    //     float ellipse_ab    = v_radius-v_strokeThickness;
+    //     vec2 ellipse_isect = (v_strokeThickness > v_radius || v_strokeThickness > v_radius) ? vec2(0.0) :
+    //                             edgeVec.xy * ellipse_ab*ellipse_ab / length(ellipse_ab*edgeVec.yx); 
+            
+    //     fHalfBorderThickness = (v_radius - length(ellipse_isect)) / 2.0;
+    //     fHalfBorderDist      = length(edgeVec) - (v_radius - fHalfBorderThickness);
+    // }
+
+    // vec4 v4FromColor = v_strokeColor;
+    // v4FromColor.rgb *= v4FromColor.a;
+    // vec4 v4ToColor   = vec4(0.0); // background color is transparent
+    // if (fHalfBorderDist < 0.0) {
+    //     v4ToColor = v_color;
+    //     v4ToColor.rgb *= v4ToColor.a;
+    // }
+
+    // float mixPct = abs(fHalfBorderDist) - fHalfBorderThickness;
+
+    // vec4 finalColor = mix(v4FromColor, v4ToColor, mixPct);
+    // gl_FragColor = finalColor;
+}