webgl2-sdf 0.0.1

package/src/generate-sdf.ts

@@ -0,0 +1,91 @@
+import { getWebGLContext } from './webgl-utils/get-gl-context.js';
+import { main_Vertex } from './shaders/main.vertex.js';
+import { getMainFragment } from './shaders/main.fragment.js';
+import { initProgram } from './webgl-utils/use-program.js';
+import { mainProgram } from './main-program.js';
+import { ROW_COUNT } from './row-count.js';
+import { getPathsFromStr } from './svg/get-paths-from-str.js';
+import { MAX_ASPECT_RATIO_BEFORE_STRETCH } from './max-aspect-ratio-before-stretch.js';
+// import { debugShaders } from './debug-shaders.js';
+
+const { ceil, min, max } = Math;
+
+
+/**
+ * 
+ * @param gl 
+ * @param psss 
+ * @param width 
+ * @param height 
+ * @param viewbox 
+ * @param maxDistance 
+ * @param sdfExponent 
+ * @param inclInside 
+ * @param inclOutside 
+ * @param x 
+ * @param y 
+ * @param channel 
+ * @param resolution 
+ */
+function generateIntoFramebuffer(
+        gl: WebGL2RenderingContext,
+        psss: (number[][])[][] | string,
+        width: number,
+        height: number,
+        viewbox: [number,number,number,number],
+        maxDistance: number,
+        sdfExponent = 1,
+        inclInside = true,
+        inclOutside = true,
+        // framebuffer: WebGLFramebuffer | null,
+        x = 0, y = 0,
+        channel = 0,
+        resolution: 0.5|1 = 0.5) {
+
+    // debugShaders(gl);  // comment for production
+
+    const psss_ = typeof psss === 'string'
+        ? getPathsFromStr(psss)
+        : psss;
+
+    const glContext = getWebGLContext(gl);
+
+    const { onContextLoss } = glContext;
+
+    let stretch = 1;
+    const aspectRatio = width/height;
+    if (aspectRatio > MAX_ASPECT_RATIO_BEFORE_STRETCH) {
+        const r = width/MAX_ASPECT_RATIO_BEFORE_STRETCH;
+        stretch = r/height;
+        height = r;
+    }
+
+    const cellSize = height/ROW_COUNT;
+
+    const maxDim = max(width, height);
+    const colCount = ceil(width/cellSize);
+
+    const padCount = 2*ceil(min(maxDistance, maxDim)/cellSize/2);
+
+    const programMain = initProgram(
+        glContext, `main${colCount}-${padCount}`,
+        main_Vertex, getMainFragment(colCount, padCount)
+    );
+
+    gl.useProgram(programMain.program);
+    mainProgram(
+        glContext, programMain, resolution, psss_,
+        viewbox, maxDistance, sdfExponent, width, height, colCount,
+        cellSize, inclInside, inclOutside, padCount, stretch
+    );
+
+    // Handle context loss occurring during any of the above calls
+    if (gl.isContextLost()) {
+        onContextLoss();
+
+        throw new Error('Webgl2 context lost.');
+    }
+}
+
+
+export { generateIntoFramebuffer }

package/src/index.ts

@@ -0,0 +1,2 @@
+
+export { generateIntoFramebuffer } from './generate-sdf.js';

package/src/main-program.ts

@@ -0,0 +1,160 @@
+import { Program } from './types/program.js';
+import { useTexture } from './webgl-utils/use-texture.js';
+import { setAttribute } from './webgl-utils/set-attribute.js';
+import { setUniform } from './webgl-utils/set-uniform.js';
+import { setUniformBlock } from './webgl-utils/set-uniform-block.js';
+import { GlContext } from './types/gl-context.js';
+import { prepareBuffers } from './prepare-buffers.js';
+import { TEX_WIDTH } from './tex-width.js';
+import { ROW_COUNT } from './row-count.js';
+
+
+const SEG_TEX_INDEX = 0;
+const CELL_TEX_INDEX = 1;
+const CROSS_TEX_INDEX = 2;
+
+
+function mainProgram(
+        glContext: GlContext,
+        programMain: Program,
+        resolution: 0.5|1,
+        psss: number[][][][],
+        viewbox: [number,number,number,number],
+        maxDistance: number,
+        sdfExponent = 1,
+        width: number,
+        height: number,
+        colCount: number,
+        cellSize: number,
+        inclInside: boolean,
+        inclOutside: boolean,
+        padCount: number,
+        stretch: number) {
+
+    const { gl } = glContext;
+
+    const vertices: number[] = [];
+    const x0 = 0;
+    const y0 = 0;
+    const x1 = 1/ROW_COUNT;
+    const y1 = 1/ROW_COUNT;
+
+    vertices.push(x0,y0, x1,y0, x0,y1);  // First triangle: (x0,y0), (x1,y0), (x0,y1)
+    vertices.push(x1,y0, x1,y1, x0,y1);  // Second triangle: (x1,y0), (x1,y1), (x0,y1)
+    const uvArr = new Float32Array(vertices);
+
+    const setUniform_ = setUniform(programMain);
+    const setAttribute_ = setAttribute(programMain);
+
+    const {
+        lineSegPtCoords_Arr, segIdxs_PerCell_Range_Arr,
+        closeCellIdxs_PerCell_Arr, closeCellIdxs_PerCell_Range_Arr,
+        crossCellIdxs_PerCell_Arr, crossCellIdxs_perCell_Range_Arr,
+        segIdxs_PerStrip_Range_Arr
+    } = prepareBuffers(
+        psss, width, height, colCount, cellSize, maxDistance,
+        padCount, resolution, viewbox, stretch
+    );
+
+    // Init/update attributes
+    setAttribute_(
+        'aUV', 2,  // size, i.e 2d - draw 2 values each time
+        gl.FLOAT, gl.STATIC_DRAW, uvArr
+    );
+
+    setAttribute_(
+        'aCrossIdxRangePerCell',
+        2,  // count
+        gl.INT, gl.STATIC_DRAW, crossCellIdxs_perCell_Range_Arr,
+        1  // instance division (once per instance)
+    );
+
+    setAttribute_(
+        'aCloseCellIdxRangePerCell',
+        2,  // count
+        gl.INT, gl.STATIC_DRAW, closeCellIdxs_PerCell_Range_Arr,
+        1  // instance division (once per instance)
+    );
+
+    // Init/update uniforms
+    setUniform_('2f', 'uWidthHeight', width, height);
+    setUniform_('1f', 'uMaxDistance', maxDistance);
+    setUniform_('1f', 'uExponent', sdfExponent);  // TODO
+    setUniform_('1i', 'uIncl', (inclInside ? 1 : 0) + (inclOutside ? 2 : 0));
+    setUniform_('1f', 'uStretch', stretch);  // TODO
+
+    setUniformBlock(programMain)('SegIdxRangePerCellBlock', 0, segIdxs_PerCell_Range_Arr);
+    setUniformBlock(programMain)('SegIdxRangePerStripBlock', 1, segIdxs_PerStrip_Range_Arr);
+
+    ///////////////////////////////////////
+    // Create buffer for line segment data
+    useTexture(glContext, SEG_TEX_INDEX, 'segs');
+    gl.texImage2D(  // really 1d
+        gl.TEXTURE_2D,
+        0,           // level - irrelevant
+        gl.RGBA32F,  // internalFormat - we're using 4 floats for the 2 line segment endpoints
+        lineSegPtCoords_Arr.length/4,  // width === number of lines
+        1,           // height - linear data texture so we only need height of 1
+        0,           // border - whatever
+        gl.RGBA,     // format
+        gl.FLOAT,    // it holds floats
+        lineSegPtCoords_Arr  // texture data
+    );
+    const segTexLoc = gl.getUniformLocation(programMain.program, "uSegs");
+    gl.uniform1i(segTexLoc, SEG_TEX_INDEX);
+    ///////////////////////////////////////////////
+
+    ///////////////////////////////////////////////
+    // Create buffer for close cell indexes per cell
+    useTexture(glContext, CELL_TEX_INDEX, 'closeCellIdxsPerCell');
+    gl.texImage2D(  // really 1d
+        gl.TEXTURE_2D,
+        0,           // level - irrelevant
+        gl.R32I,     // internalFormat - we're using 1 signed 32-bit int for indexes
+        TEX_WIDTH,   // width === number of indexes
+        closeCellIdxs_PerCell_Arr.length / TEX_WIDTH,
+        0,           // border - whatever
+        gl.RED_INTEGER,  // format
+        gl.INT,    // it holds ints
+        closeCellIdxs_PerCell_Arr  // texture data
+    );
+
+    const cellTexLoc = gl.getUniformLocation(programMain.program, "uCloseCellIdxs");
+    gl.uniform1i(cellTexLoc, CELL_TEX_INDEX);
+    ///////////////////////////////////////////////
+
+    ///////////////////////////////////////////////
+    // Create buffer for crossing cell indexes per cell
+    useTexture(glContext, CROSS_TEX_INDEX, 'crossCellIdxsPerCell');
+    gl.texImage2D(  // really 1d
+        gl.TEXTURE_2D,
+        0,           // level - irrelevant
+        gl.R32I,     // internalFormat - we're using 1 signed 32-bit int for indexes
+        TEX_WIDTH,   // width === number of indexes
+        crossCellIdxs_PerCell_Arr.length / TEX_WIDTH,  // height - linear data texture so we only need height of 1
+        0,           // border - whatever
+        gl.RED_INTEGER,  // format
+        gl.INT,    // it holds ints
+        crossCellIdxs_PerCell_Arr  // texture data
+    );
+    const crossTexLoc = gl.getUniformLocation(programMain.program, "uCrossCellIdxs");
+    gl.uniform1i(crossTexLoc, CROSS_TEX_INDEX);
+    ///////////////////////////////////////////////
+
+    if (stretch > 1) {
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(0, 0, width, height/stretch)
+    }
+
+    gl.viewport(0, 0, width, height);
+
+    // draw a square colCount * ROW_COUNT times - 6 vertics
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, colCount*ROW_COUNT);
+
+    if (stretch > 1) {
+        gl.disable(gl.SCISSOR_TEST);
+    }
+}
+
+
+export { mainProgram }

package/src/max-aspect-ratio-before-stretch.ts

@@ -0,0 +1,5 @@
+
+const MAX_ASPECT_RATIO_BEFORE_STRETCH = 4;
+
+
+export { MAX_ASPECT_RATIO_BEFORE_STRETCH }

package/src/prepare-buffers.ts

@@ -0,0 +1,149 @@
+import { bezierCurvesToLineSegs } from './bezier/bezier-curves-to-line-segs.js';
+import { findCloseCells } from './utils/find-close-cells.js';
+import { clipLineSegmentToGrid } from './utils/clip-line-segment-to-grid.js';
+import { createEmptyGrid } from './utils/create-empty-grid.js';
+import { findCrossingCells } from './utils/find-crossing-cells.js';
+import { TEX_WIDTH } from './tex-width.js';
+import { ROW_COUNT } from './row-count.js';
+import { createEmptyStrips } from './utils/create-empty-strips.js';
+import { clipLineSegmentToStrips } from './utils/clip-line-segment-to-strips.js';
+import { mapToViewbox } from './utils/map-to-viewbox.js';
+// import { sum } from './utils/sum.js';
+
+
+function prepareBuffers(
+        psss: (number[][])[][],
+        width: number,
+        height: number,
+        colCount: number,
+        cellSize: number,
+        maxDistance: number,
+        padCount: number,
+        resolution: 0.5|1 = 0.5,
+        viewbox: [number,number,number,number] = [0,0,width,height],
+        stretch = 1) {
+
+    ////////////////////////////////////////////////////////////////////////////
+    const psss_ = mapToViewbox(viewbox, width, height/stretch, psss);
+
+    const lineSegs = bezierCurvesToLineSegs(psss_, resolution);
+    const grid = createEmptyGrid(colCount, padCount);
+    const strips = createEmptyStrips();
+    for (let i=0; i<lineSegs.length; i++) {
+        const seg = lineSegs[i];
+        // Split the line segment into multiple segments that fit within grid cells
+        clipLineSegmentToGrid(grid, width, height, colCount, cellSize, seg, padCount);  // add segments to grid
+        clipLineSegmentToStrips(strips, height, seg);  // add segments to strips
+    }
+
+    findCloseCells(grid, colCount, cellSize, maxDistance, padCount);  // add close cells
+    findCrossingCells(grid, colCount, padCount);  // add crossing cells
+    ////////////////////////////////////////////////////////////////////////////
+
+    const allSegs: number[][][] = [];
+    const segIdxs_PerCell_Range: [number,number][] = [];
+
+    // close cells
+    const closeCellIdxs_PerCell: number[] = [];
+    const closeCellIdxs_PerCell_Range: [number,number][] = [];
+
+    // crossing cells
+    const crossCellIdxs_PerCell: number[] = [];
+    const crossCellIdxs_PerCell_Range: [number,number][] = [];
+
+    // const closeCellIdxsPerCell_: number[][] = [];  // testing
+
+    let S1 = 0;
+    let S2 = 0;
+    let S3 = 0;
+    for (let i=0; i<colCount + 2*padCount; i++) {
+        for (let j=0; j<ROW_COUNT + 2*padCount; j++) {
+            const cell = grid[i][j];
+
+            ///////////
+            if (i >= padCount && i < colCount + padCount &&
+                j >= padCount && j < ROW_COUNT + padCount) {
+
+                const { closeCells, crossingCells } = cell;
+
+                const L1 = crossingCells.length;
+                crossCellIdxs_PerCell.push(...crossingCells);
+                crossCellIdxs_PerCell_Range.push([S1, L1]);
+                S1 += L1;
+
+                const L2 = closeCells.length;
+                closeCellIdxs_PerCell.push(...closeCells);
+                closeCellIdxs_PerCell_Range.push([S2, L2]);
+                S2 += L2;
+
+                // closeCellIdxsPerCell_.push(closeCells);  // testing
+            }
+
+            //////////
+            const { lineSegs } = cell;
+
+            const L3 = lineSegs.length;
+            segIdxs_PerCell_Range.push([S3, L3]);
+            S3 += L3;
+            allSegs.push(...lineSegs);
+        }
+    }
+
+    // It is a requirement to fill in multiples of `TEX_WIDTH`
+    while (closeCellIdxs_PerCell.length % TEX_WIDTH !== 0) { closeCellIdxs_PerCell.push(0); }
+    while (crossCellIdxs_PerCell.length % TEX_WIDTH !== 0) { crossCellIdxs_PerCell.push(0); }
+
+    // Add line segs from strips
+    const segIdxs_PerStrip_Range: [number,number][] = [];
+    for (let i=0; i<ROW_COUNT; i++) {
+        const strip = strips[i];
+        const { lineSegs } = strip;
+
+        //////////
+        const L = lineSegs.length;
+        segIdxs_PerStrip_Range.push([S3, L]);
+        S3 += L;
+        allSegs.push(...lineSegs);
+    }
+
+    
+    // all line segments, with their ranges per cell and per strip
+    const lineSegPtCoords_Arr = new Float32Array(allSegs.flat(2));
+    const segIdxs_PerCell_Range_Arr = new Int32Array(segIdxs_PerCell_Range.flat());
+
+    // close cell idxs and range
+    const closeCellIdxs_PerCell_Range_Arr = new Int32Array(closeCellIdxs_PerCell_Range.flat());
+    const closeCellIdxs_PerCell_Arr = new Int32Array(closeCellIdxs_PerCell);
+
+    // cross cell idxs and range
+    const crossCellIdxs_PerCell_Arr = new Int32Array(crossCellIdxs_PerCell);
+    const crossCellIdxs_perCell_Range_Arr = new Int32Array(crossCellIdxs_PerCell_Range.flat());
+
+    // segment index ranges per strip
+    const segIdxs_PerStrip_Range_Arr = new Int32Array(segIdxs_PerStrip_Range.flat());
+
+    // testing
+    // const r = sum(closeCellIdxsPerCell_.map((c: number[]) => {
+    //     let tot = 0;
+    //     for (let i=0; i<c.length; i++) {
+    //         const idx = c[i];
+    //         const u = Math.trunc(idx / (ROW_COUNT + 2*padCount));
+    //         const v = idx % (ROW_COUNT + 2*padCount);
+
+    //         tot += grid[u][v].lineSegs.length;
+    //     }
+    //     return tot;
+    // }));
+    // console.log(r, r/colCount/ROW_COUNT);
+
+    return {
+        lineSegPtCoords_Arr,
+        segIdxs_PerCell_Range_Arr,
+        closeCellIdxs_PerCell_Arr, closeCellIdxs_PerCell_Range_Arr,
+        crossCellIdxs_PerCell_Arr, crossCellIdxs_perCell_Range_Arr,
+        segIdxs_PerStrip_Range_Arr
+    } 
+}
+
+
+export { prepareBuffers }

package/src/row-count.ts

@@ -0,0 +1,6 @@
+
+// 32 works by far the best (empirically determined) as compared to e.g. 16 or 64
+const ROW_COUNT = 32;
+
+
+export { ROW_COUNT }

package/src/shaders/main.fragment.ts

@@ -0,0 +1,157 @@
+import { ROW_COUNT } from "../row-count"
+
+
+const cache: { [padCount_times_colCount: number]: string } = {};
+
+
+function getMainFragment(
+        colCount: number,
+        padCount: number): string {
+
+    const fragment = cache[1024*colCount + padCount];
+    if (fragment !== undefined) { return fragment; }
+
+const main_Fragment = 
+/*glsl*/`#version 300 es
+
+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
+
+uniform SegIdxRangePerCellBlock {
+    ivec4 uSegIdxRangePerCell[${(ROW_COUNT + 2*padCount)*(colCount + 2*padCount) / 2}];
+};
+uniform SegIdxRangePerStripBlock {
+    ivec4 uSegIdxRangePerStrip[${ROW_COUNT / 2}];
+};
+
+in vec2 vXY;
+flat in int instanceId;
+flat in ivec2 closeCellIdxRange;
+flat in ivec2 crossCellIdxRange;
+out vec4 FragColor;
+
+
+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;
+
+    return distance(point, linePt);
+}
+
+
+void main() {
+    ///////////////////////////////////////////////////////////////////////////
+    // 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;
+
+        bool isEven = crossIdx % 2 == 0;
+
+        ivec4 uSegIdxRange = uSegIdxRangePerCell[crossIdx / 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);
+
+            // 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;
+
+            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;
+        }
+    }
+
+    {
+        bool isEven = (instanceId % ${ROW_COUNT}) % 2 == 0;
+
+        ivec4 uSegIdxRange = uSegIdxRangePerStrip[(instanceId % ${ROW_COUNT}) / 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);
+
+            // 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;
+
+            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;
+        }
+    }
+
+
+    bool inside = winds != 0.0;
+    ///////////////////////////////////////////////////////////////////////////
+
+    ///////////////////////////////////////////////////////////////////////////
+    float res = 1.0;  // sdf result
+
+    if ((inside && (uIncl % 2 != 0)) || (!inside && (uIncl > 1))) {
+        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;
+
+            for (int j = segIdx; j < segIdx + segLen; j++) {
+                // Fetch segment from texture
+                vec4 seg = texelFetch(uSegs, ivec2(j, 0), 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;
+                float val = clamp(d / uMaxDistance, 0.0, 1.0);
+                res = min(res, val);
+            }
+        }
+    }
+    ///////////////////////////////////////////////////////////////////////////
+
+    // DEBUG!
+    float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 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;
+
+    FragColor = vec4(red, green, blue, alpha);
+}
+`
+
+    cache[1024*colCount + padCount] = main_Fragment;
+    return main_Fragment;
+}
+
+
+export { getMainFragment }

package/src/shaders/main.vertex.ts

@@ -0,0 +1,55 @@
+import { ROW_COUNT } from "../row-count";
+
+const main_Vertex = /*glsl*/`#version 300 es
+
+precision highp float;
+
+uniform vec2 uWidthHeight;
+uniform float uStretch;
+in vec2 aUV;
+in ivec2 aCloseCellIdxRangePerCell;
+in ivec2 aCrossIdxRangePerCell;
+out vec2 vXY;
+flat out int instanceId;
+flat out ivec2 closeCellIdxRange;
+flat out ivec2 crossCellIdxRange;
+
+
+void main() {
+    instanceId = gl_InstanceID;
+    closeCellIdxRange = aCloseCellIdxRangePerCell;
+    crossCellIdxRange = aCrossIdxRangePerCell;
+
+    // drawn column-by-column
+    float i = float(instanceId / ${ROW_COUNT});  // column index
+    float j = float(instanceId % ${ROW_COUNT});  // row index
+
+    vec2 trans = vec2(
+        i / float(${ROW_COUNT}),
+        j / float(${ROW_COUNT})
+    );
+
+    vec2 uv = aUV + trans;
+
+    float width = uWidthHeight.x;
+    float height = uWidthHeight.y;
+
+    vXY = vec2(
+        height * uv.x,
+        height * uv.y
+    );
+
+    float aspectRatio = width / height;
+
+    gl_Position = vec4(
+        vec2(
+            (2.0*(uv.x / aspectRatio) - 1.0),
+            2.0*uv.y - 1.0
+        ),
+        0.0, 1.0
+    );
+}
+`;
+
+
+export { main_Vertex }