webgl2-sdf 0.0.5 → 0.0.7

package/src/shaders/fragment.ts

@@ -17,7 +17,6 @@ const main_Fragment =
 precision highp float;
 
 uniform float uMaxDistance;
-uniform float uExponent;
 uniform highp sampler2D uSegs;
 uniform highp isampler2D uCloseCellIdxs;
 uniform highp isampler2D uCrossCellIdxs;
@@ -41,7 +40,7 @@ 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);
 }
@@ -60,15 +59,16 @@ void main() {
     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);
+            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
             // line segment's min-y is excluded
             bool crossing =
@@ -82,15 +82,18 @@ void main() {
     }
 
     {
-        bool isEven = (instanceId % ${ROW_COUNT}) % 2 == 0;
+        int cellIdx = (instanceId % ${ROW_COUNT});
+
+        bool isEven = cellIdx % 2 == 0;
 
-        ivec4 uSegIdxRange = uSegIdxRangePerStrip[(instanceId % ${ROW_COUNT}) / 2];
+        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, 0), 0);
+            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
             // line segment's min-y is excluded
             bool crossing =
@@ -117,20 +120,22 @@ void main() {
         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
                 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;
+                // Apply exponential transform
                 float val = clamp(d / uMaxDistance, 0.0, 1.0);
+
                 res = min(res, val);
             }
         }
@@ -139,12 +144,15 @@ 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 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(50.0 * res));
+    float green = abs(sin(25.0 * res));
     float blue = 0.5;
-    // float alpha = inside ? 0.5 : 0.0;
 
     FragColor = vec4(red, green, blue, alpha);
 }

package/src/shaders/vertex.ts

@@ -5,7 +5,6 @@ const vertex = /*glsl*/`#version 300 es
 precision highp float;
 
 uniform vec2 uWidthHeight;
-uniform vec2 uOffset;
 in vec2 aUV;
 in ivec2 aCloseCellIdxRangePerCell;
 in ivec2 aCrossIdxRangePerCell;
@@ -41,14 +40,11 @@ void main() {
 
     float aspectRatio = width / height;
 
-    float x = (uOffset.x / 2.0*width) - 1.0;
-    float y = (uOffset.y / 2.0*height) - 1.0;
-
     gl_Position = vec4(
         vec2(
             (2.0*(uv.x / aspectRatio) - 1.0),
             (2.0*uv.y - 1.0)
-        ) + vec2(x,y),
+        ),
         0.0, 1.0
     );
 }

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/types/gl-context.ts

@@ -20,7 +20,7 @@ interface GlContext {
     readonly gl: WebGL2RenderingContext;
     readonly textures: { [index:string]: Texture };
     readonly programs: { [index:string]: Program };
-    readonly onContextLoss: () => void;
+    onContextLoss?: (event: Event) => void;
 }
 
 

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

@@ -24,29 +24,21 @@ function getWebGlContext(
     const programs: { [index:string]: Program } = {};
     const textures: { [index:string]: Texture } = {};
 
-    gl.canvas.addEventListener('webglcontextlost', e => {
-        onContextLoss();
-        e.preventDefault();
-    }, false);
-
-    const glContext: GlContext = {
-        gl,
-        onContextLoss,
-        textures,
-        programs
-    };
+    const glContext: GlContext = { gl, textures, programs };
 
-    cache.set(gl, glContext);
+    gl.canvas.addEventListener('webglcontextlost', event => {
+        // event.preventDefault();  // Prevent the default action (which is to not restore automatically)
 
-    return glContext;
+        deleteAllProps(programs);
+        deleteAllProps(textures);
+        cache.delete(gl);
 
+        glContext.onContextLoss?.(event);
+    }, false);
 
-    ////////////////////////
+    cache.set(gl, glContext);
 
-    function onContextLoss() {
-        deleteAllProps(programs);
-        deleteAllProps(textures);
-    }
+    return glContext;
 }