webgl2-sdf 0.0.7 → 0.0.9

package/src/shaders/fragment.ts

@@ -4,11 +4,38 @@ import { ROW_COUNT } from "../row-count.js";
 const cache: { [padCount_times_colCount: number]: string } = {};
 
 
+const GLSL_PATTERN1 = `
+    float exponent = uCustom.x;
+    float alpha = res >= 1.0 ? 0.0 : 0.5;
+    res = pow(1.0 - res, exponent);
+    float red = inside ? 0.2 : 0.8;
+    float green = abs(sin(25.0 * res));
+    // float green = step(0.5, fract(10.0 * res));
+    float blue = 0.5;
+`;
+
+
+const GLSL_DEFAULT = `
+    float exponent = uCustom.x;
+    float adj = 0.5*pow(1.0 - res, exponent);
+    res = inside ? 1.0 - adj : adj;
+    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 = 
@@ -20,7 +47,11 @@ uniform float uMaxDistance;
 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}];
@@ -35,6 +66,10 @@ 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;
@@ -48,72 +83,75 @@ 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;
 
-        ivec2 uSegIdxRange = crossIdx % 2 == 0
-            ? uSegIdxRangePerCell[crossIdx / 2].xy
-            : uSegIdxRangePerCell[crossIdx / 2].zw;
+            ivec2 uSegIdxRange = crossIdx % 2 == 0
+                ? uSegIdxRangePerCell[crossIdx / 2].xy
+                : uSegIdxRangePerCell[crossIdx / 2].zw;
 
-        int segIdx = uSegIdxRange.x;
-        int segLen = uSegIdxRange.y;
+            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%256, j/256), 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;
+            }
         }
-    }
 
-    {
-        int cellIdx = (instanceId % ${ROW_COUNT});
+        {
+            int cellIdx = (instanceId % ${ROW_COUNT});
 
-        bool isEven = cellIdx % 2 == 0;
+            bool isEven = cellIdx % 2 == 0;
 
-        ivec4 uSegIdxRange = uSegIdxRangePerStrip[cellIdx / 2];
-        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
-        
+            ivec4 uSegIdxRange = uSegIdxRangePerStrip[cellIdx / 2];
+            int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
+            int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+            
 
-        for (int j = segIdx; j < segIdx + segLen; j++) {
-            // Fetch segment from texture
-            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 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 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
@@ -131,9 +169,8 @@ void main() {
                 // Fetch segment from texture
                 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
                 float val = clamp(d / uMaxDistance, 0.0, 1.0);
 
                 res = min(res, val);
@@ -145,22 +182,16 @@ void main() {
     // DEBUG!
     // float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
 
-
-    float exponent = 2;
-    res = pow(1.0 - val, exponent) * 0.5;
-
-    float alpha = res == 1.0 ? 0.0 : 0.5;
-    float red = inside ? 0.2 : 0.8;
-    float green = abs(sin(25.0 * res));
-    float blue = 0.5;
+    
+    ${calcFragColorStr}
 
     FragColor = vec4(red, green, blue, alpha);
 }
 `
 
-    cache[1024*colCount + padCount] = main_Fragment;
+    cache[key] = main_Fragment;
     return main_Fragment;
 }
 
 
-export { getFragment }
+export { getFragment, GLSL_PATTERN1, GLSL_DEFAULT }

package/src/types/gl-context.ts

@@ -8,13 +8,8 @@ import type { Texture } from "./texture";
  * 
  * * `textures`
  * * `programs`
- * * `framebufferStack`
  * 
  * so they don't have to be recreated on each draw call.
- * 
- * * an optional `width` and `height` that can be used for any purpose and that are not
- * set or read by any function within the library
- * 
  */
 interface GlContext {
     readonly gl: WebGL2RenderingContext;

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,6 +22,8 @@ function getWebGlContext(
         if (glContext) { return glContext; }
     }
 
+    debugShaders(gl);
+
     const programs: { [index:string]: Program } = {};
     const textures: { [index:string]: Texture } = {};