webgl2-sdf 0.0.6 → 0.0.8

package/src/shaders/fragment.ts

@@ -4,11 +4,36 @@ import { ROW_COUNT } from "../row-count.js";
 const cache: { [padCount_times_colCount: number]: string } = {};
 
 
+const GLSL_PATTERN1 = `
+    float exponent = uCustom.x;
+    res = pow(1.0 - res, exponent);
+    float alpha = res <= 0.0 ? 0.0 : 0.5;
+    float red = inside ? 0.2 : 0.8;
+    float green = abs(sin(25.0 * res));
+    float blue = 0.5;
+`;
+
+
+const GLSL_DEFAULT = `
+    float exponent = uCustom.x;
+    res = (pow(1.0 - res, exponent) * 0.5) * (inside ? -1.0 : 1.0);
+    float red = res;
+    float green = res;
+    float blue = res;
+    float alpha = res;
+`;
+
+
 function getFragment(
         colCount: number,
-        padCount: number): string {
-
-    const fragment = cache[1024*colCount + padCount];
+        padCount: number,
+        calcFragColorStr: string,
+        hash: number): string {
+
+    // `colCount` and `padCount` can take at most 8 bits and `has` 32 bits and
+    // we have at least 53 bits to play with so we're fine
+    const key = (2**32)*(256*colCount + padCount) + hash;
+    const fragment = cache[key];
     if (fragment !== undefined) { return fragment; }
 
 const main_Fragment = 
@@ -17,11 +42,14 @@ const main_Fragment =
 precision highp float;
 
 uniform float uMaxDistance;
-uniform float uExponent;
 uniform highp sampler2D uSegs;
 uniform highp isampler2D uCloseCellIdxs;
 uniform highp isampler2D uCrossCellIdxs;
-uniform int uIncl;  // bit 0 -> incl inside, bit 1 -> incl outside
+// bit 0 -> calc distance inside
+// bit 1 -> calc distance outside
+// bit 2 -> calc whether fragment is inside or outside (else outside is assumed with winds == 0.0)
+uniform int uTestInOut;
+uniform vec4 uCustom;
 
 uniform SegIdxRangePerCellBlock {
     ivec4 uSegIdxRangePerCell[${(ROW_COUNT + 2*padCount)*(colCount + 2*padCount) / 2}];
@@ -36,12 +64,16 @@ flat in ivec2 closeCellIdxRange;
 flat in ivec2 crossCellIdxRange;
 out vec4 FragColor;
 
+// testing!!
+// float rand(vec2 co) {
+//     return mod(uCustom.w * fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453), 1.0);
+// }
 
 float absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {
     vec2 lineDir = lineB - lineA;
     float lenSq = dot(lineDir, lineDir);
     float t = clamp(dot(point - lineA, lineDir) / lenSq, 0.0, 1.0);
-    vec2 linePt = lineA + t * lineDir;
+    vec2 linePt = lineA + t*lineDir;
 
     return distance(point, linePt);
 }
@@ -49,88 +81,96 @@ float absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {
 
 void main() {
     ///////////////////////////////////////////////////////////////////////////
+    // Calculate \`winds\`:
+    //
     // Project a ray to the left to check if it crosses the segment in order
     // to find the fragment's winding number to determine whether fragment
     // is inside or outside the shape.
+    ///////////////////////////////////////////////////////////////////////////
 
-    int crossIdxS = crossCellIdxRange.x;
-    int crossLen = crossCellIdxRange.y;
     float winds = 0.0;
-    // Iterate over all relevant cell indexes
-    for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {
-        int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;
+    if ((uTestInOut & 4) == 0) {
+        int crossIdxS = crossCellIdxRange.x;
+        int crossLen = crossCellIdxRange.y;
+        // Iterate over all relevant cell indexes
+        for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {
+            int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;
 
-        bool isEven = crossIdx % 2 == 0;
+            ivec2 uSegIdxRange = crossIdx % 2 == 0
+                ? uSegIdxRangePerCell[crossIdx / 2].xy
+                : uSegIdxRangePerCell[crossIdx / 2].zw;
 
-        ivec4 uSegIdxRange = uSegIdxRangePerCell[crossIdx / 2];
-        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+            int segIdx = uSegIdxRange.x;
+            int segLen = uSegIdxRange.y;
 
-        for (int j = segIdx; j < segIdx + segLen; j++) {
-            // Fetch segment from texture
-            vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);
+            for (int j = segIdx; j < segIdx + segLen; j++) {
+                // Fetch segment from texture
+                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
-            // line segment's min-y is excluded
-            bool crossing =
-                (seg.y > vXY.y != seg.w > vXY.y) &&
-                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
+                // line segment's min-y is excluded
+                bool crossing =
+                    (seg.y > vXY.y != seg.w > vXY.y) &&
+                    (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
 
-            bool crossingUp = seg.y < seg.w;
+                bool crossingUp = seg.y < seg.w;
 
-            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;
+                winds += crossing ? (crossingUp ? -1.0 : 1.0) : 0.0;
+            }
         }
-    }
 
-    {
-        bool isEven = (instanceId % ${ROW_COUNT}) % 2 == 0;
+        {
+            int cellIdx = (instanceId % ${ROW_COUNT});
 
-        ivec4 uSegIdxRange = uSegIdxRangePerStrip[(instanceId % ${ROW_COUNT}) / 2];
-        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+            bool isEven = cellIdx % 2 == 0;
 
-        for (int j = segIdx; j < segIdx + segLen; j++) {
-            // Fetch segment from texture
-            vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);
+            ivec4 uSegIdxRange = uSegIdxRangePerStrip[cellIdx / 2];
+            int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
+            int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+            
 
-            // line segment's min-y is excluded
-            bool crossing =
-                (seg.y > vXY.y != seg.w > vXY.y) &&
-                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
+            for (int j = segIdx; j < segIdx + segLen; j++) {
+                // Fetch segment from texture
+                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
-            bool crossingUp = seg.y < seg.w;
+                // line segment's min-y is excluded
+                bool crossing =
+                    (seg.y > vXY.y != seg.w > vXY.y) &&
+                    (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
 
-            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;
+                bool crossingUp = seg.y < seg.w;
+
+                winds += crossing ? (crossingUp ? -1.0 : 1.0) : 0.0;
+            }
         }
     }
-
-
     bool inside = winds != 0.0;
     ///////////////////////////////////////////////////////////////////////////
-
+    // Calculate \`res\`: the distance to the nearest curve
     ///////////////////////////////////////////////////////////////////////////
     float res = 1.0;  // sdf result
 
-    if ((inside && (uIncl % 2 != 0)) || (!inside && (uIncl > 1))) {
+    if ((inside && ((uTestInOut & 1) != 0)) || (!inside && ((uTestInOut & 2) != 0))) {
         int cellIdxS = closeCellIdxRange.x;
         int cellLen = closeCellIdxRange.y;
         // Iterate over all relevant cell indexes
         for (int i = cellIdxS; i < cellIdxS + cellLen; i++) {
             int cellIdx = texelFetch(uCloseCellIdxs, ivec2(i%256, i/256), 0).x;
 
-            bool isEven = cellIdx % 2 == 0;
-            ivec4 uSegIdxRange = uSegIdxRangePerCell[cellIdx / 2];
-            int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-            int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+            ivec2 uSegIdxRange = cellIdx % 2 == 0
+                ? uSegIdxRangePerCell[cellIdx / 2].xy
+                : uSegIdxRangePerCell[cellIdx / 2].zw;
+
+            int segIdx = uSegIdxRange.x;
+            int segLen = uSegIdxRange.y;
 
             for (int j = segIdx; j < segIdx + segLen; j++) {
                 // Fetch segment from texture
-                vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);
+                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
-                // Find unsigned distance to the segment; only the nearest will be kept
+                // Find normalized unsigned distance to the segment; only the nearest will be kept
                 float d = absDistToSegment(vXY, seg.xy, seg.zw);
-                // Apply exponential transform TODO
-                // val = pow(1.0 - clamp(d / uMaxDistance, 0.0, 1.0), uExponent) * 0.5;
                 float val = clamp(d / uMaxDistance, 0.0, 1.0);
+
                 res = min(res, val);
             }
         }
@@ -139,20 +179,17 @@ void main() {
 
     // DEBUG!
     // float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
-    float alpha = res == 1.0 ? 0.0 : 0.5;
 
-    float red = inside ? 0.2 : 0.8;
-    float green = abs(sin(50.0 * res));
-    float blue = 0.5;
-    // float alpha = inside ? 0.5 : 0.0;
+    
+    ${GLSL_PATTERN1}
 
     FragColor = vec4(red, green, blue, alpha);
 }
 `
 
-    cache[1024*colCount + padCount] = main_Fragment;
+    cache[key] = main_Fragment;
     return main_Fragment;
 }
 
-
-export { getFragment }
+// ${calcFragColorStr}
+export { getFragment, GLSL_PATTERN1, GLSL_DEFAULT }

package/src/svg/get-paths-from-str.ts

@@ -7,6 +7,7 @@ import { parsePathDataString } from './path-data-polyfill/parse-path-data-string
  * and each bezier in turn consisting of an array of control points from the
  * given SVG path string. An array of loops are returned (as opposed to a single
  * loop) since an SVG path may have sub-paths.
+ * 
  * @param str The SVG path string, e.g. 'M1 1 C 5 1 5 2 4 2 C 3 3 1 3 1 1 z'
  */
 function getPathsFromStr(str: string): number[][][][] {

package/src/svg/path-data-polyfill/source.ts

@@ -1,14 +1,12 @@
 import { parseNumber } from './parse-number.js';
 
 
-/** @hidden */
 const COMMAND_MAP: { [index:string]: string } = {
     Z:"Z", M:"M", L:"L", C:"C", Q:"Q", A:"A", H:"H", V:"V", S:"S", T:"T",
     z:"Z", m:"m", l:"l", c:"c", q:"q", a:"a", h:"h", v:"v", s:"s", t:"t"
 };
 
 
-/** @hidden */
 class Source {
     _string: string;
     _currentIndex: number;

package/src/svg/path-state.ts

@@ -1,5 +1,4 @@
 
-/** @hidden */
 interface PathState {
     initialPoint?: number[] | undefined;
     p: number[];

package/src/webgl-utils/get-web-gl-context.ts

@@ -1,6 +1,7 @@
 import type { Texture } from "../types/texture.js";
 import type { Program } from "../types/program.js";
 import type { GlContext } from "../types/gl-context.js";
+import { debugShaders } from "../debug-shaders.js";
 
 
 const cache = new WeakMap<WebGL2RenderingContext, GlContext>();
@@ -21,12 +22,16 @@ function getWebGlContext(
         if (glContext) { return glContext; }
     }
 
+    debugShaders(gl);
+
     const programs: { [index:string]: Program } = {};
     const textures: { [index:string]: Texture } = {};
 
     const glContext: GlContext = { gl, textures, programs };
 
     gl.canvas.addEventListener('webglcontextlost', event => {
+        // event.preventDefault();  // Prevent the default action (which is to not restore automatically)
+
         deleteAllProps(programs);
         deleteAllProps(textures);
         cache.delete(gl);