webgl2-sdf 0.0.1

package/src/bezier/from-to/from-to-2.ts

@@ -0,0 +1,159 @@
+
+/**
+ * Returns a bezier curve that starts and ends at the given `t` parameters.
+ * 
+ * @param ps a quadratic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
+ * @param tS the `t` parameter where the resultant bezier should start
+ * @param tE the `t` parameter where the resultant bezier should end
+ * 
+ * @internal
+ */
+ function fromTo2(
+        ps: number[][], 
+        tS: number, 
+        tE: number): number[][] {
+
+    if (tS === 0) { 
+        if (tE === 1) {
+            return ps; 
+        }
+        return splitLeft2(ps, tE);
+    }
+    
+    if (tE === 1) { return splitRight2(ps, tS); }
+
+    return splitAtBoth2(ps, tS, tE);
+}
+
+
+/**
+ * Returns a bezier curve that starts at the given t parameter and ends 
+ * at `t === 1`.
+ * 
+ * @param ps a quadratic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
+ * @param t the `t` parameter where the resultant bezier should start
+ * 
+ * @internal
+ */
+function splitRight2(
+        ps: number[][], 
+        t: number): number[][] {
+
+    // --------------------------------------------------------
+    // const [[x0, y0], [x1, y1], [x2, y2]] = ps; 
+    const p0 = ps[0];
+    const p1 = ps[1];
+    const p2 = ps[2];
+    const x0 = p0[0]; const y0 = p0[1];
+    const x1 = p1[0]; const y1 = p1[1];
+    const x2 = p2[0]; const y2 = p2[1];
+    // --------------------------------------------------------
+
+    const tt  = t*t;
+
+    const xA = x0 - x1;
+    const xB = x2 - x1;
+
+    const yA = y0 - y1;
+    const yB = y2 - y1;
+
+    return [
+        [tt*(xA + xB) - (2*t*xA - x0),   // xx0, split point x
+         tt*(yA + yB) - (2*t*yA - y0)],  // yy0, split point y
+        [t*xB + x1,   // xx1
+         t*yB + y1],  // yy1
+        p2
+    ];
+}
+
+
+/**
+ * Returns a bezier curve that starts at `t === 0` and ends at the given `t`
+ * parameter.
+ * 
+ * @param ps a quadratic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
+ * @param t the `t` parameter where the resultant bezier should end
+ * 
+ * @internal
+ */
+function splitLeft2(
+        ps: number[][], 
+        t: number): number[][] {
+
+    // --------------------------------------------------------
+    // const [[x0, y0], [x1, y1], [x2, y2]] = ps; 
+    const p0 = ps[0];
+    const p1 = ps[1];
+    const p2 = ps[2];
+    const x0 = p0[0]; const y0 = p0[1];
+    const x1 = p1[0]; const y1 = p1[1];
+    const x2 = p2[0]; const y2 = p2[1];
+    // --------------------------------------------------------
+
+    const tt  = t*t;
+    const xA = x0 - x1;
+    const yA = y0 - y1;
+
+    return [
+        p0,
+        [-t*xA + x0,   // xx1
+         -t*yA + y0],  // yy1
+        [tt*(xA + (x2 - x1)) - (2*t*xA - x0),  // xx2 - split point x
+         tt*(yA + (y2 - y1)) - (2*t*yA - y0)]  // yy2 - split point y
+    ];
+}
+
+
+/**
+ * Returns a bezier curve that starts and ends at the given `t` parameters. 
+ * 
+ * @param ps a quadratic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
+ * @param tS the `t` parameter where the resultant bezier should start
+ * @param tE the `t` parameter where the resultant bezier should end
+ * 
+ * @internal
+ */
+ function splitAtBoth2(
+        ps: number[][], 
+        tS: number, 
+        tE: number): number[][] {
+
+    // --------------------------------------------------------
+    // const [[x0, y0], [x1, y1], [x2, y2]] = ps; 
+    const p0 = ps[0];
+    const p1 = ps[1];
+    const p2 = ps[2];
+    const x0 = p0[0]; const y0 = p0[1];
+    const x1 = p1[0]; const y1 = p1[1];
+    const x2 = p2[0]; const y2 = p2[1];
+    // --------------------------------------------------------
+
+    const ttS  = tS*tS;
+    const ttE  = tE*tE;
+    const tStE = tS*tE;
+
+    const xA = x0 - x1;
+    const xB = x2 - x1;
+    const xC = xA + xB;
+
+    const yA = y0 - y1;
+    const yB = y2 - y1;
+    const yC = yA + yB;
+
+    const xx0 = ttS*xC - (2*tS*xA - x0);
+    const xx1 = tStE*xC - (xA*(tE + tS) - x0);
+    const xx2 = ttE*xC - (2*tE*xA - x0);
+
+    const yy0 = ttS*yC - (2*tS*yA - y0);
+    const yy1 = tStE*yC - (yA*(tE + tS) - y0);
+    const yy2 = ttE*yC - (2*tE*yA - y0);
+
+    return [[xx0, yy0], [xx1, yy1], [xx2, yy2]];
+}
+
+
+export { fromTo2 }

package/src/bezier/from-to/from-to-3.ts

@@ -0,0 +1,176 @@
+
+/**
+ * Returns a bezier curve that starts and ends at the given t parameters.
+ * 
+ * @param ps a cubic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
+ * @param tS the `t` parameter where the resultant bezier should start
+ * @param tE the `t` parameter where the resultant bezier should end
+ * 
+ * @internal
+ */
+ function fromTo3(
+        ps: number[][], 
+        tS: number, 
+        tE: number): number[][] {
+
+    if (tS === 0) { 
+        if (tE === 1) {
+            return ps; 
+        }
+        return splitLeft3(ps, tE);
+    }
+    
+    if (tE === 1) { return splitRight3(ps, tS); }
+
+    return splitAtBoth3(ps, tS, tE);
+}
+
+
+/**
+ * Returns a bezier curve that starts at the given t parameter and ends 
+ * at `t === 1`.
+ * 
+ * @param ps a cubic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
+ * @param t the `t` parameter where the resultant bezier should start
+ * 
+ * @internal
+ */
+function splitRight3(
+        ps: number[][], 
+        t: number): number[][] {
+
+    // --------------------------------------------------------
+    // const [[x0, y0], [x1, y1], [x2, y2], [x3, y3]] = ps; 
+    const p0 = ps[0]; const p1 = ps[1];
+    const p2 = ps[2]; const p3 = ps[3];
+    const x00 = p0[0]; const y00 = p0[1];
+    const x10 = p1[0]; const y10 = p1[1];
+    const x20 = p2[0]; const y20 = p2[1];
+    const x30 = p3[0]; const y30 = p3[1];
+    // --------------------------------------------------------
+
+	const x01 = x00 - t*(x00 - x10);
+	const x11 = x10 - t*(x10 - x20);
+	const x21 = x20 - t*(x20 - x30);
+	const x02 = x01 - t*(x01 - x11);
+	const x12 = x11 - t*(x11 - x21);
+	const x03 = x02 - t*(x02 - x12);
+
+    const y01 = y00 - t*(y00 - y10);
+	const y11 = y10 - t*(y10 - y20);
+	const y21 = y20 - t*(y20 - y30);
+	const y02 = y01 - t*(y01 - y11);
+	const y12 = y11 - t*(y11 - y21);
+	const y03 = y02 - t*(y02 - y12);
+
+
+    return [[x03, y03], [x12, y12], [x21, y21], p3];
+}
+
+
+/**
+ * Returns a bezier curve that starts at `t === 0` and ends at the given t 
+ * parameter.
+ * 
+ * @param ps a cubic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
+ * @param t the `t` parameter where the resultant bezier should end
+ * 
+ * @internal
+ */
+function splitLeft3(
+        ps: number[][], 
+        t: number): number[][] {
+
+    // --------------------------------------------------------
+    // const [[x0, y0], [x1, y1], [x2, y2], [x3, y3]] = ps; 
+    const p0 = ps[0]; const p1 = ps[1];
+    const p2 = ps[2]; const p3 = ps[3];
+    const x00 = p0[0]; const y00 = p0[1];
+    const x10 = p1[0]; const y10 = p1[1];
+    const x20 = p2[0]; const y20 = p2[1];
+    const x30 = p3[0]; const y30 = p3[1];
+    // --------------------------------------------------------
+
+	const x01 = x00 - t*(x00 - x10);
+	const x11 = x10 - t*(x10 - x20);
+	const x21 = x20 - t*(x20 - x30);
+	const x02 = x01 - t*(x01 - x11);
+	const x12 = x11 - t*(x11 - x21);
+	const x03 = x02 - t*(x02 - x12);
+
+    const y01 = y00 - t*(y00 - y10);
+	const y11 = y10 - t*(y10 - y20);
+	const y21 = y20 - t*(y20 - y30);
+	const y02 = y01 - t*(y01 - y11);
+	const y12 = y11 - t*(y11 - y21);
+	const y03 = y02 - t*(y02 - y12);
+
+    return [p0, [x01, y01], [x02, y02], [x03, y03]];
+}
+
+
+/**
+ * Returns a bezier curve that starts and ends at the given `t` parameters. 
+ * 
+ * @param ps a cubic bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
+ * @param tS the `t` parameter where the resultant bezier should start
+ * @param tE the `t` parameter where the resultant bezier should end
+ * 
+ * @internal
+ */
+function splitAtBoth3(
+        ps: number[][], 
+        tS: number, 
+        tE: number): number[][] {
+
+    // --------------------------------------------------------
+    // const [[x0, y0], [x1, y1], [x2, y2], [x3, y3]] = ps; 
+    const p0 = ps[0]; const p1 = ps[1];
+    const p2 = ps[2]; const p3 = ps[3];
+    const x0 = p0[0]; const y0 = p0[1];
+    const x1 = p1[0]; const y1 = p1[1];
+    const x2 = p2[0]; const y2 = p2[1];
+    const x3 = p3[0]; const y3 = p3[1];
+    // --------------------------------------------------------
+
+    const ttS  = tS*tS;
+    const tttS = tS*ttS;
+    const ttE  = tE*tE;
+    const tttE = tE*ttE;
+    const tStE = tS*tE;
+
+    const xA = x0 - x1;
+    const xB = x2 - x1;
+    const xC = x3 - x0;
+    const xD = xA + xB;
+    const tSxA = tS*xA;
+    const tExA = tE*xA;
+    const xC3xB = xC - 3*xB;
+
+    const yA = y0 - y1;
+    const yB = y2 - y1;
+    const yC = y3 - y0;
+    const yD = yA + yB;
+    const tSyA = tS*yA;
+    const tEyA = tE*yA;
+    const yC3yB = yC - 3*yB;
+
+    const xx0 = tttS*xC3xB + (3*tS*(tS*xD - xA) + x0);
+    const xx1 = tStE*(tS*xC3xB + 2*xD) + ((ttS*xD + x0) - (tExA + 2*tSxA));
+    const xx2 = tStE*(tE*xC3xB + 2*xD) + ((ttE*xD + x0) - (2*tExA + tSxA));
+    const xx3 = tttE*xC3xB + (3*tE*(tE*xD - xA) + x0);
+
+    const yy0 = tttS*yC3yB + (3*tS*(tS*yD - yA) + y0);
+    const yy1 = tStE*(tS*yC3yB + 2*yD) + ((ttS*yD + y0) - (tEyA + 2*tSyA));
+    const yy2 = tStE*(tE*yC3yB + 2*yD) + ((ttE*yD + y0) - (2*tEyA + tSyA));
+    const yy3 = tttE*yC3yB + (3*tE*(tE*yD - yA) + y0);
+
+    return [[xx0, yy0], [xx1, yy1], [xx2, yy2], [xx3, yy3]];
+}
+
+
+export { fromTo3 }

package/src/bezier/from-to/from-to.ts

@@ -0,0 +1,30 @@
+import { fromTo2 } from './from-to-2.js';
+import { fromTo3 } from './from-to-3.js';
+
+
+/**
+ * Returns a bezier curve that starts and ends at the given `t` parameters.
+ * 
+ * @param ps an order 2 or 3 bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
+ * @param tS the `t` parameter where the resultant bezier should start
+ * @param tE the `t` parameter where the resultant bezier should end
+ */
+ function fromTo(
+        ps: number[][], 
+        tS: number, 
+        tE: number): number[][] {
+
+    if (ps.length === 4) {
+        return fromTo3(ps, tS, tE);
+    }
+
+    if (ps.length === 3) {
+        return fromTo2(ps, tS, tE);
+    }
+
+    throw new Error('The given bezier curve must be of order 2 or 3.');
+}
+
+
+export { fromTo }

package/src/bezier/is-cubic-obtuse.ts

@@ -0,0 +1,31 @@
+import { fromToVec } from '../vector/from-to-vec';
+import { dot } from "../vector/dot";
+
+
+/** 
+ * Returns `true` if the given cubic bezier is obtuse, `false` otherwise (i.e.
+ * `false` if acute).
+ * 
+ * Obtuse here is defined as follows: let the cubic form triangles through its 
+ * control points P0, P1, P3 where P0 and P3 are the endpoints. If both interior
+ * angles ∠P0 and ∠P2 are <= 90 degrees then the cubic is considered acute,
+ * otherwise it is considered obtuse. The same should be true for P0, P2, P3.
+ */
+function isCubicObtuse(ps: number[][]) {
+    const v0 = fromToVec(ps[0], ps[1]);
+    const v1 = fromToVec(ps[1], ps[3]);
+    const v2 = fromToVec(ps[3], ps[0]);
+
+    const v3 = fromToVec(ps[0], ps[2]);
+    const v4 = fromToVec(ps[2], ps[3]);
+
+    return (
+        dot(v2, v0) > 0 ||
+        dot(v1, v2) > 0 ||
+        dot(v2, v3) > 0 ||
+        dot(v4, v2) > 0
+    );
+}
+
+
+export { isCubicObtuse }

package/src/bezier/is-quad-obtuse.ts

@@ -0,0 +1,26 @@
+import { fromToVec } from '../vector/from-to-vec';
+import { dot } from "../vector/dot";
+
+
+/** 
+ * Returns `true` if the given quadratic bezier is obtuse, `false` otherwise (i.e.
+ * `false` if acute).
+ * 
+ * Obtuse here is defined as follows: let the quad form a triangle through its 
+ * control points P0, P1, P2 where P0 and P2 are the endpoints. If both interior
+ * angles ∠P0 and ∠P2 are <= 90 degrees then the quad is considered acute,
+ * otherwise it is considered obtuse.
+ */
+function isQuadObtuse(ps: number[][]) {
+    const v0 = fromToVec(ps[0], ps[1]);
+    const v1 = fromToVec(ps[1], ps[2]);
+    const v2 = fromToVec(ps[2], ps[0]);
+
+    return (
+        dot(v2, v0) > 0 ||
+        dot(v1, v2) > 0
+    );
+}
+
+
+export { isQuadObtuse }

package/src/bezier/is-really-point.ts

@@ -0,0 +1,25 @@
+
+/**
+ * Returns `true` if the given bezier curve has all control points coincident,
+ * `false` otherwise.
+ * 
+ * @param ps an order 0,1,2 or 3 bezier curve given as an array of its control 
+ * points, e.g. `[[0,0],[1,1],[2,1],[2,0]]`
+ */
+function isReallyPoint(
+        ps: number[][]): boolean {
+
+    const x = ps[0][0];
+    const y = ps[0][1];
+
+    for (let i=1; i<ps.length; i++) {
+        if (x !== ps[i][0] || y !== ps[i][1]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+
+export { isReallyPoint }

package/src/bezier/split-by-deviation-from-straight-line-cubic.ts

@@ -0,0 +1,109 @@
+import { getDistanceToLineFunction } from '../utils/get-distance-to-line-function.js';
+import { fromTo } from './from-to/from-to.js';
+import { isCubicObtuse } from './is-cubic-obtuse.js';
+
+const { abs, max } = Math;
+
+
+/**
+ * Split the given cubic bezier curve into pieces (given as an array of 
+ * parameter `t` values) such that each piece is guaranteed to deviate less
+ * than `maxD` from a straigh line.
+ * 
+ * * a crude method is employed (for efficiency) by noting that the hausdorff
+ * distance between a cubic and the line segment connecting its endpoints is at
+ * most 3/4 the distance of the max distance between any control point and the
+ * line segment if the control points are on the same side of the line segment
+ * and at most 4/9 if they are on opposite sides AND (in both cases) the cubic
+ * is not obtuse, i.e. the inner control points are not outside the strip formed
+ * by the two lines passing through the endpoint control points normal to the
+ * line segment connecting the endpoint control points.
+ * 
+ * @param ps an order 2 bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
+ * @param maxD
+ */
+ function splitByDeviationFromStraighLine_Cubic_Crude(
+        ps: number[][],
+        maxD: number): number[] {
+
+    const tsS = [0];
+    const tsE = [1];
+    while (true) {
+        const tS = tsS[tsS.length - 1];
+        const tE = tsE[tsE.length - 1];
+        const ps_ = fromTo(ps, tS, tE);
+
+        if ((!isCubicObtuse(ps_) && getMaxD(ps_) <= maxD)) {
+            tsS.push(tsE.pop()!);
+            if (tE === 1) {
+                return tsS;
+            }
+            continue;
+        }
+
+        const t = (tS + tE)/2;
+
+        tsE.push(t);
+    }
+}
+
+
+// function splitByDeviationFromStraighLine_Cubic_Precise(
+//         ps: number[][], 
+//         maxD: number): number[] {
+
+//     const tsS = [0];
+//     const tsE = [1];
+//     while (true) {
+//         const tS = tsS[tsS.length - 1];
+//         const tE = tsE[tsE.length - 1];
+//         const ps_ = fromTo(ps, tS, tE);
+
+//         if ((!isCubicObtuse(ps_) && getMaxDPrecise(ps_) <= maxD)) {
+//             tsS.push(tsE.pop()!);
+//             if (tE === 1) {
+//                 return tsS;
+//             }
+//             continue;
+//         }
+
+//         const t = (tS + tE)/2;
+
+//         tsE.push(t);
+//     }
+// }
+
+
+function getMaxD(ps: number[][]) {
+    const dF = getDistanceToLineFunction(ps[0], ps[3]);
+    const d1 = dF(ps[1]);
+    const d2 = dF(ps[2]);
+
+    // The hausdorff distance between a cubic and the line segment connecting its
+    // endpoints is at most 3/4 the distance of the max distance between any control
+    // point and the line segment if the control points are on the same side of the line
+    // segment and at most 4/9 if they are on opposite sides AND (in both cases) the cubic
+    // is not obtuse, i.e. the inner control points are not outside the strip formed
+    // by the two lines passing through the endpoint control points normal to the
+    // line segment connecting the endpoint control points.
+
+    const C = d1*d2 <= 0 ? 4/9 : 3/4;
+
+    return C * max(abs(d1), abs(d2));
+}
+
+
+export {
+    splitByDeviationFromStraighLine_Cubic_Crude,
+    // splitByDeviationFromStraighLine_Cubic_Precise
+}
+
+
+// Quokka tests
+// splitByDeviationFromStraighLine_Cubic_Crude([
+//     [43, 0],
+//     [23, 0],
+//     [33, 0],
+//     [53, 0]
+// ], 0.5);//?

package/src/bezier/split-by-deviation-from-straight-line-quad.ts

@@ -0,0 +1,66 @@
+import { getDistanceToLineFunction } from '../utils/get-distance-to-line-function.js';
+import { evalDeCasteljau } from './eval-de-casteljau';
+import { fromTo } from './from-to/from-to';
+import { isQuadObtuse } from './is-quad-obtuse';
+
+const { abs } = Math;
+
+
+/**
+ * Split the given quadratic bezier curve into pieces (given as an array of 
+ * parameter `t` values) such that each piece is guaranteed to deviate less
+ * than `maxD` from a straigh line.
+ * 
+ * @param ps an order 2 bezier curve given as an ordered array of its
+ * control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
+ * @param maxD
+ */
+ function splitByDeviationFromStraighLine_Quad(
+        ps: number[][], 
+        maxD: number): number[] {
+
+    const tsS = [0];
+    const tsE = [1];
+    while (true) {
+        const tS = tsS[tsS.length - 1];
+        const tE = tsE[tsE.length - 1];
+        const ps_ = fromTo(ps, tS, tE);
+
+        if ((!isQuadObtuse(ps_) && getMaxD(ps_) <= maxD)) {
+            tsS.push(tsE.pop()!);
+            if (tE === 1) {
+                return tsS;
+            }
+            continue;
+        }
+
+        const t = (tS + tE)/2;
+
+        tsE.push(t);
+    }
+}
+
+
+function getMaxD(ps: number[][]) {
+    if (ps[0][0] === ps[1][0] && ps[0][1] === ps[1][1]) {
+        return 0;
+    }
+    const p = evalDeCasteljau(ps, 0.5);  // peak is reached at t = 0.5
+    const dF = getDistanceToLineFunction(ps[0], ps[2]);
+
+    const d = abs(dF(p));
+
+    return d;
+}
+
+
+export { splitByDeviationFromStraighLine_Quad }
+
+
+// Quokka tests
+// splitByDeviationFromStraighLine_Quad([[0,0],[0,4],[-3,4],[20,0]], 0.25);//?
+// splitByDeviationFromStraighLine_Quad([
+//     [128, 423],
+//     [128, 423],
+//     [128, 423]
+// ]);//?

package/src/bezier/split-into-line-segments.ts

@@ -0,0 +1,39 @@
+import { evalDeCasteljau } from './eval-de-casteljau';
+import { splitByDeviationFromStraighLine_Cubic_Crude } from './split-by-deviation-from-straight-line-cubic';
+// import { splitByDeviationFromStraighLine_Cubic_Precise } from './split-by-deviation-from-straight-line-cubic';
+import { splitByDeviationFromStraighLine_Quad } from './split-by-deviation-from-straight-line-quad';
+
+
+/**
+ * Returns the result of splitting the given bezier curve into straight line
+ * segments up to `maxDeviation`
+ * 
+ * 
+ * @param ps 
+ * @param maxDeviation maximum deviation from straight line
+ */
+function splitIntoLineSegments(
+        ps: number[][],
+        maxDeviation: number) {
+    
+    const ts = ps.length === 3
+        ? splitByDeviationFromStraighLine_Quad(ps, maxDeviation)
+        // : splitByDeviationFromStraighLine_Cubic_Precise(ps, maxDeviation)
+        : splitByDeviationFromStraighLine_Cubic_Crude(ps, maxDeviation)
+
+    const segs: number[][][] = [];
+    for (let i=0; i<ts.length - 1; i++) {
+        const p0 = evalDeCasteljau(ps, ts[i]);
+        const p1 = evalDeCasteljau(ps, ts[i+1]);
+        segs.push([p0,p1]);
+    }
+
+    return segs;
+}
+
+
+export { splitIntoLineSegments }
+
+
+// Quokka tests
+// splitByDeviationFromStraighLine([[0,0],[0,4],[-3,4],[20,0]], 0.25);//?

package/src/debug-shaders.ts

@@ -0,0 +1,38 @@
+import { getMainFragment } from "./shaders/main.fragment";
+import { main_Vertex } from "./shaders/main.vertex";
+
+
+/**
+ * 
+ * @param gl 
+ * @param type `gl.VERTEX_SHADER | gl.FRAGMENT_SHADER`
+ * @param shaderStr 
+ */
+function debugGlsl(
+        gl: WebGL2RenderingContext,
+        type: typeof gl.VERTEX_SHADER | typeof gl.FRAGMENT_SHADER,
+        shaderStr: string) {
+
+    const s = gl.createShader(type)!;
+    gl.shaderSource(s, shaderStr);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+        throw new Error(gl.getShaderInfoLog(s)!);
+    }
+}
+
+
+function debugShaders(
+        gl: WebGL2RenderingContext) {
+
+    try {
+        debugGlsl(gl, gl.VERTEX_SHADER, main_Vertex);
+        debugGlsl(gl, gl.FRAGMENT_SHADER, getMainFragment(32,4));
+    } catch (e) {
+        console.log(e);
+        throw e;
+    }
+}
+
+
+export { debugShaders, debugGlsl }